Drawing Rectangles With For Loops

Question

I don't understand why this isn't drawing, it might be a stupid mistake, although I have gone through all the code multiple times, but if it is, I apologize, I am trying to make the snake game and the snake won't draw. I wan't the array cells to keep track of where all of the cells are, and to do this you have to unshift and pop them accordingly.

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var unit = 16; var snakeone = { maxcells: 3, cellsx: [], cellsy: [], x: 20 * unit, y: 20 * unit, }; var apple = { x: 20 * unit, y: 20 * unit, }; var color = 'white'; function setup() { } function style() {} function clear() { ctx.clearRect(0, 0, 656, 656); } document.onkeydown = keydown; document.onkeyup = keyup; function keydown(e) { ctrl(e.code, true); } function keyup(e) { ctrl(e.code, false); } function ctrl(code, bool) { if(code == 37) { snakeone.a = bool; } if(code == 38) { snakeone.w = bool; } if(code == 39) { snakeone.d = bool; } if(code == 40) { snakeone.s = bool; } } function move() { if(snakeone.a === true) { snakeone.x -= 1; } if(snakeone.w === true) { snakeone.y -= 1; } if(snakeone.d === true) { snakeone.x += 1; } if(snakeone.s === true) { snakeone.y += 1; } } function shift() { if(snakeone.cellsx.length < snakeone.maxcells) { snakeone.cellsx.unshift(snakeone.x); snakeone.cellsy.unshift(snakeone.y); } } function draw() { for(i = 0; i < snakeone.maxcells; i++) { ctx.fillStyle = color; ctx.fillRect(snakeone.cellsx[i] + 1, snakeone.cellsy[i] + 1, unit - 2, unit - 2); } } function pop() { if(snakeone.cellsx.length > snakeone.maxcells) { snakeone.cellsx.pop(); snakeone.cellsy.pop(); } } function timer() { clear(); move(); shift(); draw(); pop(); } setup(); setInterval(timer, 150);

 body { background-color: black; text-align: center; } #canvas { border: 2px solid white; }

 <html> <head> <title> New Tab </title> <link href="snake.css" rel="stylesheet" type="text/css"> </head> <body> <canvas id="canvas"height="656" width="656"></canvas> <script src="snake.js"></script> </body> </html>

`

Answer 1

Here's a working version of the code. I've made a few changes and simplified things a bit, but it might be helpful to you.

 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var unit = 16; var color = "limegreen"; var snake = []; var snakeone = { x: 20 * unit, y: 20 * unit }; function clear() { ctx.clearRect(0, 0, 400, 400); } function keyup(e) { const code = e.keyCode; const lastSegment = snake[snake.length - 1]; if (code == 37) { // left arrow snake.push({ ...lastSegment, x: lastSegment.x - 10 }); } if (code == 38) { // up arrow snake.push({ ...lastSegment, y: lastSegment.y - 10 }); } if (code == 39) { // right arrow snake.push({ ...lastSegment, x: lastSegment.x + 10 }); } if (code == 40) { // down arrow snake.push({ ...lastSegment, y: lastSegment.y + 10 }); } } function draw() { ctx.fillStyle = color; snake.forEach(segment => { ctx.fillRect(segment.x, segment.y, unit - 2, unit - 2); }); } function timer() { clear(); draw(); } document.onkeyup = keyup; snake.push(snakeone); setInterval(timer, 150);

 body { background-color: black; text-align: center; } #canvas { border: 2px solid white; }

 <html> <head> <title> New Tab </title> </head> <body> <canvas id="canvas" height="400" width="400"></canvas> </body> </html>

Drawing Rectangles With For Loops

Question

1 answers

solution1
0 2020-09-30 05:08:02

Drawing Rectangles With For Loops

Question

1 answers

solution1 0 2020-09-30 05:08:02

solution1
0 2020-09-30 05:08:02