下面是网页版的贪吃蛇代码,感兴趣的小伙伴可以看一下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易贪吃蛇(原创)-jq22.com</title>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
#myCanvas {
border:1px solid gray;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var init = function() {
var cxt = game.context('myCanvas');
game.coordinate();
game.back(cxt);
game.food(cxt);
game.snake(cxt, game.attribute.snake.head.x, game.attribute.snake.head.y);
};
document.onkeydown = function(e) {
var cxt = game.context('myCanvas');
switch (e.keyCode) {
case 13:
console.log("********开始********");
game.attribute.initialize = false;
break;
case 87:
game.attribute.initialize = false;
if (!animate.attribute.up && !animate.attribute.down) {
animate.attribute.up = true;
animate.attribute.left = false;
animate.attribute.down = false;
animate.attribute.right = false;
animate.attribute.directionFrist = false;
animate.up(cxt);
}
console.log("********上********");
break;
case 83:
if (animate.attribute.directionFrist) {
return
}
game.attribute.initialize = false;
if (!animate.attribute.down && !animate.attribute.up && !animate.directionFrist) {
animate.attribute.up = false;
animate.attribute.left = false;
animate.attribute.down = true;
animate.attribute.right = false;
animate.down(cxt);
}
console.log("********下********");
break;
case 65:
game.attribute.initialize = false;
if (!animate.attribute.left && !animate.attribute.right) {
animate.attribute.up = false;
animate.attribute.left = true;
animate.attribute.down = false;
animate.attribute.right = false;
animate.attribute.directionFrist = false;
animate.left(cxt);
}
console.log("********左********");
break;
case 68:
game.attribute.initialize = false;
if (!animate.attribute.right && !animate.attribute.left) {
animate.attribute.up = false;
animate.attribute.left = false;
animate.attribute.down = false;
animate.attribute.right = true;
animate.attribute.directionFrist = false;
animate.right(cxt);
}
console.log("********右********");
break;
}
};
var animate = {
attribute: {
delay: 10,
time: 0,
up: false,
left: false,
down: false,
right: false,
directionFrist: true
},
draw: function(cxt, x, y) {
game.clearCanvas(cxt);
game.back(cxt);
game.food(cxt);
game.snake(cxt, x, y);
},
up: function(cxt) {
if (this.attribute.up) {
if (this.attribute.time == this.attribute.delay || this.attribute.time == 0) {
this.attribute.time = 0;
game.attribute.snake.head.y -= 1 * game.attribute.snake.size;
this.draw(cxt, game.attribute.snake.head.x, game.attribute.snake.head.y)
}
this.attribute.time += 1;
if (game.attribute.snake.head.y >= 0) {
requestAnimationFrame(() => {
animate.up(cxt);
});
} else {
game.over(cxt);
}
}
},
left: function(cxt) {
if (this.attribute.left) {
if (this.attribute.time == this.attribute.delay || this.attribute.time == 0) {
this.attribute.time = 0;
game.attribute.snake.head.x -= 1 * game.attribute.snake.size;
this.draw(cxt, game.attribute.snake.head.x, game.attribute.snake.head.y)
}
this.attribute.time += 1;
if (game.attribute.snake.head.x >= 0) {
requestAnimationFrame(() => {
animate.left(cxt);
});
} else {
game.over(cxt);
}
}
},
down: function(cxt) {
if (this.attribute.down) {
if (this.attribute.time == this.attribute.delay || this.attribute.time == 0) {
this.attribute.time = 0;
game.attribute.snake.head.y += 1 * game.attribute.snake.size;
this.draw(cxt, game.attribute.snake.head.x, game.attribute.snake.head.y)
}
this.attribute.time += 1;
if (game.attribute.snake.head.y <= (game.attribute.back.height)) {
requestAnimationFrame(() => {
animate.down(cxt);
});
} else {
game.over(cxt);
}
}
},
right: function(cxt) {
if (this.attribute.right) {
if (this.attribute.time == this.attribute.delay || this.attribute.time == 0) {
this.attribute.time = 0;
game.attribute.snake.head.x += 1 * game.attribute.snake.size;
this.draw(cxt, game.attribute.snake.head.x, game.attribute.snake.head.y)
}
this.attribute.time += 1;
if (game.attribute.snake.head.x <= game.attribute.back.width) {
requestAnimationFrame(() => {
animate.right(cxt);
});
} else {
game.over(cxt);
}
}
}
};
var game = {
attribute: {
initialize: true,
snake: {
color: '#DC143C',
size: 10, // 蛇的大小
head: { // 蛇头
x: 250,
y: 250
},
length: 10, //蛇身默认长度
array: new Array(),
is: true
},
food: {
color: '#00FA9A',
coordinate: new Array(),
is: true
},
back: {
strokeStyleColor: '#F5F5F5',
width: 500,
height: 500
},
coordinateData: new Array()
},
over: function(cxt) {
alert('游戏结束');
this.clearCanvas(cxt);
this.attribute.initialize = true;
this.attribute.snake.head.x = 250;
this.attribute.snake.head.y = 250;
this.attribute.snake.length = 10;
this.attribute.snake.array.length = 0;
this.attribute.snake.is = true;
this.attribute.food.coordinate.length = 0;
this.attribute.food.is = true;
animate.attribute.up = true;
animate.attribute.left = false;
animate.attribute.down = false;
animate.attribute.right = false;
this.back(cxt);
this.food(cxt);
this.snake(cxt, this.attribute.snake.head.x, this.attribute.snake.head.y);
},
clearCanvas: function(cxt) {
cxt.clearRect(0, 0, this.attribute.back.width, this.attribute.back.height);
},
coordinate: function() {
var array = new Array()
for (var x = 0; x < (this.attribute.back.width / this.attribute.snake.size); x++) {
array[x] = new Array()
for (var y = 0; y < (this.attribute.back.height / this.attribute.snake.size); y++) {
array[x][y] = [(x * this.attribute.snake.size), (y * this.attribute.snake.size)]
}
}
this.attribute.coordinateData = array;
},
food: function(cxt) {
let array = new Array()
this.attribute.coordinateData.forEach((item, itmeIndex) => {
item.forEach((data, dataIndex) => {
for (let index in this.attribute.snake.array) {
if (data[0] == this.attribute.snake.array[index][0] && data[1] == this.attribute.snake.array[index][1]) {
array.push([itmeIndex, dataIndex])
}
}
});
});
let widthCoordinate = this.attribute.coordinateData[0].length,
heightCoordinate = this.attribute.coordinateData.length,
Boole = false;
if (this.attribute.food.is) {
do {
var coordinate = [X = Math.round(Math.random() * widthCoordinate), Y = Math.round(Math.random() * heightCoordinate)];
for (let i in array) {
if (array[i][0] == coordinate[0] && array[i][1] == coordinate[1]) {
Boole = true;
} else {
Boole = false;
}
}
} while (Boole);
this.attribute.food.coordinate = coordinate;
this.attribute.food.is = false;
}
cxt.fillStyle = this.attribute.food.color;
cxt.fillRect(
this.attribute.coordinateData[this.attribute.food.coordinate[0]][this.attribute.food.coordinate[1]][0],
this.attribute.coordinateData[this.attribute.food.coordinate[0]][this.attribute.food.coordinate[1]][1], this.attribute.snake.size, this.attribute.snake.size)
},
drawPath: function(cxt) {
var arr = this.attribute.snake.array;
if (this.attribute.initialize) {
for (var i = 0; i < this.attribute.snake.length; i++) {
arr[i] = [this.attribute.snake.head.x, this.attribute.snake.head.y + (i * this.attribute.snake.size)]
}
} else {
var drawPathArr = new Array()
for (var i = 0; i < this.attribute.snake.length; i++) {
if (i == 0) {
drawPathArr[i] = [this.attribute.snake.head.x, this.attribute.snake.head.y]
} else if (i > 0) {
drawPathArr[i] = this.attribute.snake.array[i - 1]
}
}
this.attribute.snake.array = drawPathArr;
}
if (this.attribute.coordinateData[this.attribute.food.coordinate[0]][this.attribute.food.coordinate[1]][0] == this.attribute.snake.head.x && this.attribute.coordinateData[this.attribute.food.coordinate[0]][this.attribute.food.coordinate[1]][1] == this.attribute.snake.head.y) {
this.attribute.snake.length += 1;
this.attribute.food.is = true;
this.food(cxt);
}
if (!this.attribute.snake.is) {
this.over(cxt)
return
}
this.attribute.snake.array.forEach((item, index) => {
if (index > 0) {
if (item[0] == this.attribute.snake.head.x && item[1] == this.attribute.snake.head.y) {
this.attribute.snake.is = false;
return;
}
}
});
return arr
},
snake: function(cxt, x, y) {
var cxt = this.context('myCanvas'),
snakeWidth = this.attribute.snake.size,
snakeHeight = this.attribute.snake.size,
arrary = this.drawPath(cxt); // 获取行动路径
cxt.fillStyle = this.attribute.snake.color;
for (let index in arrary) {
cxt.fillRect(arrary[index][0], arrary[index][1], snakeWidth, snakeHeight);
}
},
context: function(id) {
var c = document.getElementById(id);
var cxt = c.getContext("2d");
return cxt
},
back: function(cxt) {
cxt.strokeStyle = this.attribute.back.strokeStyleColor;
var widthLen = this.attribute.back.width / this.attribute.snake.size,
heightLen = this.attribute.back.height / this.attribute.snake.size;
for (var j = 0; j < heightLen; j++) {
for (var i = 0; i < widthLen; i++) {
cxt.lineWidth = 1;
cxt.strokeRect(i * this.attribute.snake.size,
j * this.attribute.snake.size,
this.attribute.snake.size,
this.attribute.snake.size);
}
}
}
};
init();
</script>
</body>
</html>