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

时间:2017-12-12 00:28:06

标签: javascript brackets

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

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

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

我对这段代码的计划是使用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段蛇。

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

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

1 个答案:

答案 0 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;

除了缺少的变量(这是一些疯狂的猜测),这里添加了一些东西:

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