Question

var zbImg = new Image();
zbImg.src = './image/zuobian.jpg';

var bgImg = new Image();
bgImg.src = './image/beijing.jpg';

var smImg = new Image();
smImg.src = './image/shangmian.png';

var stImg = new Image();
stImg.src = './image/shenti.png';

var xmImg = new Image();
xmImg.src = './image/xiamian.png';

var ybImg = new Image();
ybImg.src = './image/youbian.png';

function Snake() {

  this.cav = document.getElementById("cav");
  this.canvas = this.cav.getContext('2d');
  this.step = 25;
  this.width = 500;
  this.height = 500;

  this.stepW = this.width / this.step;
  this.stepH = this.height / this.step;

  this.snakeArr = []; //snake body
  this.foodArr = []; //store food






  //1, draw the game elements
  this.draw = function() {
    // paint background
    this.canvas.drawImage(bgImg, 0, 0, this.width, this.height);
    // paint snake

    // draw it
    this.drawFood = function() {
      if (this.foodArr.length != 0) {
        this.canvas.drawImage(stImg, this.foodArr[0].x * this.step, this.foodArr[0].y * this.step, this.step, this.step);
        return;
      }
      var x = Math.floor(Math.random() * this.stepW);
      var y = Math.floor(Math.random() * this.stepH);


      for (var i = 0; i < this.snakeArr.length; i++) {
        if (this.snakeArr[i].x == x && this.snakeArr[i].y == y)

        {
          this.drawFood();
          break;
        }
      }


      // not cover
      this.foodArr[0] = {
        x: x,
        y: y,
        Image: stImg
      }
      this.canvas.drawImage(
        stImg, this.foodArr[0].x * this.step, this.foodArr[0].y * this.step, this.step, this.step);

    }





    this.drawSnake = function() {

      // initial snake body
      if (this.snakeArr.length == 0) {

        for (var i = 0; i < 5; i++) {
          this.snakeArr[i] = {
            x: this.stepW / 2 + i - 2,
            y: this.stepH / 2,
            img: stImg,
            d: 'l'
          }
        }
        this.snakeArr[0].img = zbImg; //change to snake head pic 

      }
      for (var i = 0; i < this.snakeArr.length; i++) {
        this.canvas.drawImage(this.snakeArr[i].img,
          this.snakeArr[i].x * this.step,
          this.snakeArr[i].y * this.step,
          this.step,
          this.step);
      }

    }
    this.drawFood();
    this.drawSnake();



    console.log(5);

  }
  //2, make snake move
  this.move = function() {

    document.onkeydown = function(event) {
      var event = event || window.event;
      var code = event.keyCode;

      console.log(7);
      console.log(code);


      switch (code) {
        case 37:
          This.snakeArr[0].d = 'l';
          This.snakeArr[0].img = zbImg;
          break;
        case 38:
          This.snakeArr[0].d = 't';
          This.snakeArr[0].img = smImg;
          break;
        case 39:
          This.snakeArr[0].d = 'r';
          This.snakeArr[0].img = ybImg;
          break;
        case 40:
          This.snakeArr[0].d = 'b';
          This.snakeArr[0].img = xmImg;
          break;
      }
      console.log(This.snakeArr[0]);
    }
  }
  //3, make snake to die
  this.hit = function() {

  }

}

<!DOCTYPE html>
<html1>

  <head>
    <meta charset="UTF-8">
    <title>tangchishe</title>
    <style>
      #cav {
        background: red;
      }
    </style>
    <script src='./index.js'></script>
    <script type="text/javascript">
      window.onload = function() {

        var snake = new Snake();
        snake.draw();
        snake.move();
      }
    </script>
  </head>

  <body>
    <canvas id="cav" width="500" height="500"></canvas>
  </body>
</html1>

这张照片是我运行代码后得到的内容：

this picture is content I got after I run my code

这是我写的代码，当我在浏览器上运行时它会出现蛇和食物，但代码无法进入移动功能方法。我在移动函数方法之前使用console.log print 5并在移动函数方法中使用console.log print 7。最后谷歌Chrome浏览器控制台出现5而不会出现7 谁能帮我？非常感谢你

Answer 1

乍一看，有几件事情在这里发生。对于初学者，您应该将您的javascript移动到另一个文件并将其加载到页面中。但即使你不这样做，看起来javascript只是粘贴在文档的末尾而不是“”标签。另外，为什么页面包含“html1”标签？这应该只是“html”

Gluttonous Snake游戏代码无法进入移动功能

1 个答案: