为了账号安全,请及时绑定邮箱和手机立即绑定

如何使用 Javascript 保持块的独立性?

如何使用 Javascript 保持块的独立性?

萧十郎 2022-06-09 10:35:42
我正在学习 JavaScript,但在某些方面仍在苦苦挣扎。我正在尝试使这段代码中的块具有自己的颜色,因此稍后我可以弄清楚如何将图片添加到每个块,但它不起作用,因为仅在 3 个循环之后颜色消失并且它们变成全黑。对于如何制作每个块并保持其颜色的任何帮助,我将非常感激。请看下面的代码:<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Slot Machine</title></head><body>  <canvas id="canvas" width="1000" height="2000"></canvas>  <script>    var game = {      tickNumber: 0,      timer: null,      board: [        "####################",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "#                  #",        "####################"      ],      tick: function() {        game.tickNumber++;        snake.move();        graphics.drawGame();        game.timer = window.setTimeout("game.tick()", 500);      }    };    var snake = {      parts: [{          x: 2,          y: 2,          color: "green"        },        {          x: 2,          y: 6,          color: "red"        },        {          x: 2,          y: 10,          color: "blue"        },        {          x: 2,          Y: 14,
查看完整描述

1 回答

?
开满天机

TA贡献1786条经验 获得超13个赞

问题在于您的蛇中的移动功能。您正在用只有 x 和 y 且没有颜色属性的新位置替换部件对象。


理想情况下,要移动蛇,您应该只移动头部,然后更新身体的其余部分以向上移动一个部分。我已经更新了你的移动功能,你可以在其中看到这个算法。


<!DOCTYPE html>

<html>


<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Slot Machine</title>

</head>


<body>

  <canvas id="canvas" width="1000" height="2000"></canvas>


  <script>

    var game = {

      tickNumber: 0,

      timer: null,

      board: [

        "####################",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "#                  #",

        "####################"

      ],

      tick: function() {

        game.tickNumber++;

        snake.move();

        graphics.drawGame();

        game.timer = window.setTimeout("game.tick()", 500);

      }

    };

    var snake = {

      parts: [{

          x: 2,

          y: 2,

          color: "green"

        },

        {

          x: 2,

          y: 6,

          color: "red"

        },

        {

          x: 2,

          y: 10,

          color: "blue"

        },

        {

          x: 2,

          Y: 14,

          color: "yellow"

        },

        {

          x: 2,

          Y: 16,

          color: "grey"

        }

      ],

      facing: "S",

      nextLocation: function() {

        var snakeHead = snake.parts[0];

        var targetX = snakeHead.x;

        var targetY = snakeHead.y;


        targetY = snake.facing == "S" ? targetY + 4 : targetY;

        if (targetY >= 24) {

          targetY = 2;

        }

        return {

          x: targetX,

          y: targetY

        };

      },

      move: function() {

        var location = snake.nextLocation();

        var prevX = snake.parts[0].x;

        var prevY = snake.parts[0].y;

        snake.parts[0].x = location.x;

        snake.parts[0].y = location.y;

        for(var i = 1; i < snake.parts.length; i++) {

          var currentX = snake.parts[i].x;

          var currentY = snake.parts[i].y;

          snake.parts[i].x = prevX;

          snake.parts[i].y = prevY;

          prevX = currentX;

          prevY = currentY; 

        }

      }

    };


    var graphics = {

      canvas: document.getElementById("canvas"),

      squareSize: 20,

      squarePic: 60,


      drawBoard: function(ctx) {

        var currentYoffset = 0;

        game.board.forEach(function checkLine(line) {

          line = line.split('');

          var currentXoffset = 0;

          line.forEach(function checkCharacter(character) {

            if (character == '#') {

              ctx.fillStyle = "blue";

              ctx.fillRect(currentXoffset, currentYoffset, graphics.squareSize, graphics.squareSize);

            }

            currentXoffset += graphics.squareSize;

          });

          currentYoffset += graphics.squareSize;

        });

      },


      drawSnake: function(ctx) {

        snake.parts.forEach(function drawPart(part) {

          var partXlocation = part.x * graphics.squareSize;

          var partYlocation = part.y * graphics.squareSize;

          var coloracao = part.color;


          ctx.fillStyle = coloracao;

          ctx.fillRect(partXlocation, partYlocation, graphics.squarePic, graphics.squarePic);

        });

      },

      drawGame: function() {

        var ctx = graphics.canvas.getContext("2d");

        ctx.clearRect(0, 0, graphics.canvas.width, graphics.canvas.height);

        graphics.drawBoard(ctx);

        graphics.drawSnake(ctx);

      }

    };


    graphics.drawGame();

    var gameControl = {

      startGame: function() {

        game.tick();

      }

    };

    gameControl.startGame();

  </script>


</body>


</html>


查看完整回答
反对 回复 2022-06-09
  • 1 回答
  • 0 关注
  • 102 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号