我正在尝试使用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();
请帮助!!
答案 0 :(得分:1)
<html>
标记。cannew()
来实例化对象。this
代替points
。您可以在此演示中看到它的工作原理:
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;