Question

我目前正在使用包含HTML5，CSS和JS功能的Brackets进行基本的蛇游戏。我是一名自学成才的编码员，最近我用JavaScript功能打了一个路障。我试图启动蛇的运动（我完全失去了，而且代码无法帮助）并在游戏开始时制作一个包含5个身体部分的数组。从那里，我应该能够找出运动并在阵列中添加更多的主体段。

下面是我的代码到目前为止，我知道它有点凌乱，这是我第一次尝试完整的工作游戏，在我创建海报之前我真正做过的最多是基于文本的冒险游戏。

SnakeBody 是我设置的用于保存蛇体部分的数组。 ctx 是一种缩短形式的上下文，它来源于＆＃34; theCanvas.getContext（＆＃34; 2d＆＃34;）＆＃34;启动画布对象时的序列。 cw 是我自己缩短的形式＆＃34; theCanvas.width＆＃34;描述画布的宽度， ch 也缩短了＆＃34; theCanvas.height＆＃34;描述画布的高度。

我对这段代码的计划是使用genSnakeBody（）生成蛇体的下一部分，然后使用drawSnake（）函数在画布上绘制蛇的图像。

非常感谢任何和所有帮助!!

function genSnakeBody() {
    var BodyHeight = 15 // Height of the snake's body
    var BodyWidth = 15 //Width of the snake's body
    var BodySpeed = 10 //Speed of the snake

    var body = {
        x: cw / 2 - (BodyHeight / 2),
        y: ch / 2 - (BodyWidth / 2),
        h: BodyHeight,
        w: BodyWidth,
        color: "green",
        speed: BodySpeed
    };
    var length = 5;

    SnakeBody.push(body)
}

function drawSnake() {
    var length = 5
    for (i = 0; i < SnakeBody.length; i++) {
        ctx.beginPath();
        ctx.fillStyle = SnakeBody[i].color;
        ctx.fillRect(SnakeBody[i].x, SnakeBody[i].y, SnakeBody[i].w, SnakeBody[i].h);
        ctx.strokeRect(SnakeBody[i].x, SnakeBody[i].y, SnakeBody[i].w, SnakeBody[i].h);
        ctx.closePath();
    }
}

我希望在页面加载时会产生5段蛇。

相反，我在屏幕中央有一个单独的方框尺寸，我不知道其他方框（如果我的代码甚至允许其他方框）是否在我能看到的那个下面，或者如果它们根本不存在。

就像我之前说的那样，非常感谢任何和所有的帮助，我期待着它！非常感谢你，如果你花时间阅读并尝试提供一个解决方案，如果代码很糟糕，我会尝试创建一个更清晰的版本，并从另一个角度尝试这个问题。谢谢！

Answer 1

尝试在此处保留对脚本的最小更改量是一个有效的代码片段：

＆＃13;

var c = document.getElementById("canvas");
var cw = 200;
var ch = 200;
var ctx = c.getContext("2d");
var SnakeBody = []

function genSnakeBody(index) {
  var BodyHeight = 15; // Height of the snake's body
  var BodyWidth = 15; //Width of the snake's body
  var BodySpeed = 10; //Speed of the snake

  var body = {
    x: cw / 2 - (BodyHeight / 2) * index,
    y: ch / 2 - (BodyWidth / 2) * index,
    h: BodyHeight,
    w: BodyWidth,
    color: "green",
    speed: BodySpeed
  };

  SnakeBody.push(body)
}

function drawSnake() {
  var length = 5;
  for (var i = 0; i < length; i++) {
    genSnakeBody(i);
    ctx.beginPath();
    ctx.fillStyle = SnakeBody[i].color;
    ctx.fillRect(SnakeBody[i].x, SnakeBody[i].y, SnakeBody[i].w, SnakeBody[i].h);
    ctx.strokeRect(SnakeBody[i].x, SnakeBody[i].y, SnakeBody[i].w, SnakeBody[i].h);
    ctx.closePath();
  }
}

drawSnake();

＆＃13;

<canvas id="canvas"></canvas>

＆＃13;

除了缺少的变量（这是一些疯狂的猜测），这里添加了一些东西：

使用索引调用genSnakeBody，以便在循环内调用时可以区分每个正文部分
从length功能中删除变量genSnakeBody
在drawSnake genSnakeBody

loop

如何在括号程序中启动移动和修复数组

1 个答案: