使用 For 循环绘制矩形答案

【问题标题】：Drawing Rectangles With For Loops使用 For 循环绘制矩形
【发布时间】：2020-09-30 03:50:51
【问题描述】：

我不明白为什么这不是绘图，这可能是一个愚蠢的错误，虽然我已经多次检查所有代码，但如果是这样，我很抱歉，我正在尝试制作蛇游戏和蛇不会画画。我不希望数组单元跟踪所有单元的位置，为此您必须相应地取消移位并弹出它们。

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>

【问题讨论】：

您的预期结果到底是什么？ “为什么不画”不够详细。
你在声明它之前使用了单位变量。
我改了这个，现在我很困惑为什么广场不会移动，你有任何insite吗？也非常感谢，我不知道我是怎么错过的
看代码，我想你可能已经写了很多，然后才测试？例如，您使用 event.code 返回表示键的字符串，但您正在检查 ascii 代码。我建议一次只写一点点，并在构建之前检查它们是否有效。

标签： javascript html css for-loop drawing

【解决方案1】：

这是代码的工作版本。我做了一些更改并简化了一些事情，但它可能对您有所帮助。

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>

【讨论】：