I want to make my game exploreable, that we can move around map. I tried my best to implement this code: https://jsfiddle.net/gfcarv/QKgHs/ but it didn't work for me, I tried to solve this in many ways, I searched the internet and couldn't find any simple viewport that can suit my code.
I just want to player be always at the middle of canvas, and when we click ( or hold click ) it moves the map, but every game object stays in their position. If it's reaching any side of map, just let to do it, it can go over the map. And I wanted map as, simple image or some generated canvas rectangles, or whatever.
This is my simplified code:
function randomNumberFromRange( min, max ) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function testCollisionRectRect( rectangle1, rectangle2 ) {
return rectangle1.x - rectangle1.width/2 <= rectangle2.x - rectangle2.width/2 + rectangle2.width
&& rectangle2.x - rectangle2.width/2 <= rectangle1.x - rectangle1.width/2 + rectangle1.width
&& rectangle1.y - rectangle1.height/2 <= rectangle2.y - rectangle2.height/2 + rectangle2.height
&& rectangle2.y - rectangle2.height/2 <= rectangle1.y - rectangle1.height/2 + rectangle1.height;
}
Array.prototype.remove = function() {
var what, a = arguments, L = a.length, ax;
while (L && this.length) {
what = a[--L];
while ((ax = this.indexOf(what)) !== -1) {
this.splice(ax, 1);
}
}
return this;
}; // Function to pop specific element drom array by value
function drawLine( startX, startY, endX, endY, color, width ) {
ctx.save();
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(endX,endY);
ctx.stroke();
ctx.restore();
}
function drawBorder( x, y, width, height, lineWidth, strokeColor ) {
ctx.save();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = strokeColor;
ctx.strokeRect( x, y, width, height);
ctx.restore();
}
function drawRect( x, y, width, height, fillColor ) {
ctx.save();
ctx.fillStyle = fillColor;
ctx.fillRect( x, y, width, height );
ctx.restore();
}
// ====================
// Global variables
// ====================
var ctx = $("#canvas")[0].getContext('2d'),
canvas = document.getElementById('canvas'),
cHeight = canvas.height = 500,
cWidth = canvas.width = 500,
canvasOffset = $('#canvas').offset(),
offsetX = canvasOffset.left,
offsetY = canvasOffset.top,
frameCounter = 0,
enemyList = [],
spawningEnemies_FLAG = true,
isLeftMouseButtonHeld_FLAG = false,
cursors = ['default', 'pointer'],
enemiesOnMap = 100,
fps = 120,
mouseX,
mouseY;
// canvas settings
ctx.font = '22px Arial';
var sharedBehaviour = {
x: cWidth / 2,
y: cHeight / 2,
id: undefined,
type: 'entity',
width: 15,
height: 15,
fillColor: '#E15258',
targetX: null,
targetY: null,
bulletSpeed: 1,
speed: 1,
update( type ) {
// if there is target
if( this.targetX !== null ) {
// Find out distance to target
var distanceX = this.targetX - this.x; // distance on X axis
var distanceY = this.targetY - this.y; // distance on Y axis
var distanceToTarget = Math.sqrt( distanceX*distanceX + distanceY*distanceY ); // distance
// If distance is smaller or equal speed, then just set position
if( distanceToTarget <= this.speed ) {
this.x = this.targetX;
this.y = this.targetY;
// Then reset
this.targetX = this.targetY = null;
} else { // If distance is bigger than speed, so we want to move with speed
distanceX = distanceX / distanceToTarget;
distanceY = distanceY / distanceToTarget;
distanceX = distanceX * this.speed;
distanceY = distanceY * this.speed;
this.x += distanceX;
this.y += distanceY;
}
}
},
draw( type ) {
drawRect( this.x - this.width/2, this.y - this.height/2, this.width, this.height, this.fillColor );
},
isColliding( entity ) {
return testCollisionRectRect( this, entity );
}
};
var player = Object.assign({}, sharedBehaviour, {
x: cWidth/2 - 12.5,
y: cHeight/2 - 12.5,
id: 980722,
type: 'player',
width: 25,
height: 25,
fillColor: '#82d877',
speed: 2.5,
isWithinRange( entity, val ) {
// Check if enemy is on player
var distanceX = this.x - entity.x;
var distanceY = this.y - entity.y;
return Math.sqrt( distanceX*distanceX + distanceY*distanceY ) < val;
}
});
function createEnemy( x, y, type, width, height, fillColor, speed, name ) {
var newEnemy = Object.assign({}, sharedBehaviour, {
x,
y,
type,
width,
height,
name,
fillColor,
speed,
setTarget( entity ) {
this.targetX = entity.x + randomNumberFromRange(-50, 50); // Set X with some random number
this.targetY = entity.y + randomNumberFromRange(-50, 50); // Set Y with some random number
},
isOnPlayer( val ) {
// Check if enemy is on player
var distanceX = player.x - this.x;
var distanceY = player.y - this.y;
return Math.sqrt( distanceX*distanceX + distanceY*distanceY ) < val;
},
isMouseOver( ) {
return (this.mouseX + this.width/2 >= this.x && this.mouseX + this.width/2 <= this.x + this.width && this.mouseY + this.height/2 >= this.y && this.mouseY + this.height/2 <= this.y + this.height);
}
});
enemyList.push( newEnemy );
}
function newGame( ) {
player.x = cWidth/2 - 12.5;
player.y = cHeight/2 - 12.5;
frameCounter = 0;
enemyList = [];
spawningEnemies_FLAG = true;
isLeftMouseButtonHeld_FLAG = false;
// Spawning enemies
for( i=0; i < randomNumberFromRange(15, 25); i++ ) {
createEnemy( randomNumberFromRange(0, cWidth), randomNumberFromRange(0, cHeight), 'passive', randomNumberFromRange(12, 18), randomNumberFromRange(12, 18), 'red', 1, 's' );
createEnemy( randomNumberFromRange(0, cWidth), randomNumberFromRange(0, cHeight), 'agressive', randomNumberFromRange(10, 16), randomNumberFromRange(10, 16), 'lightblue', 1.5, 'l' );
}
update();
}
function update( ) {
frameCounter++;
ctx.clearRect(0,0,cWidth,cHeight);
// ========== Update ==========
// Player
player.update('player');
// Enemies
enemyList.forEach( enemy => { enemy.update(); });
// ========== Draw ==========
// Enemies
enemyList.forEach( enemy => { enemy.draw(); });
// Player
player.draw('player');
// ========== Conditions ==========
// Enemies
// Behaviour
enemyList.forEach( enemy => {
if ( Math.random() < ( 1 / 15 ) ) {
if ( enemy.isOnPlayer( player.circleRadius ) ) {
if ( ! (enemy.isOnPlayer( 50 )) ) {
enemy.setTarget( player );
}
}
}
if ( Math.random() < ( 1 / 800 )) {
if ( ! (enemy.isOnPlayer( player.circleRadius )) ) enemy.setTarget( enemy );
}
if ( enemy.isOnPlayer(player.circleRadius/2 - 25 ) ) {
enemy.targetX = enemy.targetY = null;
}
( enemyList.length === enemiesOnMap ) ? spawningEnemies_FLAG = false : spawningEnemies_FLAG = true;
});
setTimeout(function() { requestAnimationFrame(update); }, 1000 / fps);
}
function setPlayerTarget_and_checkPlayerPosition( mouse ) {
player.targetX = mouseX;
player.targetY = mouseY;
if (player.targetX < player.width/2) player.targetX = player.width/2;
if (player.targetX > cWidth - player.width/2) player.targetX = cWidth - player.width/2;
if (player.targetY < player.height/2) player.targetY = player.height/2;
if (player.targetY > cHeight - player.height/2) player.targetY = cHeight - player.height/2;
}
canvas.addEventListener('mousedown', function( mouse ) {
isLeftMouseButtonHeld_FLAG = true;
setPlayerTarget_and_checkPlayerPosition(mouse);
});
canvas.addEventListener('mouseup', function( mouse ) {
isLeftMouseButtonHeld_FLAG = false;
});
canvas.addEventListener('mousemove', function( mouse ) {
if( isLeftMouseButtonHeld_FLAG ) {
setPlayerTarget_and_checkPlayerPosition(mouse);
}
});
canvas.addEventListener('mousemove', function( mouse ) {
mouseX = parseInt(mouse.clientX - offsetX);
mouseY = parseInt(mouse.clientY - offsetY);
});
newGame();canvas { border: 1px solid black; background-color: white; }<canvas id="canvas"></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>