Question

我目前正在用html和java脚本创建一个Snake Game，在创建蛇（代码中称为“ myGamePiece”）（绿色块）未与障碍物（称为“ myObstacle”）碰撞时遇到困难'在代码中）（红色块），并向蛇添加5个额外的块。我该如何解决这个问题？

我曾尝试在游戏中实现和编辑其他代码，并且一直在使用W3学校游戏教程作为游戏指南的一部分，但它并未提供或提供明确的解决方案解决方案。

<!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <style>
        canvas {
            border:1px solid #000000;
            background-color: #000000;
        }
        </style>
        </head>
        <body onload="startGame()">
        <script>

        var myGamePiece;
        var myObstacle;

        function startGame() {
            myGamePiece = new component(20, 20, "green", 10, 120);
            myObstacle  = new component(20, 20, "red", 300, 120);    
            myGameArea.start();
        }
    //Creates the Game Canvas:    
        var myGameArea = {
            canvas : document.createElement("canvas"),
            start : function() {
                this.canvas.width = 900;
                this.canvas.height = 500;
                this.context = this.canvas.getContext("2d");
                document.body.insertBefore(this.canvas, document.body.childNodes[0]);
                this.interval = setInterval(updateGameArea, 20);
    //create the movement with the KeyBoard Arrows:
                window.addEventListener('keydown', function (e) {
              myGameArea.key = e.keyCode;
            })
            window.addEventListener('keyup', function (e) {
              myGameArea.key = false;
            })
            },
            clear : function() {
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            },

        }

        function component(width, height, color, x, y) {
            this.width = width;
            this.height = height;
            this.speedX = 0;
            this.speedY = 0;    
            this.x = x;
            this.y = y;    
            this.update = function() {
                ctx = myGameArea.context;
                ctx.fillStyle = color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
            this.newPos = function() {
                this.x += this.speedX;
                this.y += this.speedY;  
         }      

        }

        function updateGameArea() {

            myGameArea.clear();
            myObstacle.update();
            myGamePiece.speedX = 0;
          myGamePiece.speedY = 0; 
          if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
          if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
          if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
          if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
            myGamePiece.newPos();    
            myGamePiece.update();
        }

        </script>

        </body>
        </html>

我希望输出的结果是，当游戏块与障碍物碰撞时，游戏块的末尾会再添加5个绿色块，但是当它们碰撞在一起时什么也不会发生。

Answer 1

我创建了简单的函数checkCollision()，建议您对其进行改进，并计算参数中是否存在对象冲突，然后返回true，然后在另一个函数中处理冲突。这样，您将能够使用相同的功能来检查与其他对象的碰撞，而无需重写它。

<!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <style>
        canvas {
            border:1px solid #000000;
            background-color: #000000;
        }
        </style>
        </head>
        <body onload="startGame()">
        <script>

        var myGamePiece;
        var myObstacle;

        function startGame() {
            myGamePiece = new component(20, 20, "green", 10, 120);
            myObstacle  = new component(20, 20, "red", 300, 120);    
            myGameArea.start();
        }
    //Creates the Game Canvas:    
        var myGameArea = {
            canvas : document.createElement("canvas"),
            start : function() {
                this.canvas.width = 900;
                this.canvas.height = 500;
                this.context = this.canvas.getContext("2d");
                document.body.insertBefore(this.canvas, document.body.childNodes[0]);
                this.interval = setInterval(updateGameArea, 20);
    //create the movement with the KeyBoard Arrows:
                window.addEventListener('keydown', function (e) {
              myGameArea.key = e.keyCode;
            })
            window.addEventListener('keyup', function (e) {
              myGameArea.key = false;
            })
            },
            clear : function() {
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            },

        }

        function component(width, height, color, x, y) {
            this.width = width;
            this.height = height;
            this.speedX = 0;
            this.speedY = 0;    
            this.x = x;
            this.y = y;    
            this.update = function() {
                ctx = myGameArea.context;
                ctx.fillStyle = color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
            this.newPos = function() {
                this.x += this.speedX;
                this.y += this.speedY;  
         }      

        }

        function updateGameArea() {

            myGameArea.clear();
            myObstacle.update();
            myGamePiece.speedX = 0;
          myGamePiece.speedY = 0; 
          if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
          if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
          if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
          if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
            myGamePiece.newPos();    
            myGamePiece.update();
          checkCollision(); //check collision
        }
        
        function checkCollision()
        {
            if(Math.abs(myGamePiece.x - myObstacle.x) < myGamePiece.width) //if difference of X of 2 objects is less than with of object, you can replace it with your desired value 
				      if(Math.abs(myGamePiece.y - myObstacle.y) < myGamePiece.height) //the same for the height
					      console.log("collision"); // handle collision here
        }
        startGame();
        </script>

        </body>
        </html>

如果您有任何疑问，请随时询问

如何在Snake游戏中创建碰撞？

1 个答案: