代码之家 › 专栏 › 技术社区 › èèw

如何修改这个小游戏?

canvas javascript

-1

èèw · 技术社区 · 7 年前

代码如下所示。我怎样才能改变蛇能到达的范围?我试图修改所有可以修改的值,但都没有成功。

目前我只能修改蛇的速度。

我怎样才能改变蛇能到达的范围?

<!doctype html>
<html>

<body>
  <canvas id="can" width="400" height="400" style="background: Black"> 
    </canvas>
  <script>
    var sn = [42, 41],
      dz = 43,
      fx = 1,
      n, ctx = document.getElementById("can").getContext("2d");

    function draw(t, c) {
      ctx.fillStyle = c;
      ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);
    }
    document.onkeydown = function(e) {
      fx = sn[1] - sn[0] == (n = [-1, -20, 1, 20][(e || event).keyCode - 37] || fx) ? fx : n
    };
    ! function() {
      sn.unshift(n = sn[0] + fx);
      console.log(n);
      if (sn.indexOf(n, 1) > 0 || n < 0 || n > 399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19)
        return alert("GAME OVER");
      draw(n, "Lime");
      if (n == dz) {
        while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0);
        draw(dz, "Yellow");
      } else
        draw(sn.pop(), "Black");
      setTimeout(arguments.callee, 100);
    }();
  </script>
</body>

</html>

1 回复 | 直到 7 年前

1

0

Leo 7 年前

更改画布的宽度和高度,然后更改碰撞检测值。

下面是如何将其更改为800 x 800。

<!doctype html>
<html>

<body>
  <canvas id="can" width="800" height="800" style="background: Black"> 
    </canvas>
  <script>
    var sn = [42, 41],
      dz = 43,
      fx = 1,
      n, ctx = document.getElementById("can").getContext("2d");

    function draw(t, c) {
      ctx.fillStyle = c;
      ctx.fillRect(t % 40 * 20 , ~~(t / 40) * 20 + 1, 18, 18);
    }
    document.onkeydown = function(e) {
      fx = sn[1] - sn[0] == (n = [-1, -40, 1, 40][(e || event).keyCode - 37] || fx) ? fx : n
    };
    ! function() {
      sn.unshift(n = sn[0] + fx);
      console.log(n);
      if (sn.indexOf(n, 1) > 0 || n < 0 || n > 1599 || fx == 1 && n % 40 == 0 || fx == -1 && n % 40 == 39)
        return alert("GAME OVER");
      draw(n, "Lime");
      if (n == dz) {
        while (sn.indexOf(dz = ~~(Math.random() * 800)) >= 0);
        draw(dz, "Yellow");
      } else
        draw(sn.pop(), "Black");
      setTimeout(arguments.callee, 100);
    }();
  </script>
</body>