This question already has an answer here:
setInterval time increases on every click
(1 answer)
Closed 1 year ago.
Every single time I move with the right or left arrows keys or A or D, the player speeds up. I don't want this to happen. I want the player to move at the same speed whenever you press the move key. I have no idea why this is happening. Here is my code:
class Player {
constructor(x, y, color, width, height, health, strength, type, speed) {
this.x = x;
this.y = y;
this.color = color;
this.width = width;
this.height = height;
this.health = health;
this.strength = strength;
this.type = type;
this.speed = speed;
}
draw() {
c.beginPath();
c.rect(this.x, this.y, this.width, this.height);
c.fillStyle = this.color;
c.fill();
c.stroke();
}
moveLeft(){
this.x -= this.speed;
}
moveRight(){
this.x += this.speed;
}
moveUp(){
this.y += this.speed;
}
}
var x = canvas.width / 2;
var y = canvas.height / 2;
var left = false;
var up = false;
var right = false;
var left2 = false;
var up2 = false;
var right2 = false;
var pressing;
var player = new Player(x, y, 'red', 30, 30, 100, 30, 'basic', 2);
player.draw();
document.addEventListener('keydown', function(e) {
switch (e.keyCode) {
case 37:
left = true;
setInterval(function pressing(){
if(left2===false && left === true){
player.moveLeft();
}
},10)
break;
case 65:
left2 = true;
setInterval(function pressing(){
if(left===false && left2 === true){
player.moveLeft();
}
},10)
break;
case 39:
right = true;
setInterval(function pressing(){
if(right2===false && right === true){
player.moveRight();
}
},10)
break;
case 68:
right2 = true;
setInterval(function pressing(){
if(right===false && right2 === true){
player.moveRight();
}
},10)
break;
}
});
document.addEventListener("keyup", event => {
clearInterval(pressing);
if (event.keyCode === 37) {
left = false;
}
if (event.keyCode === 65) {
left2 = false;
}
if (event.keyCode === 39) {
right = false;
}
if (event.keyCode === 68) {
right2 = false;
}
});
I followed many tutorials but couldn't find a different easy way to move my player. Does anyone have another strategy for moving or know why this isn't working?
On every keypress you are currently creating a new interval that is never stopped. So what you are actually doing is to create duplicate intervals each time the key is pressed. As a first, rough fix you could try to store the return value of setInterval in a variable outside of the scope of the key event handler and check whether you have earlier intervals running. If so, clear them up before going ahead.
As clearInterval does not throw any error when fed un-intervalish values, you don't even have to check before clearing:
let myInterval = null
document.addEventListener('keydown', (e) => {
// Clean up any earlier mess.
clearInterval(myInterval)
// Create new mess.
myInterval = setInterval(() => { /* do something */ }, 10)
})
I think that you already have the answer...
You are creating multiple intervals that are never stopped.
But I would not use the interval in the key events, instead use just one outside to draw at certain frequency, then use a more mathematical approach to move and set the speed of the player on those events, we don't need different functions to move left or right, all we need is the correct speed value, positive increases (moves right), negative decreases (moves left) ... here is the code:
class Player {
constructor(pos, speed) {
this.pos = pos
this.speed = speed
}
draw() {
this.pos.x += this.speed.x
this.pos.y += this.speed.y
c.clearRect(0, 0, canvas.width, canvas.height)
c.beginPath()
c.rect(this.pos.x, this.pos.y, 20, 20)
c.fill()
}
}
let canvas = document.getElementById("game")
let c = canvas.getContext("2d")
var player = new Player({ x: 60, y: 50 }, { x: 0, y: 0 })
setInterval(() => player.draw(), 50)
document.addEventListener("keydown", function (e) {
switch (e.keyCode) {
case 37:
case 65:
player.speed.x = -1
break
case 39:
case 68:
player.speed.x = 1
break
}
})
document.addEventListener("keyup", function (e) {
switch (e.keyCode) {
case 37:
case 65:
case 39:
case 68:
player.speed.x = 0
break
}
})
<canvas id="game"></canvas>
I did simplify a lot of your code to keep this example small...
If you are really serious about building a JS game you should look at some of the game engines:
https://github.com/collections/javascript-game-engines
Those are some of the most popular open source ones
Related
I am new in HTML5 canvas. I am trying to build game area using HTML canvas where someone can drive around a car inside
Canvas area like if I press the left arrow key the car will turn to the left and if press the right arrow key the car will turn to the right side. And up and down arrow keys are responsible for moving the car upward or downward. And the car must stay within the canvas area. Here, I use rotate method to turn the car right or left. But it is not working, actually the car is getting away from the canvas and behaving like a crap.
Anyone has any idea to solve the problem? I am totally stuck here. Thanks in advance.
Initially I am displaying a rectangle instead of car.
My js file is given below.
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = innerWidth - 100;
canvas.height = innerHeight - 100;
const canvasW = canvas.width;
const canvasH = canvas.height;
let upPressed = false,
downPressed = false,
rightPressed = false,
leftPressed = false;
class PlayerCar {
constructor(carX, carY, carWidth, carHeight) {
this.carX = carX;
this.carY = carY;
this.carWidth = carWidth;
this.carHeight = carHeight;
}
draw() {
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.rect(this.carX, this.carY, this.carWidth, this.carHeight);
ctx.fill();
ctx.closePath();
}
}
const playerCar = new PlayerCar(100, 100, 40, 60);
playerCar.draw();
function navigation() {
const handleKeyDown = (e) => {
if (e.key === "ArrowUp") {
upPressed = true;
}
if (e.key === "ArrowDown") {
downPressed = true;
}
if (e.key === "ArrowRight") {
rightPressed = true;
}
if (e.key === "ArrowLeft") {
leftPressed = true;
}
};
const handleKeyUp = (e) => {
if (e.key === "ArrowUp") {
upPressed = false;
}
if (e.key === "ArrowDown") {
downPressed = false;
}
if (e.key === "ArrowRight") {
rightPressed = false;
}
if (e.key === "ArrowLeft") {
leftPressed = false;
}
};
document.addEventListener("keydown", handleKeyDown);
document.addEventListener("keyup", handleKeyUp);
}
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvasW, canvasH);
if (upPressed) {
playerCar.carY -= 5;
}
if (downPressed) {
playerCar.carY += 5;
}
if (leftPressed) {
ctx.save();
ctx.translate(
playerCar.carX + playerCar.width / 2,
playerCar.carY + playerCar.height / 2
);
ctx.rotate((Math.PI / 180) * 0.2);
playerCar.carX -= 5;
ctx.restore();
}
if (rightPressed) {
ctx.save();
ctx.translate(
playerCar.carX + playerCar.width / 2,
playerCar.carY + playerCar.height / 2
);
ctx.rotate((Math.PI / 180) * -0.2);
playerCar.carX += 5;
ctx.restore();
}
if (playerCar.carX < 0) playerCar.carX = 0;
if (playerCar.carX > canvasW - playerCar.carWidth)
playerCar.carX = canvasW - playerCar.carWidth;
if (playerCar.carY < 0) playerCar.carY = 0;
if (playerCar.carY > canvasH - playerCar.carHeight)
playerCar.carY = canvasH - playerCar.carHeight;
playerCar.draw();
}
function startGame() {
animate();
}
startGame();
navigation();
I would first move all of the update info to a method in the car class vice doing it in the animate loop.
This is where cos and sin come in and getting familiar with angles. You also must understand the canvas relation the the object it draws is always at (x, y) of (0, 0) unless you translate it to the center. To do that draw your object in this manner:
ctx.fillStyle = "blue";
ctx.save();
ctx.beginPath();
ctx.translate(this.carX, this.carY)
ctx.rotate(this.angle)
ctx.rect(-this.carWidth/2, -this.carHeight/2, this.carWidth, this.carHeight);
ctx.fill();
ctx.closePath();
ctx.restore();
Use of save() and restore() are a must unless you want to translate and rotate you object back to its original. It's the same ting but simpler. So now I am translating the car around the canvas and the car itself is drawn at negative half the width and height to ensure the canvas (0, 0) corner is in the center of the car. This is because canvas always rotates from the top-left corner.
Now create a method called update() and put you control logic in there:
update() {
if (rightPressed) {
this.angle += this.rot
} else if (leftPressed) {
this.angle -= this.rot
}
if (upPressed) {
this.carX += Math.cos(this.angle+toRadians(-90)) * 5;
this.carY += Math.sin(this.angle+toRadians(-90)) * 5;
}
}
Be aware I added angle and rot to the constructor also. What this is doing is when you press left or right the car rotate accordingly. As for pressing up we are going to translate it by the rotation. Since this would normally make the car drive to the right we have to also add -90 degrees to the current angle to ensure the car drives forwards. Just remove +toRadians(-90) and see what happens.
Multiplying it by 5 is an arbitrary number for speed. You can even make it part of the constructor and set it there. i.e. this.speed = 5
Doing the same thing for downPressed but instead use +toRadians(90)
toRadians() is just a simple function added to your code to convert degrees to radians.
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 600;
const canvasW = canvas.width;
const canvasH = canvas.height;
let upPressed = false,
downPressed = false,
rightPressed = false,
leftPressed = false;
class PlayerCar {
constructor(carX, carY, carWidth, carHeight) {
this.carX = carX;
this.carY = carY;
this.carWidth = carWidth;
this.carHeight = carHeight;
this.angle = 0;
this.rot = 0.1; //control how fast it turns
}
draw() {
ctx.fillStyle = "blue";
ctx.save();
ctx.beginPath();
ctx.translate(this.carX, this.carY)
ctx.rotate(this.angle)
ctx.rect(-this.carWidth/2, -this.carHeight/2, this.carWidth, this.carHeight);
ctx.fill();
ctx.closePath();
ctx.restore();
}
update() {
if (rightPressed) {
this.angle += this.rot
} else if (leftPressed) {
this.angle -= this.rot
}
if (upPressed) {
this.carX += Math.cos(this.angle+toRadians(-90)) * 5;
this.carY += Math.sin(this.angle+toRadians(-90)) * 5;
}
if (downPressed) {
this.carX += Math.cos(this.angle+toRadians(90)) * 5;
this.carY += Math.sin(this.angle+toRadians(90)) * 5;
}
}
}
function toRadians(deg) {
return (deg * Math.PI) / 180;
}
const playerCar = new PlayerCar(100, 100, 40, 60);
playerCar.draw();
function navigation() {
const handleKeyDown = (e) => {
if (e.key === "ArrowUp") {
upPressed = true;
}
if (e.key === "ArrowDown") {
downPressed = true;
}
if (e.key === "ArrowRight") {
rightPressed = true;
}
if (e.key === "ArrowLeft") {
leftPressed = true;
}
};
const handleKeyUp = (e) => {
if (e.key === "ArrowUp") {
upPressed = false;
}
if (e.key === "ArrowDown") {
downPressed = false;
}
if (e.key === "ArrowRight") {
rightPressed = false;
}
if (e.key === "ArrowLeft") {
leftPressed = false;
}
};
document.addEventListener("keydown", handleKeyDown);
document.addEventListener("keyup", handleKeyUp);
}
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvasW, canvasH);
if (playerCar.carX < 0) playerCar.carX = 0;
if (playerCar.carX > canvasW - playerCar.carWidth)
playerCar.carX = canvasW - playerCar.carWidth;
if (playerCar.carY < 0) playerCar.carY = 0;
if (playerCar.carY > canvasH - playerCar.carHeight)
playerCar.carY = canvasH - playerCar.carHeight;
playerCar.draw();
playerCar.update();
}
function startGame() {
animate();
}
startGame();
navigation();
<canvas></canvas>
To be clear on why your code is not doing what you expect think about this. You are trying to translate and rotate the context without ever accessing the object. If you were to add ctx.fillRect() to your animate loop would you think it's going to just know that you want to change the car? Same goes for translate and rotate. Try adding a fillStyle and fillRect to your rightPressed
if (rightPressed) {
ctx.save();
playerCar.carX += 5;
ctx.translate(
playerCar.carX + playerCar.width / 2,
playerCar.carY + playerCar.height / 2
);
ctx.rotate(45);
ctx.fillStyle = 'grey'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.restore();
}
You will see when you press right the context does what you want just not the context of the object. This is why adding it directly top the class should be done. Now you are specifically targeting the object you want.
I have trying to achieve motion effect for the standing object.
I assume that my object will be able to go to the right or the left for example.
And I wanna make illusion like that object is still moving. Even if currently is not moving. (Meanwhile background can moving still...)
'use strict';
const pressedKeys = [];
const canvas = document.querySelector('#game');
const ctx = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 150;
class Player
{
xPosition = 150;
yPosition = 50;
speed = 5;
isMoving = false;
update(pressedKeys)
{
if (pressedKeys['ArrowLeft']) {
this.xPosition -= this.speed;
} else if (pressedKeys['ArrowRight']) {
this.xPosition += this.speed;
}
}
draw(ctx)
{
ctx.fillStyle = '#2976f2';
ctx.fillRect(this.xPosition, this.yPosition, 30, 30);
}
}
const player = new Player();
function animate()
{
window.requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height)
if (player.isMoving) {
player.update(pressedKeys);
}
player.draw(ctx);
}
animate();
window.addEventListener('keyup', function (event) {
delete pressedKeys[event.key];
player.isMoving = false;
})
window.addEventListener('keydown', function (event) {
switch (event.key) {
case 'ArrowLeft':
case 'ArrowRight':
pressedKeys[event.key] = true;
player.isMoving = true;
break;
}
})
canvas {
border: 1px solid blue;
}
<canvas id="game"></canvas>
Usually this kind of effect is done by constantly duplicating the desired object, move it to the exact same screen position and ultimately fade it out over time e.g. within one second.
In your case though we can simplify things a bit since you want to keep that "motion blurred" look even if it ain't moving.
So first we need to another property to your Player class oldX. It holds the position of the object before a movement occured. By subtracting oldX from x we can determine if the object is moving to the left or to the right - so we know where to put the trailing duplicates.
If we know the direction, we can start creating duplicates using a simple for loop like:
for (var a = 0; a < 7; a++) {
ctx.fillRect(this.x - (this.x - this.oldX) / this.speed * a * 2, this.y, 30, 30);
}
this will create seven equal looking squares - so it won't look good yet. The duplicate next to the original should have almost the same color while the last one should almost blend with the background. To do this we can use the globalAlpha property of the canvases context. A value of 1 is opaque while 0 is completely transparent.
Putting it all together:
const keys = [];
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 150;
class Player {
x = 150;
y = 50;
oldX = 150;
speed = 5;
moving = false;
update(keys) {
this.oldX = this.x;
if (keys['ArrowLeft']) {
this.x -= this.speed;
} else if (keys['ArrowRight']) {
this.x += this.speed;
}
}
draw(ctx) {
ctx.fillStyle = '#2976f2';
ctx.fillRect(this.x, this.y, 30, 30);
ctx.save();
for (var a = 0; a < 7; a++) {
ctx.globalAlpha = 0.5 - (a / 7) * 0.5;
ctx.fillRect(this.x - (this.x - this.oldX) / this.speed * a * 2, this.y, 30, 30);
}
ctx.restore();
}
}
const player = new Player();
function animate() {
window.requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height)
if (player.moving) {
player.update(keys);
}
player.draw(ctx);
}
animate();
window.addEventListener('keyup', function(event) {
delete keys[event.key]
player.moving = false;
})
window.addEventListener('keydown', function(event) {
switch (event.key) {
case 'ArrowLeft':
case 'ArrowRight':
keys[event.key] = true;
player.moving = true;
break;
}
})
canvas {
border: 1px solid blue;
}
<canvas id="game"></canvas>
I am learning how to make a game with the canvas via JavaScript, and I have the arrow keys set to move a block on the canvas. I want to add a modifier in which while holding shift, the block moves twice as fast, and I cannot get my function to work properly when the shift key is pressed.
Any suggestions/help would be much appreciated!
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 540;
this.canvas.height = 330;
this.context = this.canvas.getContext("2d");
document.body.appendChild(this.canvas,document.body.childNodes[0]);
this.canvas.setAttribute("id", "myCanvas");
this.canvas.hidden = true;
this.interval = setInterval(updateGameArea, 1000/FPS);
window.addEventListener('keydown', function (e) {
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.gamearea = myGameArea;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -10; }
if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 10; }
if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -10; }
if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 10; }
if (myGameArea.keys && myGameArea.keys[65]) {myGamePiece.speedX = -10; }
if (myGameArea.keys && myGameArea.keys[68]) {myGamePiece.speedX = 10; }
if (myGameArea.keys && myGameArea.keys[87]) {myGamePiece.speedY = -10; }
if (myGameArea.keys && myGameArea.keys[83]) {myGamePiece.speedY = 10; }
//What do I need to do to get the following function to execute? (NOTE
//THIS WAS MOVED TO AFTER IF STATEMENTS PER COMMENT BELOW, THIS DID NOT
/////FIX the ISSUE)
GetShiftState(e);
myGamePiece.newPos();
myGamePiece.update();
}
//Below is the get shift key function I cannot get to work.
//What I am trying to do is increase the speed of the gamepiece moving
//when holding shift + the directional arrow
function GetShiftState (e) {
if (e.shiftKey) {
switch(e.which) {
case 37:
console.log("shift + left arrow");
myGamePiece.speedX = -20;
break;
case 38:
console.log("shift + up arrow");
myGamePiece.speedY = -20;
break;
case 39:
console.log("shift + right arrow");
myGamePiece.speedX = 20;
break;
case 40:
console.log("shift + down arrow");
myGamePiece.speedY = 20;
break;
default:
break;
}
}
else {
console.log("Shift key is up.");
}
}
You are resetting the myGamePiece.speed to 10 after you call the method.
Move the function call to after the end of the if statements.
Below is a snippet from some code I wrote for moving a div around the screen.
The principle is the same though, note we have a step variable and we adjust it if the event.shiftKey is true.
Complete code can be viewed / forked here: https://repl.it/#PaulThomas1/MoveDivAroundTheScreen
var step = 10;
if (event.shiftKey) step = step * 2;
switch (key) {
case "ArrowUp":
event.preventDefault();
box.style.top = (top - step) + "px";
break;
case "ArrowDown":
event.preventDefault();
box.style.top = (top + step) + "px";
break;
case "ArrowLeft":
box.style.left = (left - step) + "px";
break;
case "ArrowRight":
box.style.left = (left + step) + "px";
break;
}
I have to make a game for school :)
I'am a beginner in Javascript (and English) and I have a question about a canvas.
I made a spaceship in my canvas, and I can fly around with it with my arrowkeys. The problem is that my spaceship can fly trough the border of my canvas.. and thats not way it ment to be.
I hope one of you guys can help me with it! :)
Here is my code..
window.onload = init;
var ctx;
var x = 750;
var y = 400;
var up = false;
var right = false;
var left = false;
var gravity = -1.1;
var horizontalSpeed = 0.1;
function init() {
document.onkeydown = handleKeyDown;
document.onkeyup = handleKeyUp;
var canvas = document.querySelector("canvas");
ctx = canvas.getContext("2d");
animate();
}
function animate() {
moveShip();
drawScene();
requestAnimationFrame(animate);
}
function drawScene(){
ctx.clearRect(0,0,1600,800);
drawSpaceship();
}
function moveShip() {
if (left) {
horizontalSpeed -= 0.1;
}else if (right){
horizontalSpeed += 0.1;
}
if (up) {
gravity -=0.4;
}
gravity += 0.12;
y += gravity;
x += horizontalSpeed;
}
function drawSpaceship () {
ctx.save();
ctx.translate(x, y);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, -40);
ctx.lineTo(30,-80);
ctx.lineTo(60,-40);
ctx.lineTo(60,0);
ctx.lineTo(80,30);
ctx.lineTo(80,90);
ctx.lineTo(60,50);
ctx.lineTo(0,50);
ctx.lineTo(-20,90);
ctx.lineTo(-20,30);
ctx.lineTo(0,0);
ctx.strokeStyle = 'white';
ctx.stroke();
ctx.closePath();
ctx.restore();
}
function handleKeyDown (evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
left = true;
break;
case 38:
up = true;
break;
case 39:
right = true;
break;
}
}
function handleKeyUp(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
left = false;
break;
case 38:
up = false;
break;
case 39:
right = false;
break;
}
}
You need a concept called "clamping".
Clamping is limiting a value within a specified range.
You want to clamp your ship's horizontal position to be no less than 0 and no greater than the canvas width.
You want to clamp your ship's vertical position to be no less than 0 and no greater than the canvas height.
This is code to clamp a value between a min and max value.
clampedValue = Math.min(Math.max(currentValue, min), max);
To keep any [x,y] within the canvas, you can clamp the x,y like this:
clampedX = Math.min(Math.max(x, 0), canvasWidth);
clampedY = Math.min(Math.max(y, 0), canvasHeight);
Now your ship is larger than just a single [x,y] point. So to keep your entire ship inside your canvas you would clamp the [x,y] like this:
y += gravity;
x += horizontalSpeed;
x=Math.min(Math.max(x,0+20),width-80);
y=Math.min(Math.max(y,0+80),height-90);
Also, you're letting gravity increase even if you ship is on the ground. At that point the gravity effect becomes zero because the ship is being entirely supported by the ground against gravity. Therefore, you'll want to set gravity to zero when the ship is on the ground:
if(y==height-90){gravity=0;}
Here's your code refactored to keep your ship inside the canvas:
var x = 200;
var y = 100;
var up = false;
var right = false;
var left = false;
var gravity = -1.1;
var horizontalSpeed = 0.1;
var canvas = document.querySelector("canvas");
var width=canvas.width;
var height=canvas.height;
var ctx = canvas.getContext("2d");
init();
function init() {
document.onkeydown = handleKeyDown;
document.onkeyup = handleKeyUp;
animate();
}
function animate() {
moveShip();
drawScene();
requestAnimationFrame(animate);
}
function drawScene(){
ctx.clearRect(0,0,1600,800);
drawSpaceship();
}
function moveShip() {
if (left) {
horizontalSpeed -= 0.1;
}else if (right){
horizontalSpeed += 0.1;
}
if (up) {
gravity -=0.4;
}
gravity += 0.12;
y += gravity;
x += horizontalSpeed;
x=Math.min(Math.max(x,0+20),width-80);
y=Math.min(Math.max(y,0+80),height-90);
if(y==height-90){gravity=0;}
}
function drawSpaceship () {
ctx.save();
ctx.translate(x, y);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, -40);
ctx.lineTo(30,-80);
ctx.lineTo(60,-40);
ctx.lineTo(60,0);
ctx.lineTo(80,30);
ctx.lineTo(80,90);
ctx.lineTo(60,50);
ctx.lineTo(0,50);
ctx.lineTo(-20,90);
ctx.lineTo(-20,30);
ctx.lineTo(0,0);
ctx.strokeStyle = 'blue';
ctx.stroke();
ctx.closePath();
ctx.restore();
}
function handleKeyDown (evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
left = true;
break;
case 38:
up = true;
break;
case 39:
right = true;
break;
}
}
function handleKeyUp(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
left = false;
break;
case 38:
up = false;
break;
case 39:
right = false;
break;
}
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<h4>Hold down the arrow keys to move the ship.</h4>
<canvas id="canvas" width=500 height=400></canvas>
I am trying to make collision detection work in a JavaScript program I am working in currently, and I can't figure out why it is triggering in such strange coordinates. X 50 Y 199
If any of you good help that would be much appreciated. Here is my code.
var game = {};
game.fps = 50;
game.playerX = 50;
game.playerY = 50;
game.draw = function () {
c = document.getElementById('canvas');
ctx = c.getContext("2d");
clearCanvas();
//PLAYER
ctx.fillStyle = "blue";
ctx.fillRect(game.playerX, game.playerY, 50, 50);
//ENEMY
ctx.fillStyle = "green";
ctx.fillRect(200, 200, 50, 50);
//Coords
ctx.font = "20px Arial";
ctx.fillStyle = "red";
ctx.fillText(game.playerX, 400, 480);
ctx.fillText(game.playerY, 450, 480);
};
game.update = function () {
document.onkeydown = function () {
switch (window.event.keyCode) {
case 87:
//up
--game.playerY;
break;
case 83:
//down
++game.playerY;
break;
case 65:
//left
--game.playerX;
break;
case 68:
//right
++game.playerX;
break;
}
};
//COLLISION DETECTION
if (game.playerX <= 200 && game.playerX <= 250 && game.playerY >= 200 && game.playerY <= 250) {
alert("it worked!");
game.playerX = 400;
}
//END OF COLLISION DETECTION
};
game.run = function () {
game.update();
game.draw();
};
game.start = function () {
game._intervalId = setInterval(game.run, 1000 / game.fps);
};
game.stop = function () {
clearInterval(game._intervalId);
};
Based on your if statement in the Y axis I'd say you want if(game.playerX >= 200 rather than if(game.playerX <= 200. Right now you're checking if playerX is both less than 200 and less than 250, which 50 satisfies.
You are using the wrong keycodes: JavaScript Keycodes. Additionally, you are only running the collision check one time, when you manually call game.update(). You need to run the collision check within the keydown event:
Here is a Fiddle
document.onkeydown = function (e) {
switch (e.keyCode) {
case 38:
//up
console.log('up');
--game.playerY;
break;
case 40:
//down
++game.playerY;
break;
case 37:
//left
--game.playerX;
break;
case 39:
//right
++game.playerX;
break;
}
console.log(game.playerX + ', ' + game.playerY);
//COLLISION DETECTION
if (game.playerX >= 200 && game.playerX <= 250 && game.playerY >= 200 && game.playerY <= 250) {
alert("it worked!");
game.playerX = 400;
}
};