Develop Reference

Why the code doesn't work when the snake eats the apple?

Good afternoon everyone. I was making my own snake game. And when I implemented the snake eating function, I ran into a problem (The function that should start while the snake is eating the apple doesn't work.)
I tried to equate the positions of the apple to the size of the block. And the function should return me an alert when the snake has eaten the apple.
var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
var box = 10;
//Snake
var snake = [];
var px = canvas.width / 2;
var py = canvas.height / 2;
var dir = "right";
var maxCell = 10;
var can = canvas.getBoundingClientRect();
//Apple
var ax = Math.floor(Math.random() * ~~(canvas.width / box));
var ay = Math.floor(Math.random() * ~~(canvas.height / box));
document.addEventListener("keydown", function(e) {
if (e.keyCode === 37 && dir !== "right") {
dir = "left";
//console.log('left')
} else if (e.keyCode === 38 && dir !== "down") {
dir = "up";
//console.log('up')
} else if (e.keyCode === 39 && dir !== "left") {
dir = "right";
//console.log('right')
} else if (e.keyCode === 40 && dir !== "up") {
dir = "down";
//console.log('down')
}
});
function direction() {
if (dir == "right") {
px += box;
} else if (dir == "left") {
px -= box;
} else if (dir == "up") {
py -= box;
} else if (dir == "down") {
py += box;
}
}
//Closure )))
function Elems() {
//! Spawn apple
function Apple() {
ctx.fillStyle = "green";
ctx.fillRect(ax, ay, box, box);
}
//! Spawn snake
function Snake() {
direction();
var head = {
x: px,
y: py,
};
snake.unshift(head);
if (snake.length < maxCell) {
snake.push({
x: px,
y: py
});
}
if (px >= canvas.width) {
px = 0;
} else if (px < 0) {
px = canvas.width;
}
if (py >= canvas.height) {
py = 0;
} else if (py < 0) {
py = canvas.height;
}
snake.forEach(function(elem, index) {
ctx.fillStyle = `red`;
ctx.fillRect(elem.x, elem.y, box, box);
});
//BROKEN CODE
if (head.x == ax && head.y == ay) {
alert("HI");
}
snake.pop();
}
Snake();
Apple();
}
function loop() {
setInterval(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
Elems();
}, 2000 / 30);
}
loop();
canvas {
border: 1px solid #000;
background-color: #000;
}
<canvas id="game" width="450" height="450"></canvas>

You are checking for equality:
if (head.x == ax && head.y == ay) {
alert("HI");
}
You must check for overlap. Apple is not a point, it is an area. You need to check whether the two areas overlap or not.
(The area of apple and the area of the head of the snake)
The question is that you have two rectangles, and Do they overlap?
The second solution: you can set the position of apple in a way that your current code can work. Currently you are spawning apples on canvas randomly, if you can fix this, your current code might work.
Basically, you will ensure that the corner of the apple, and the corner of the head will be equal when the snake eats the apple. if you can fix the apple spawning code, it might work.

You need to calculate your grid if you box is 10x10 . In your case you have 450 x 450px canvas you divide that by 10 and the grid will be 45x45
Use grid.x and grid.y (those are your max values in you grid) to place the snake and generate an apple coords.
That way you need to check only top left coords and not if rectangles overlap
var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
var box = 10;
//calculate your grid
var grid = {
x: Math.floor(canvas.width / box),
y: Math.floor(canvas.height / box)
};
var snake = [];
//use grid to center the snake
var px = Math.floor(grid.x / 2) * box;
var py = Math.floor(grid.y / 2) * box;
var dir = "right";
var maxCell = 10;
var can = canvas.getBoundingClientRect();
//Apple
//use your grid to spawn an apple
var ax = Math.floor(Math.random() * grid.x) * box;
var ay = Math.floor(Math.random() * grid.y) * box;
document.addEventListener("keydown", function(e) {
if (e.keyCode === 37 && dir !== "right") {
dir = "left";
//console.log('left')
} else if (e.keyCode === 38 && dir !== "down") {
dir = "up";
//console.log('up')
} else if (e.keyCode === 39 && dir !== "left") {
dir = "right";
//console.log('right')
} else if (e.keyCode === 40 && dir !== "up") {
dir = "down";
//console.log('down')
}
});
function direction() {
if (dir == "right") {
px += box;
} else if (dir == "left") {
px -= box;
} else if (dir == "up") {
py -= box;
} else if (dir == "down") {
py += box;
}
}
//Closure )))
function Elems() {
//! Spawn apple
function Apple() {
ctx.fillStyle = "green";
ctx.fillRect(ax, ay, box, box);
}
//! Spawn snake
function Snake() {
direction();
var head = {
x: px,
y: py,
};
snake.unshift(head);
if (snake.length < maxCell) {
snake.push({
x: px,
y: py
});
}
if (px >= canvas.width) {
px = 0;
} else if (px < 0) {
px = canvas.width;
}
if (py >= canvas.height) {
py = 0;
} else if (py < 0) {
py = canvas.height;
}
snake.forEach(function(elem, index) {
ctx.fillStyle = `red`;
ctx.fillRect(elem.x, elem.y, box, box);
});
//BROKEN CODE
if (head.x == ax && head.y == ay) {
alert("HI");
}
snake.pop();
}
Snake();
Apple();
}
function loop() {
setInterval(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
Elems();
}, 2000 / 30);
}
loop();
canvas {
border: 1px solid #000;
background-color: #000;
}
<canvas id="game" width="450" height="450"></canvas>

Javascript snake game bugs

There are two issues, I can't control the snake, and now it just resets constantly without giving the snake a chance to move. I figured that if i kept coding the problem would go away but sadly its not a perfect world.
I tried different key codes for controlling the snake but it didn't work.
window.onload = function() {
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
var cvsW = cvs.width;
var cvsH = cvs.height;
var snekW = 10;
var snekH = 10;
//score
var score = 0;
//default direction
var direction = "right";
//read users directions
document.addEventListener("keydown",getDirection);
//To my knowledge this function should control the snake with the
keyboard
function getDirection(e)
{
if(e.keyCode == 37 && direction != "right"){
direction = "left";
}else if(e.keyCode == 38 && direction != "down"){
direction = "up";
}else if(e.keyCode == 39 && direction != "left"){
direction = "right";
}else if(e.keycode == 40 && direction != "up"){
direction = "down";
}
}
function drawSnek(x,y)
{
ctx.fillStyle = "Lime";
ctx.fillRect(x*snekW,y*snekH,snekW,snekH);
ctx.fillStyle = "#000";
ctx.strokeRect(x*snekW,y*snekH,snekW,snekH);
}
var len = 4; //default length of the snake
var snek = []; //the snake is an array
for(var i = len-1; i>=0; i--)
{
snek.push({x:i,y:0});
}
//exceptions for direction of snake
if(direction == "left") snekx--;
else if( direction == "up") sneky--;
else if( direction == "right") snekx++;
else if( direction == "down") sneky++;
//Functions for creating snake food have been removed.
var newHead = { x: snekx, y: sneky};
snek.unshift(newHead);
drawScore(score);
}
setInterval(draw, 10); //I do not fully understand this function
}

There were several issues with your code:
You needed a draw function that could be called in an interval. In this draw function you could draw the individual parts of the snake.
You were unable to control the snake correctly as you had a typo in the down part of the callback function.
You have to either introduce x / y variables for the head of the snake or use the first element of the array to retrieve it.
Unshifting the new position using snek.unshift will cause the snake to grow indefinitely. Removing array elements using
snek.splice(len,snek.length - len);
solves this problem.
If you only draw new elements to the screen the old parts you drew will still exist in new frames. A good idea would be to clear the canvas using
ctx.clearRect(0, 0, cvsW, cvsH);
window.onload = function () {
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
var cvsW = cvs.width;
var cvsH = cvs.height;
var snekW = 10;
var snekH = 10;
//score
var score = 0;
//default direction
var direction = "right";
//read users directions
document.addEventListener("keydown", getDirection);
//To my knowledge this function should control the snake with the keyboard
function getDirection(e) {
if (e.keyCode == 37 && direction != "right") {
direction = "left";
} else if (e.keyCode == 38 && direction != "down") {
direction = "up";
} else if (e.keyCode == 39 && direction != "left") {
direction = "right";
} else if (e.keyCode == 40 && direction != "up") {
direction = "down";
}
}
function drawSnek(x, y) {
ctx.fillStyle = "Lime";
ctx.fillRect(x * snekW, y * snekH, snekW, snekH);
ctx.fillStyle = "#000";
ctx.strokeRect(x * snekW, y * snekH, snekW, snekH);
}
let snekx = 0;
let sneky = 0;
var len = 4; //default length of the snake
var snek = []; //the snake is an array
for (var i = len - 1; i >= 0; i--) {
snek.push({ x: i, y: 0 });
}
function draw() {
ctx.clearRect(0, 0, cvsW, cvsH);
//exceptions for direction of snake
if (direction == "left") snekx--;
else if (direction == "up") sneky--;
else if (direction == "right") snekx++;
else if (direction == "down") sneky++;
//Functions for creating snake food have been removed.
var newHead = { x: snekx, y: sneky };
snek.unshift(newHead);
for(let i = 0; i < snek.length; i++) {
drawSnek(snek[i].x, snek[i].y)
}
snek.splice(len,snek.length - len);
//drawScore(score);
}
setInterval(draw, 50); //I do not fully understand this function
}
CodePen with fixed code:
https://codepen.io/lukasmoeller/pen/PvVzqq?editors=1111
(boundaries are not checked - the snake will leave the canvas)
Explanation of setInterval(fn, interval)
setInterval calls the function specified using fn every interval ms until it is cleared. The interval can be cleared by using clearInterval, passing it the return value of setInterval. If you want to delay function execution at the beginning you could add setTimeout, add a callback that sets the interval:
setTimeout(function(){
setInterval(draw, 50);
}, 1000)
This would only start drawing the game every 50 ms after 1000ms have passed.

snake can't move on the very edge of the canvas in my JS snake game

Hey guys I'm making a snake game in JS. The original problem i was working on was trying to get the game to stop running by using clearInterval(game); once the snake head makes contact with the edge of the canvas. Once I figured that out it created a new problem. You can't ride the snake on the edge of the canvas. This is a problem because the food will generate on the edge sometimes. Any ideas, I'm stumped. Thanks:)
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
//set canvas dimension equal to css dimension
canvas.width = 768;
canvas.height = 512;
//now put those dimensions into variables
const cvsW = canvas.width;
const cvsH = canvas.height;
//create snake unit
const unit = 16;
//create snake array
let snake = [{x: cvsW/2, y: cvsH/2}];
//delcare global variable to hold users direction
let direction;
//create food object
let food = {
x : Math.floor(Math.random()*((cvsW/unit)-1)+1)*unit,
y : Math.floor(Math.random()*((cvsH/unit)-1)+1)*unit
}
//read user's direction
document.addEventListener('keydown', changeDirection);
function changeDirection(e) {
//set direction
if (e.keyCode == 37 && direction != 'right') direction = 'left';
else if (e.keyCode == 38 && direction != 'down') direction = 'up';
else if (e.keyCode == 39 && direction != 'left') direction = 'right';
else if (e.keyCode == 40 && direction != 'up') direction = 'down';
}
function draw() {
//refresh canvas
ctx.clearRect(0, 0, cvsW, cvsH);
//draw snake
for(let i = 0; i < snake.length; i++) {
ctx.fillStyle = 'limegreen';
ctx.fillRect(snake[i].x, snake[i].y, unit, unit);
}
//grab head position
let headX = snake[0].x;
let headY = snake[0].y;
//check if snake hit wall
if(headX <= 0 || headY <= 0 || headX >= (cvsW-unit) || headY >= (cvsH-unit)) {
clearInterval(runGame);
}
//posistion food on board
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, unit, unit);
//send the snake in chosen direction
if(direction == 'left') headX -= unit;
else if(direction == 'up') headY -= unit;
else if(direction == 'right') headX += unit;
else if(direction == 'down') headY += unit;
//create new head
let newHead = {x: headX, y: headY}
if(headX == food.x && headY == food.y) {
//create new food position
food = {
x : Math.floor(Math.random()*((cvsW/unit)-1)+1)*unit,
y : Math.floor(Math.random()*((cvsH/unit)-1)+1)*unit
}
//add 3 units to the snake
snake.unshift(newHead);
snake.unshift(newHead);
snake.unshift(newHead);
}
else {
//remove tail
snake.pop();
}
//add head to snake
snake.unshift(newHead);
}
//run game engine
let runGame = setInterval(draw, 70);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake Game</title>
<style>
body {
background-color: #333;
}
canvas {
background-color: #4d4d4d;
margin: auto;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 750px;
height: 500px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>

snake can't ride on edge of canvas in my JS game?

Hey guys I wrote a condition that would check the position of the snakes head to see if it hit the edge of the canvas. If this happens i wan't to stop the interval that the games running on. here's the code //check if snake hit wall
if(headX <= 0 || headY <= 0 || headX >= (cvsW-unit) || headY >= (cvsH-unit)) {
alert(headX);
clearInterval(runGame);
}
but sense the edge of the canvas has the x any y position of 0 this means if a food generates on the edge of the canvas the snake is unable to go there without the game stopping. And if you lower the values below 0 the snake head will now be able to go outside of the canvas. I don't know how to get around this plz help.
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
//set canvas dimension equal to css dimension
canvas.width = 768;
canvas.height = 512;
//now put those dimensions into variables
const cvsW = canvas.width;
const cvsH = canvas.height;
//create snake unit
const unit = 16;
//create snake array
let snake = [{x: cvsW/2, y: cvsH/2}];
//delcare global variable to hold users direction
let direction;
//create food object
let food = {
x : Math.floor(Math.random()*((cvsW/unit)-1)+1)*unit,
y : Math.floor(Math.random()*((cvsH/unit)-1)+1)*unit
}
//read user's direction
document.addEventListener('keydown', changeDirection);
function changeDirection(e) {
//set direction
if (e.keyCode == 37 && direction != 'right') direction = 'left';
else if (e.keyCode == 38 && direction != 'down') direction = 'up';
else if (e.keyCode == 39 && direction != 'left') direction = 'right';
else if (e.keyCode == 40 && direction != 'up') direction = 'down';
}
function draw() {
//refresh canvas
ctx.clearRect(0, 0, cvsW, cvsH);
//draw snake
for(let i = 0; i < snake.length; i++) {
ctx.fillStyle = 'limegreen';
ctx.fillRect(snake[i].x, snake[i].y, unit, unit);
}
//grab head position
let headX = snake[0].x;
let headY = snake[0].y;
//check if snake hit wall
if(headX <= 0 || headY <= 0 || headX >= (cvsW-unit) || headY >= (cvsH-unit)) {
alert(headX);
clearInterval(runGame);
}
//posistion food on board
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, unit, unit);
//send the snake in chosen direction
if(direction == 'left') headX -= unit;
else if(direction == 'up') headY -= unit;
else if(direction == 'right') headX += unit;
else if(direction == 'down') headY += unit;
//create new head
let newHead = {x: headX, y: headY}
if(headX == food.x && headY == food.y) {
//create new food position
food = {
x : Math.floor(Math.random()*((cvsW/unit)-1)+1)*unit,
y : Math.floor(Math.random()*((cvsH/unit)-1)+1)*unit
}
//add 3 units to the snake
snake.unshift(newHead);
snake.unshift(newHead);
snake.unshift(newHead);
}
else {
//remove tail
snake.pop();
}
//add head to snake
snake.unshift(newHead);
}
//run game engine
let runGame = setInterval(draw, 70);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake Game</title>
<style>
body {
background-color: #333;
}
canvas {
background-color: #4d4d4d;
margin: auto;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 750px;
height: 500px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>

From what I understand, you have a 48x32 grid whose spaces are 16px squares. The algorithm you use to generate your food's position on the grid:
let food = {
x : Math.floor(Math.random()*((cvsW/unit)-1)+1)*unit, // Chooses 1-47
y : Math.floor(Math.random()*((cvsH/unit)-1)+1)*unit // Chooses 1-31
}
chooses a value between 1 and 47 for x, and 1 and 31 for y. Well, the problem with that is that position 47 for x and position 31 for y are both on the edge of the grid (this is because the first x/y position is 0, not 1). To eliminate those spaces as choices, the algorithm simply needs to subtract 2 instead of 1 from the number of spaces on the grid (which is cvsW or cvsH divided by unit):
let food = {
x : Math.floor(Math.random()*((cvsW/unit)-2)+1)*unit, // Chooses 1-46
y : Math.floor(Math.random()*((cvsH/unit)-2)+1)*unit // Chooses 1-30
}
Basically, subtracting 1 only eliminated the last column/row as a choice for the x/y position, and then adding 1 shifted everything over to the right. Like this (for x):
The new algorithm does this, initially eliminating the last two choices then shifting over 1:

snake game - snake movement using array.pop and array.unshift

In my code the snake and it's movement consists of an array. In other words the snake's head is the first array number and last number is snake's tail. I try to implement the movement using array.pop and array.unshift. The problem is that the snake gets bigger and bigger as it moves. I think it is some very small detail that I'm missing. Here is the code:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cWidth = canvas.width;
var cHeight = canvas.height;
var boxWidth = 10;
var boxHeight = 10;
var boxWH = 10; //One box width and height
var points = 0;
var score = document.getElementById("Score");
var foodImg = new Image();
var k;
foodImg.src = "Pictures/apple2.png";
var snake = [];
snake[0] = {
x: cWidth/2,
y: cHeight/2
};
var food = {
x: Math.floor(Math.random()*60)*boxWH,
y: Math.floor(Math.random()*60)*boxWH
}
document.addEventListener("keydown", direction);
function direction(event){
var key = event.keyCode;
if(key == 65 && k != "right"){
k = "left";
}
else if(key == 68 && k != "left"){
k = "right";
}
else if(key == 87 && k != "down"){
k = "up";
}
else if(key == 83 && k != "up"){
k = "down";
}
}
function SnakeGame(){
ctx.fillStyle = "green";
ctx.fillRect(0, 0, cWidth, cHeight);
var game = setInterval(Draw, 100);
}
function Draw(){
for(var i = 0; i<snake.length; i++){
ctx.fillStyle = (i == 0) ? "red" : "white";
ctx.fillRect(snake[i].x, snake[i].y, boxWH, boxWH);
ctx.strokeStyle = "yellow";
ctx.strokeRect(snake[i].x, snake[i].y, boxWH, boxWH);
}
ctx.drawImage(foodImg, food.x, food.y);
var snakeX = snake[0].x;
var snakeY = snake[0].y;
snake.pop();
if(k == "right") snakeX += boxWH;
if(k == "left") snakeX -= boxWH;
if(k == "up") snakeY -= boxWH;
if(k == "down") snakeY += boxWH;
var nHead = {
x: snakeX,
y: snakeY
}
snake.unshift(nHead);
}

the problem is that the sanke gets bigger and bigger as it moves
The snake has the correct size, what happens is that it is leaving a "trail". To avoid that, you need to clear the canvas each Draw call.
Just move the command to fill the canvas from the SnakeGame function to the beginning of Draw, like this:
function SnakeGame(){
var game = setInterval(Draw, 100);
}
function Draw(){
ctx.fillStyle = "green";
ctx.fillRect(0, 0, cWidth, cHeight);
for(var i = 0; i<snake.length; i++){
ctx.fillStyle = (i == 0) ? "red" : "white";
ctx.fillRect(snake[i].x, snake[i].y, boxWH, boxWH);
//(...)

The problem has to do with the fact that you draw the snake onto the canvas without resetting it every time. The new snake tiles are drawn, but the old ones are also still there.
You can fix it by moving these lines to the beginning of the Draw function, so they are executed every time you are about to redraw the snake:
ctx.fillStyle = "green";
ctx.fillRect(0, 0, cWidth, cHeight);