贪吃蛇游戏代码不能进入移动功能
贪吃蛇游戏代码不能进入移动功能
提问于 2017-03-21 04:54:05
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>
这张图片是我运行代码后得到的内容：
这是我写的代码，当我在浏览器上运行时，它看起来像蛇和食物，但是代码不能进入移动函数方法。在move函数方法之前使用console.log print 5，在move函数方法中使用console.log print 7。最后google chrome浏览器控制台出现5号而不是7号，谁能帮我？非常感谢
回答 1
Stack Overflow用户
发布于 2017-03-21 04:59:28
乍一看，这里发生了几件事。对于初学者来说，您应该将javascript移到另一个文件中并将其加载到页面中。但是，即使您不这样做，它看起来也只是将javascript粘贴在文档的末尾，而不是"“标记中。另外，为什么页面周围会有一个"html1“标记？这应该只是"html“
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42913771
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号