Question

我正在尝试使用js制作动画，运行此代码时出现此错误：

var s = document.getElementById("canvas");
var snake = s.getContext("2d");
var snakeobj;

function cannew() {
  snakeobj = new points();
}

function points() {
  this.x = 0;
  this.y = 0;
  this.xspeed = 1;
  this.yspeed = 0;
  this.changeco = function() {
    points.x += points.xspeed;
    points.y += points.yspeed;
  }
  this.moving = function() {
    snake.fillStyle = "green";
    snake.fillRect(points.x, points.y, 30, 30);
  }
  snakeobj.changeco();
  snakeobj.moving();
}
points();

<canvas id="canvas" width="600" height="600" style="border : 1px solid; background : black;"></canvas>
<script src="snake.js"></script>

我发现“changeco（）”和“moving（）”未定义使用console.log();请帮助!!

Answer 1

您忘记了开始<html>标记。
您不需要在console.log调用中使用paranthesis。
首先必须调用cannew()来实例化对象。
您必须使用this代替points。

您可以在此演示中看到它的工作原理：

＆＃13;

var s = document.getElementById("canvas");
  var snake = s.getContext("2d");
  var snakeobj;

$(document).ready(function(){  

  console.log("First click into the black field and then use W,A,S,D to move.");
  snakeobj = new points();
  
  window.addEventListener("keypress", myEventHandler, false);

});

function points() {
  this.x = 0;
  this.y = 0;
  this.xspeed = 10;
  this.yspeed = 10;
  
  this.goRight = function() {
    this.x += this.xspeed;
  }
  this.goLeft = function() {
    this.x -= this.xspeed;
  }
  this.goDown = function() {
    this.y -= this.yspeed;
  }
  this.goUp = function() {
    this.y += this.yspeed;
  }
  this.moving = function() {
    snake.fillStyle = "green";
    snake.fillRect(this.x, this.y, 30, 30);
  }
}


function myEventHandler(e)
{
    var keyCode = e.keyCode;
        
    if(keyCode == 100){
      snakeobj.goRight();
    } else if(keyCode == 97){
      snakeobj.goLeft();
    } else if(keyCode == 119){
      snakeobj.goDown();
    } else if(keyCode == 115){
      snakeobj.goUp();
    }
  
  //console.log(snakeobj);
  snakeobj.moving();
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="600" height="600" style="border : 1px solid; background : black;"></canvas>

＆＃13;

为什么“changeco（）”和“moving（）”的值未定义？ - javascript

1 个答案: