Question

Hey guys, there's a project I've been working on for a Create Task on code.org, and I've been having a few problems with it. This is the code, and I seriously need help FAST, because this is due today at 11:59 PM 😅

Answer 1

```javascript
window.onload = function() {
var canvas = document.getElementById('snakeCanvas');
var ctx = canvas.getContext('2d');

var snakeSize = 20;
var snake = [
{ x: 40, y: 40 },
{ x: 60, y: 40 }
];
var direction = 'right';

var food = {
x: Math.floor(Math.random() * canvas.width / snakeSize) * snakeSize,
y: Math.floor(Math.random() * canvas.height / snakeSize) * snakeSize
};

function drawSnake() {
ctx.fillStyle = 'green';
snake.forEach(function(segment) {
ctx.fillRect(segment.x, segment.y, snakeSize, snakeSize);
});
}

function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
}

function checkCollision() {
if (snake[0].x < 0 || snake[0].x >= canvas.width || snake[0].y < 0 || snake[0].y >= canvas.height) {
return true;
}

for (var i = 1; i < snake.length ; i++) {
if (snake.x === snake[0].x && snake.y === snake[0].y) { return true; } } return false; } function update() { var head = { x: snake[0].x, y: snake[0].y }; if (direction === 'up') head.y -= snakeSize; if (direction === 'down') head.y += snakeSize; if (direction === 'left') head.x -= snakeSize; if (direction === 'right') head.x += snakeSize; snake.unshift(head); if (head.x === food.x && head.y === food.y) { food.x = Math.floor(Math.random() * canvas.width / snakeSize) * snakeSize; food.y = Math.floor(Math.random() * canvas.height / snakeSize) * snakeSize; } else { snake.pop(); } if (checkCollision()) { alert('Game over!'); window.location.reload(); } } function loop() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawSnake(); drawFood(); update(); setTimeout(function() { loop(); }, 100); } document.addEventListener('keydown', function(event) { if (event.key === 'ArrowUp' && direction !== 'down') { direction = 'up'; } if (event.key === 'ArrowDown' && direction !== 'up') { direction = 'down'; } if (event.key === 'ArrowLeft' && direction !== 'right') { direction = 'left'; } if (event.key === 'ArrowRight' && direction !== 'left') { direction = 'right'; } }); loop(); }; ```

Answer 2

I'm sorry toxy, but I have absolutely no clue man..

Answer 3

@extrinix

Answer 4

Idk, Jay or ext can probably help you though. @Jaynator495 @extentrix

Answer 5

@ultrilliam

Answer 6

i failed u as ur apprentice (i take coding) but sorry i havent got this advanced at coding just yet

Answer 7

It would be best if you also state the problem you are facing and what kind of help you need?

Answer 8

test the code and let me see what's going on.

Answer 9

Try plugging it into mine and see if it works, https://coyote-code-editor.rf.gd

Answer 10

Well it's not running because you don't have an html interface to show it on.

Answer 11

Add this to your HTML file, then try again.
```
<canvas id="snakeCanvas"></canvas>
```

Answer 12

Oh...

Answer 13

I FOUND THE PROBLEM!

Answer 14

It's the checkCollision function. In the loop where you're checking for collisions with the snake itself, you're comparing snake.x and snake.y, which aren't properties of the snake array. You should be comparing snake.x and snake.y.

Answer 15

try adding a border around your game too, so the player knows the bounds...

Answer 16

Here's your code (fixed):
```
window.onload = function() {
var canvas = document.getElementById('snakeCanvas');
var ctx = canvas.getContext('2d');

var snakeSize = 20;
var snake = [
{ x: 40, y: 40 },
{ x: 60, y: 40 }
];
var direction = 'right';

var food = {
x: Math.floor(Math.random() * (canvas.width / snakeSize)) * snakeSize,
y: Math.floor(Math.random() * (canvas.height / snakeSize)) * snakeSize
};

function drawSnake() {
ctx.fillStyle = 'green';
snake.forEach(function(segment) {
ctx.fillRect(segment.x, segment.y, snakeSize, snakeSize);
});
}

function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
}

function checkCollision() {
if (snake[0].x < 0 || snake[0].x >= canvas.width || snake[0].y < 0 || snake[0].y >= canvas.height) {
return true;
}

for (var i = 1; i < snake.length ; i++) {
if (snake.x === snake[0].x && snake.y === snake[0].y) {
return true;
}
}

return false;
}

function update() {
var head = { x: snake[0].x, y: snake[0].y };

if (direction === 'up') head.y -= snakeSize;
if (direction === 'down') head.y += snakeSize;
if (direction === 'left') head.x -= snakeSize;
if (direction === 'right') head.x += snakeSize;

snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
food.x = Math.floor(Math.random() * (canvas.width / snakeSize)) * snakeSize;
food.y = Math.floor(Math.random() * (canvas.height / snakeSize)) * snakeSize;
} else {
snake.pop();
}

if (checkCollision()) {
alert('Game over!');
window.location.reload();
}
}

function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSnake();
drawFood();
update();
setTimeout(function() {
loop();
}, 100);
}

document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowUp' && direction !== 'down') {
direction = 'up';
}
if (event.key === 'ArrowDown' && direction !== 'up') {
direction = 'down';
}
if (event.key === 'ArrowLeft' && direction !== 'right') {
direction = 'left';
}
if (event.key === 'ArrowRight' && direction !== 'left') {
direction = 'right';
}
});

loop();
};

Answer 17

Hope this helps! Tag me with @spectrum for more help. I'll try my best.

Answer 18

?

Answer 19

Please show me what you're seeing @Aratox.

Answer 20

I'm running it right now, the "Reset" button would just reset the editor (and nothing would change).

Answer 21

if you have no access to html frontend add this to your JavaScript window.onload function:
```
const createCanvas = document.createElement('canvas')
createCanvas.setAttribute('id', 'snakeCanvas')
```

Answer 22

If not you need to find a new editor that allows you to add HTML frontend...

Answer 23

so use var

Answer 24

or let

Answer 25

Is your code copy-pasted? Jay said it looked like it was. It could also be the program your using.

Answer 26

From DMs: