Question

我不明白为什么这没有画出来，这可能是一个愚蠢的错误，尽管我已经遍历了所有代码，但对不起，我很抱歉，我正在尝试制作蛇游戏，蛇不会画。我不需要数组单元格来跟踪所有单元格的位置，为此，您必须取消移动并相应地弹出它们。

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

这是代码的有效版本。我做了一些更改并简化了一些步骤，但这可能对您有所帮助。

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>

用For循环绘制矩形

1 个答案: