We Keep Coding

Disable arrow keys while modal open using document.removeEventListener()

I made a game with HTML canvas in which the user can control the movement of a character.
Links: live website/GitHub repo
My goal is to disable arrow keys while the modal that displays when the game is over is open. I tried this by adding the following to the showModal() function, which is the same as the version of the event listener that is added at the end of the JavaScript (then I would re-add this event listener when the game is reset). It doesn't do anything, though.
document.removeEventListener('keydown', function(e) {
let allowedKeys = {
37: 'left',
38: 'up',
39: 'right',
40: 'down'
};
player.handleInput(allowedKeys[e.keyCode]);
});
Full JS code from this file (there are two other JS files but I don't think they're relevant):
"use strict"; // Enables strict mode to catch common bloopers
// TODO: Disable player movement when modal opened? Also, set 3 tries before modal opened (change to game over). Restart button.
// TODO: Start game on enter when modal opened
const playAgainButton = document.querySelector('.play-again');
const restartButton = document.querySelector('.restart');
// Calls playAgain() function when user clicks reset icon in sidebar
restartButton.addEventListener('click', playAgain);
// Starts lives at 3
let lives = 3;
let sidebarLives = document.querySelector('.lives-left');
sidebarLives.innerHTML = lives;
// Sets an initial player score of 0.
let score = 0;
// Sets score shown in sidebar
// document.getElementsByClassName('score')[0].innerHTML = score;
let sidebarScore = document.querySelector('.score');
sidebarScore.innerHTML = score;
let modalScore = document.querySelector('.modal-score');
modalScore.innerHTML = score;
// Called when user clicks restart button in sidebar or play again button in modal. Sets modal to display: none, resets lives and score
function playAgain() {
// Hides modal if present (if opened by game ending)
modal.classList.remove('modal-visible');
lives = 3;
sidebarLives.innerHTML = lives;
score = 0;
sidebarScore.innerHTML = score;
}
// Calls playAgain() function (hides modal and restarts game) with user clicks "play again" button in modal
// TODO: remove? just one event listener for both buttons?
// modalPlayAgainButton.addEventListener('click', playAgain);
// Note: In a constructor function "this" does not have a value. It is a substitute for the new object. The value of this will become the new object when a new object is created
// Note commas not used to separate methods and properties in a class
class Player {
// Constructor function, a special function just for initializing new objects, will automatically run when a new object is constructed (with keyword "new") from this class. Contains data needed to create it
constructor(x, y, speed) {
this.sprite = 'images/char-boy.png';
this.x = x;
this.y = y;
this.speed = speed;
}
// Methods that all objects created from class will inherit. Would exist on prototype in pre-class way of writing it, but effect is the same (the following methods still exist on Player prototype [for example would be Player.prototype.update = function(dt)...])
// When player reaches water, moves player back to starting position, and increase score by 1
update(dt) {
if (this.y === 25) {
this.x = 200;
this.y = 400;
score++;
sidebarScore.innerHTML = score;
}
}
// Draws player on screen
render() {
ctx.drawImage(Resources.get(this.sprite), this.x, this.y)
}
// Connects keyboard input to player movement. If statements prevent player movement off screen
handleInput(allowedKeys) {
if (allowedKeys === 'down' && this.y < 425) {
this.y += 25;
}
if (allowedKeys === 'up') {
this.y -= 25;
}
if (allowedKeys === 'left' && this.x > 0) {
this.x -= 25;
}
if (allowedKeys === 'right' && this.x < 400) {
this.x += 25;
}
}
}
class Enemy {
// Sets enemy's initial location
constructor(x, y, speed) {
this.x = x;
this.y = y;
// Sets speed of enemy
this.speed = speed;
// The image/sprite for our enemies
this.sprite = 'images/enemy-bug.png';
}
update(dt) {
// Multiplies enemy's movement by time delta to ensure game runs at same speed for all computers
this.x += this.speed * dt;
// Once enemy finished moving across screen, moves it back so it can cross screen again and randomizes its speed
if (this.x > 500) {
this.x = -75;
// Math.random() function returns random number between 0 (inclusive) and 1 (exclusive). Math.floor() returns the largest integer less than or equal to a given number
this.speed = 70 + Math.floor(Math.random() * 450);
}
// When collission occurs, subtracts a life, updates lives displayed in sidebar and updates score that will be displayed in modal if no lives remaining
if ((player.x < (this.x + 70)) && ((player.x + 17) > this.x) && (player.y < (this.y + 45)) && ((30 + player.y) > this.y)) {
player.x = 200;
player.y = 400;
lives--;
sidebarLives.innerHTML = lives;
modalScore.innerHTML = score;
if (lives === 0) {
// Calls function that adds class that sets modal to display: block
showModal();
}
}
}
// Draws enemy on the screen
render() {
ctx.drawImage(Resources.get(this.sprite), this.x, this.y);
}
};
// ENEMY/PLAYER OBJECT INSTANTIATION
let enemyPosition = [60, 140, 220];
let allEnemies = [];
let player = new Player(200, 400, 50);
enemyPosition.forEach(function(posY) {
let enemy = new Enemy(0, posY, 70 + Math.floor(Math.random() * 450));
allEnemies.push(enemy);
});
// Modal
const modal = document.getElementById('myModal');
const closeIcon = document.querySelector('.close');
// When called, adds class that sets modal to display: block when player reaches water
function showModal() {
modal.classList.add('modal-visible');
// Goal: Disable arrow keys while the modal is open (doesn't work). If I can get this to work, then I'd re-add the arrow key event listener when the game is reset
document.removeEventListener('keydown', function(e) {
let allowedKeys = {
37: 'left',
38: 'up',
39: 'right',
40: 'down'
};
// Not sure why "player" needs to be lowercase, given the class name is uppercase
player.handleInput(allowedKeys[e.keyCode]);
});
// Calls playAgain() function when user clicks play again button in modal
playAgainButton.addEventListener('click', playAgain);
// If esc is pressed, closes modal and restarts game (note: keydown used instead of keypress because keypress only works for keys that produce a character value)
document.addEventListener('keydown', function(e) {
let keyCode = e.keyCode;
if (keyCode === 27) {
modal.classList.remove('modal-visible');
playAgain()
}
});
// If enter is pressed, closes modal and restarts game
document.addEventListener('keydown', function(e) {
let keyCode = e.keyCode;
if (keyCode === 13) {
modal.classList.remove('modal-visible');
playAgain()
}
});
// If user clicks modal's close icon, closes modal and restarts game
closeIcon.addEventListener('click', function() {
modal.classList.remove('modal-visible');
playAgain();
});
}
// Listens for keydown event (fired when a key is pressed down [regardless of whether it produces a character, unlike keypress]) and sends the keys to Player.handleInput() method
document.addEventListener('keydown', function(e) {
let allowedKeys = {
37: 'left',
38: 'up',
39: 'right',
40: 'down'
};
// Not sure why "player" needs to be lowercase, given the class name is uppercase
player.handleInput(allowedKeys[e.keyCode]);
});

Instead of removing and/or filtering out the specific key events, when the game state changes (e.g.: when the character dies), for starters, as a simpler solution, use a flag (a boolean value) to indicate, whether your character should be moving or not.
let isDead = false;
When your character dies, set the flag to false:
if (lives === 0) {
isDead = true;
// Calls function that adds class that sets modal to display: block
showModal();
}
And in your input handling function, use the flag to allow/disallow the character movement:
// Connects keyboard input to player movement. If statements prevent player movement off screen
handleInput(allowedKeys) {
if (isDead) {
return;
}
if (allowedKeys === 'down' && this.y < 425) {
this.y += 25;
}
if (allowedKeys === 'up') {
this.y -= 25;
}
if (allowedKeys === 'left' && this.x > 0) {
this.x -= 25;
}
if (allowedKeys === 'right' && this.x < 400) {
this.x += 25;
}
}
Or just outright avoid calling the handleInput(...) function in the event handler:
document.addEventListener('keydown', function(e) {
let allowedKeys = {
37: 'left',
38: 'up',
39: 'right',
40: 'down'
};
// notice that we only want to call the handleInput function
// when the player is alive, hence !isDead
if (!isDead) {
player.handleInput(allowedKeys[e.keyCode]);
}
});
And when you restart the game, set the flag to its default value:
function playAgain() {
modal.classList.remove('modal-visible');
isDead = false;
lives = 3;
sidebarLives.innerHTML = lives;
score = 0;
sidebarScore.innerHTML = score;
}
Note
Since you're developing a game, even when it's just a simple game, I strongly recommend you to manage your game behavior using game states.

you can try a few different approaches to a problem if one does not work.
Say you have a Boolean variable that is true when the modal is open and false when it is closed. this would work
keyCode = modalIsOpen || e.keyCode
if the modal is open the keycode would be set as true rather than a number.
this way is unorthodox but it works.

Code a jump like in the game 'Winterbells'

How would one go about coding a jump like in this game? I've got some working code already (made in Adobe Edge) but the way it's programmed it won't start another jump while mid-air. This is what I've got atm:
var velocityY = 0;
var gravity = 0.5;
var onGround = false;
var fps = 60;
function StartJump()
{
if(onGround)
{
velocityY = -13.0;
onGround = false;
}
}
function EndJump()
{
if(velocityY < -6,0)
velocityY = -6,0;
}
var positionY = sym.$("ball").position().left;
Loop();
function Loop()
{
Update();
setTimeout(Loop, 1000/fps);
}
function Update()
{
velocityY += gravity;
positionY += velocityY;
if(positionY > 730)
{
positionY = 730;
velocityY = 0;
onGround = true;
}
sym.$("ball").css("top", positionY + "px");
console.log(velocityY);
}
The top value 730 is where "ball" starts on the ground. StartJump() is called on the event 'mousedown' and EndJump() on 'mouseup'. I can't figure out how to change the code so I can make it jump while mid-air (as in when it collides with sth, like how in the game the bunny hits the bell).

Trouble with logical operators in JS

I'm trying to write a simple 2D platform game and I can't get my player object to double jump - or rather, I can't get him NOT to. When the up arrow or spacebar is pressed once, double jump is triggered no matter what. I am a JS newbie so I assume this has something to do with my use of logical operators, but I could be wrong. Here is the code:
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
width = 500,
height = 200,
player = {
x : width/2,
y : height - 5,
width : 5,
height : 5,
speed : 3,
velX : 0,
velY : 0,
jumping : false,
jumping_twice : false
};
keys = [],
friction = 0.8,
gravity = 0.3;
canvas.width = width;
canvas.height = height;
function update(){
if (keys[38] || keys[32]) {
// up arrow or space
if (!player.jumping) {
player.jumping = true;
player.velY = -player.speed*2;
console.log("Player is jumping");
}
else if (!player.jumping_twice) {
player.jumping_twice = true;
player.velY = -player.speed;
console.log("Player is jumping twice");
}
}
if (keys[39]) {
// right arrow
if (player.velX < player.speed) {
player.velX++;
}
}
if (keys[37]) {
// left arrow
if (player.velX > -player.speed) {
player.velX--;
}
}
player.velX *= friction;
player.velY += gravity;
player.x += player.velX;
player.y += player.velY;
if (player.x >= width-player.width) {
player.x = width-player.width;
} else if (player.x <= 0) {
player.x = 0;
}
if (player.y >= height-player.height) {
player.y = height - player.height;
player.jumping = false;
player.jumping_twice = false;
}
ctx.clearRect(0,0,width,height);
ctx.fillStyle = "red";
ctx.fillRect(player.x, player.y, player.width, player.height);
requestAnimationFrame(update);
}
window.addEventListener("load", function(){
update();
})
document.body.addEventListener("keydown", function(e) {
keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function(e) {
keys[e.keyCode] = false;
});

#rhino is totally right about the explanation. I have another solution though. After the jump has been processed, reset the information about the jump key being pressed:
keys[32] = keys[38] = false;
requestAnimationFrame(update);

This happens because update() runs multiple times while the jump key is held down; both conditions are met, one after the other, before you release the key. You could do the check and make the character jump in the keydown handler to work around that, but it is a better idea to keep the changes of your character in the main loop (update() in your case). To do so, you need an extra variable which determines whether the player can actually jump, based on the changes of key state - when the key gets released, the player can jump again or perform a double jump. You could give player a new property called, for example, can_jump and initially set it to true. Then you can do as follows:
if (keys[38] || keys[32]) {
// up arrow or space
if (player.can_jump) {
if (!player.jumping) {
player.jumping = true;
player.velY = -player.speed*2;
player.can_jump = false; // the player can't jump anymore until the key is released
console.log("Player is jumping");
}
else if (!player.jumping_twice) {
player.jumping_twice = true;
player.velY = -player.speed;
console.log("Player is jumping twice");
}
}
And in the keyup handler:
if (e.keyCode == 32 || e.keyCode == 38) player.can_jump = true;
Working demo: http://jsfiddle.net/5JF69/
Also, be aware that the speed of your game depends on how fast the browser performs a redraw, as you are updating your game logic using requestAnimationFrame().
EDIT: In case the state of the spacebar and up keys doesn't need to remain "down" at all times the keys are actually held down (which doesn't in your current code), go for #lordvlad's solution. It's definitely better if you don't perform any other checks on those keys.

Hah I'm actually the author of the tutorial code you're using.
All the answers are good answers, this is how I would personally do it.
if (keys[38] || keys[32]) {
// up arrow or space
if (!player.jumping) {
player.jumping = true;
player.velY = -player.speed*2;
console.log("Player is jumping");
}
else if(player.jumping && !player.jumping_twice) {
player.jumping_twice = true;
player.velY = -player.speed;
console.log("Player is jumping twice");
}
keys[38] = keys[32] = false;
}
I would just set the keys to false if they are true in the check itself.
#lordvlad makes a good point, there should be an update cycle separate from the rendering, however for the purpose of the tutorial it was really just to get the user up and running to get something on the screen. At some point I'll make a part 3 to break the logic out a bit more. Anyway hope this helps.
Live Demo

gravity inside html5 canvas

I'm trying to do a copy of the original super mario game using html5 canvas just for fun and to learn more about the canvas tool and it's animation but i am stuck at making Mario do it's jump here is my jsfiddle : http://jsfiddle.net/2tLCk/1/
how should i fix my up function to make mario jump and return back to the ground like in this website http://blog.nihilogic.dk/ i tried to understand it's code but i couldn't ?
if (keydown.up) {
vy += gravity;
character.CurentPos = 11;
character.x += character.speed;
character.y += vy;
}

Here's a jumping Mario http://jsfiddle.net/2tLCk/22/.
If jumping is 1 - going up. If jumping is 2 - going down.
if(jumping){
if(jumping == 1) {
if(character.y > 140) character.y -= gravity;
else jumping = 2;
} else if(jumping == 2) {
if(character.y < 184) character.y += gravity;
else{
character.y = 184;
jumping = false;
character.CurentPos = 6;
}
}
}else if(keydown.up) {
jumping = 1;
character.CurentPos = 11;
}
And you would probably want to use this https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame instead of setInterval().

You basically want the gravitiy to be always active, not only when pushing the down key.
When jumping (key up) you have to add to vy. Like this:
if(keydown.up) {
vy += -2;
}
vy += gravity;
if(character.y > 184) { // simple collision detection for ground floor
vy = 0;
character.y = 184;
}
//character.CurentPos = 11;
//character.x += character.speed;
character.y += vy;
see http://jsfiddle.net/pjQb3/

I would do something like this:
// Global forces
character.vy += gravity;
// User input
if (keydown.up) {
character.vy += -2;
}
// Final location
if (character.y + character.vy >= 184) {
// Update player location.
character.y += character.vy;
} else {
// Player was about to move past ground so place player directly on ground
// and reset velocity.
character.y = 184;
character.vy = 0;
}

Canvas collision JavaScript

I cannot figure out why my collision function is working for one element and not for another.It's madness ,please help.It detects the food collision but it doesn't detect when the head of the snake hits it's other elements.
window.onload= function ()
{
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var canvasWidth=window.innerWidth-20;
var canvasHeight=window.innerHeight-20;
canvas.width=canvasWidth;
canvas.height=canvasHeight;
var up=false;
var down=false;
var left=false;
var right=true;
var snake={
x:20,
y:0,
w:10,
h:10
};
var snakeBody=[];
for (i = 0; i < 20; i++) {
snakeBody.push({
x:snake.x ,
y:snake.y ,
w:snake.w,
h:snake.h
});
snake.x +=20;
}
var food={
x:Math.floor(Math.random() * (canvasWidth-50)),
y:Math.floor(Math.random() * (canvasHeight-50)),
w:10,
h:10
};
function moveUp()
{
snakeBody[0].y -=3;
}
function moveDown()
{
snakeBody[0].y +=3;
}
function moveLeft()
{
snakeBody[0].x -=3;
}
function moveRight()
{
snakeBody[0].x +=3;
}
function draw()
{
context.clearRect(0,0,canvasWidth,canvasHeight);
context.fillStyle="black";
context.beginPath();
for (var i = snakeBody.length - 1; i > 0 ; i--) {
context.rect(snakeBody[i].x,snakeBody[i].y,snakeBody[i].w,snakeBody[i].h);
snakeBody[i].x = snakeBody[i-1].x;
snakeBody[i].y = snakeBody[i-1].y;
}
context.rect(snakeBody[0].x,snakeBody[0].y,snakeBody[0].w,snakeBody[0].h);
context.rect(food.x,food.y,food.w,food.h);
context.stroke();
context.fill();
for (var i = 1; i < snakeBody.length; i++) {
if (intersects(food.x,food.y,food.w,food.h,snakeBody[i].x,snakeBody[i].y,snakeBody[i].w,snakeBody[i].h)) {
generateFood();
growSnake();
}
var head=snakeBody[0];
if (intersects(head.x,head.y,head.w,head.h,
snakeBody[i].x,snakeBody[i].y,snakeBody[i].w,snakeBody[i].h)) {
alert('game over');
}
}
directions();
collision();
update();
}
function growSnake()
{
for (i = 0; i < 5; i++) {
snakeBody.push({
x:snake.x ,
y:snake.y ,
w:snake.w,
h:snake.h
});
snake.x +=20;
}
}
function generateFood()
{
food.x=Math.floor(Math.random() * (canvasWidth-50));
food.y=Math.floor(Math.random() * (canvasHeight-50));
}
function intersects(x1, y1, w1, h1, x2, y2, w2, h2) {
w2 += x2;
w1 += x1;
if (x2 > w1 || x1 > w2) return false;
h2 += y2;
h1 += y1;
if (y2 > h1 || y1 > h2) return false;
return true;
}
function directions()
{
document.onkeydown = function(e)
{
var event = window.event ? window.event : e;
var keycode = event.keyCode;
if (keycode===37 && right===false) {
left=true;
right=false;
up=false;
down=false;
}
if (keycode===38 && down===false) {
up=true;
down=false;
left=false;
right=false;
}
if (keycode===39 && left===false) {
right=true;
left=false;
up=false;
down=false;
}
if (keycode===40 && up===false) {
down=true;
up=false;
left=false;
right=false;
}
};
}
function update()
{
if (up) {moveUp();}
if (down) {moveDown();}
if (left) {moveLeft();}
if (right) {moveRight();}
}
function gameOver()
{
alert('game over!');
}
function collision()
{
if (snakeBody[0].x >canvasWidth) {
snakeBody[0].x = 0;
}
if (snakeBody[0].x < 0) {
snakeBody[0].x=canvasWidth;
}
if (snakeBody[0].y>canvasHeight) {
snakeBody[0].y=0;
}
if (snakeBody[0].y <0) {
snakeBody[0].y=canvasHeight;
}
}
setInterval(draw,20);
};
It's a lot of code, so here's a fiddle http://jsfiddle.net/5nLQG/
Focus would seem to be function intersects:
function intersects(x1, y1, w1, h1, x2, y2, w2, h2) {
w2 += x2;
w1 += x1;
if (x2 > w1 || x1 > w2) return false;
h2 += y2;
h1 += y1;
if (y2 > h1 || y1 > h2) return false;
return true;
}

Yep. Check it out. Game over is being hit. Repeatedly. Because your blocks are all scrunched up it's difficult to do collision detection in the first place. In fact only checking after the 20th cube was I able to have a functional game. Check it out
if (i - 20 > 0&& intersects(snakeBody[0].x,snakeBody[0].y,snakeBody[0].w,snakeBody[0].h,
snakeBody[i].x,snakeBody[i].y,snakeBody[i].w,snakeBody[i].h)) {
clearInterval(pulse);
}
Where I declare pulse the timeInterval ID
http://jsfiddle.net/fC25X/
I would work on spacing your cubes and you should be golden
What to do?
I think there's a great joy in figuring out these simple games for yourself. For instance minesweeper if not done properly can give massive stackoverflows. I've written a snake game before and I will quickly explain how I managed cubes following each other. Your way seems like it could work with a bit of playing around, so only read further if you don't care about figuring out the process yourself. My way is probably not best either.
Actually pretty terrible
I remember my particular implementation of snake I kept a separate array called 'turningPoints' and on keypress it looked something like this:
document.onkeydown = function(e)
{
var event = window.event ? window.event : e;
var keycode = event.keyCode;
if (keycode===37 && right===false) {
left=true;
right=false;
up=false;
down=false;
turningPoints.push(snake[0].x,snake[0].y,[1,0]); // [1,0] matrix for right
}
}
Then when iterating over each cube (this is where it gets messier) I moved each cube in the direction it was going, and then checked to see if it had reached a turningPoint (with some margin of error), if it had then it would change direction:
if(snake[i].x == turningPoint[j].x && snake[i].y == turningPoint[j].y)
snake[i].direction = turningPoint[j].direction;
I made sure to clean up turningPoints (after all the cubes have followed the instruction there's no need to keep the point), and the whole thing worked OK
BUT
I got bored, and played around with your way a bit more and came up with this http://jsfiddle.net/LAMZt/ It's quiet a bit different, but it's more or less the same. Noticed another issue was that you snake's head was the left most piece going right, so naturally, it collided with the other pieces. So I fixed it by rendering additional pieces as the snake moved. The rest was just house keeping so I could save it as a gist (referenced this question of course).