0
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>この写真は、私が得たコンテンツである移動機能を入力することはできません私はブラウザで実行すると、ヘビと食べ物が表示されますが、コードは移動機能メソッドを入力することはできません。私は移動方法の前にconsole.logプリント5を使用し、console.logプリント7を移動機能メソッドで使用します。最終的にGoogle Chromeのブラウザのコンソールが5と表示されます7 私を助けることができますか？ ありがとうございました
あなたはコンソールエラーがありますか？スネーククラスはどこに定義されていますか？ 'snake.drew（）;'行にブレークポイントを置き、 'snake'変数が期待どおりであることを確認することをお勧めします。そうであれば、私はあなたの '.move'関数を呼び出して、良いエラーメッセージを出したり、何がうまくいかないかを見るまで、コードを一行ずつ進めてみることにします。 – mwilson
私はコンソールエラーを見つけられませんが、私のコンパイラは崇高な試用版です。ブレークポイントはありません。javascript用のコンパイラがありがとうございます。ありがとうございます。 – chnaqi
ブラウザの開発ツール（通常はF12が起動します）を使用してください。そこにブレークポイントを設定することができます。私はまた、IDEの – mwilson