- 项目只有四个文件:index.html、Game.js、Snake.js、Food.js
- 贪吃蛇游戏较为简单,有什么疑问欢迎在评论区探讨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background: rgb(0, 255, 221);
color: #fff;
text-align: center;
}
table{
border-collapse: collapse;
background:rgb(0, 255, 221);
border:1px solid #fff;
margin:50px auto;
}
td{
width: 24px;
height: 24px;
color: blue;
text-align: center;
background: #333;
border:1px solid #fff;
border-radius: 50%;
}
</style>
</head>
<body>
<h3 id = "f">帧编号:0</h3>
<h3 id = "score">分数:0</h3>
<div id="app"></div>
<script src="js/Game.js"></script>
<script src="js/Snake.js"></script>
<script src="js/Food.js"></script>
<script>
var game = new Game();
</script>
</body>
</html>
function Game(){
this.row = 20;
this.col = 20;
this.score = 0;
this.init();
this.snake = new Snake();
this.food = new Food(this);
this.start();
this.bindEvent();
}
Game.prototype.init = function(){
this.dom = document.createElement("table");
var tr,td;
for(var i = 0;i < this.row;i ++){
tr = document.createElement("tr");
this.dom.appendChild(tr);
for(var j = 0;j < this.col;j ++){
td = document.createElement("td");
tr.appendChild(td);
}
}
document.getElementById("app").appendChild(this.dom);
};
Game.prototype.clear = function(){
for(var i = 0;i < this.row;i ++){
for(var j = 0;j < this.col;j ++){
this.dom.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].style.backgroundColor = "rgb(0, 255, 221)";
this.dom.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].innerHTML = "";
}
}
};
Game.prototype.setColor = function(row,col,color){
this.dom.getElementsByTagName("tr")[row].getElementsByTagName("td")[col].style.backgroundColor = color;
};
Game.prototype.setHTML = function(row,col,html){
this.dom.getElementsByTagName("tr")[row].getElementsByTagName("td")[col].innerHTML = html;
};
Game.prototype.bindEvent = function(){
var self = this;
document.onkeydown = function(event){
switch(event.keyCode){
case 37:
if(game.snake.direction == "R"){
return;
}
self.snake.changeDirection("L");
break;
case 38:
if(game.snake.direction == "D"){
return;
}
self.snake.changeDirection("U");
break;
case 39:
if(game.snake.direction == "L"){
return;
}
self.snake.changeDirection("R");
break;
case 40:
if(game.snake.direction == "U"){
return;
}
self.snake.changeDirection("D");
break;
}
};
};
Game.prototype.start = function(){
this.f = 0;
this.timer = setInterval(function(){
game.f++;
document.getElementById("f").innerHTML = "帧编号:" + game.f;
document.getElementById("score").innerHTML = "分数:" + game.score;
game.clear();
var during = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
game.f % during == 0 && game.snake.update();
game.snake.render();
game.food.render();
},20);
};
function Snake(){
this.body = [
{"row":3,"col":6},
{"row":3,"col":5},
{"row":3,"col":4},
{"row":3,"col":3},
{"row":3,"col":2}
];
this.direction = "R";
this.willDirection = "R";
}
Snake.prototype.update = function(){
this.direction = this.willDirection;
switch(this.direction){
case "R":
this.body.unshift({"row":this.body[0].row,"col":this.body[0].col + 1});
break;
case "D":
this.body.unshift({"row":this.body[0].row + 1,"col":this.body[0].col});
break;
case "L":
this.body.unshift({"row":this.body[0].row,"col":this.body[0].col - 1});
break;
case "U":
this.body.unshift({"row":this.body[0].row - 1,"col":this.body[0].col});
break;
}
if(this.body[0].col > game.col - 1 || this.body[0].row > game.row - 1 || this.body[0].col < 0 || this.body[0].row < 0){
this.body.shift();
alert("游戏结束,您当前的得分为:" + game.score + "分");
clearInterval(game.timer);
}
for(var i = 1;i < this.body.length; i ++){
if(this.body[0].col == this.body[i].col && this.body[0].row == this.body[i].row){
this.body.shift();
alert("游戏结束,您当前的得分为:" + game.score + "分");
clearInterval(game.timer);
}
}
if(this.body[0].row == game.food.row && this.body[0].col == game.food.col){
game.food = new Food(game);
game.f = 0;
game.score ++;
}else{
this.body.pop();
}
};
Snake.prototype.changeDirection = function(d){
this.willDirection = d;
};
Snake.prototype.render = function(){
game.setColor(this.body[0].row,this.body[0].col,'pink');
for(var i = 1;i < this.body.length;i ++){
game.setColor(this.body[i].row,this.body[i].col,'cyan');
}
};
function Food(gameSnake){
var self = this;
do{
this.row = parseInt(Math.random() * gameSnake.row);
this.col = parseInt(Math.random() * gameSnake.col);
}while((function(){
for(var i = 0 ;i < gameSnake.snake.body.length;i ++){
if(gameSnake.snake.body[i].row == self.row && gameSnake.snake.body[i].col == self.col){
return true;
}
}
return false;
})());
}
Food.prototype.render = function(){
game.setHTML(this.row,this.col,"★");
}