用javascript写一个简单的贪吃蛇小游戏
h5部分：
<body onload="init()" onkeydown="changeDirect(event)"> <div id="container"> <input type="button" value="开始" onclick="start()" /> <div id="map"></div> </div> </body>
css部分：
#container{
width: 800px;
margin: 60px auto;
}
#map{
width: 800px;
height: 400px;
background: #ccc;
border-color: #00f;
border-style: ridge;
overflow: hidden;
position: absolute;
}
javascript部分：
1、实现init和changeDirect
//加载完成后显示食物和蛇
function init(){
food = new Food();
food.display();
snake = new Snake();
snake.display();
}
//按下开始后移动蛇身
function start(){
snake_id = setInterval("snake.move()",300);
}
//读取键盘指令
function changeDirect(evtkey){
snake.setDirect(evtkey.keyCode);
}
2、食物构造函数
function Food(){
this.w = 20;
this.h = 20;
this.color = "red";
//食物显示
this.display = function(){
//食物的外形
var newfood = document.createElement("div");
newfood.style.width = this.w+"px";
newfood.style.height = this.h+"px";
newfood.style.backgroundColor = this.color;
//食物的位置，随机出现
newfood.style.position = "absolute";
this.x = Math.round(Math.random()*39);//整个游戏画面的空格数
this.y = Math.round(Math.random()*19);
newfood.style.left = (this.x*this.w) + "px";
newfood.style.top = (this.y*this.h) + "px";
document.getElementById("map").appendChild(newfood);
//标记食物，以便删除
this.taiji = newfood;
}
//删除食物，并生成新的食物
this.reDisplay = function(){
document.getElementById("map").removeChild(this.taiji);
this.display();
}
}
3、蛇构造函数
function Snake(){
this.w = 20;
this.h = 20;
//初始的匀动方向
this.direct = "right";
//初始的身体，用数组来储存蛇的身体
this.body = [
{x:5,y:3,color:"blue"},
{x:4,y:3,color:"red"},
{x:3,y:3,color:"red"}];
//蛇显示
this.display = function(){
//每一个身体元素分别显示
for(var i=0;i<this.body.length;i++){
var newsnake = document.createElement("div");
newsnake.style.width = this.w + "px";
newsnake.style.height = this.h + "px";
newsnake.style.backgroundColor = this.body[i].color;
newsnake.style.position = "absolute";
newsnake.style.left = (this.w*this.body[i].x)+"px";
newsnake.style.top = (this.h*this.body[i].y)+"px";
document.getElementById("map").appendChild(newsnake);
//标记已有的身体元素，以便删除和添加新的身体元素
this.body[i].div = newsnake;
}
}
//移动蛇
this.move = function(){
//移动蛇身，从尾部向前依次移动一格
for(var i=this.body.length-1;i>0;i--){
this.body[i].x = this.body[i-1].x;
this.body[i].y = this.body[i-1].y;
}
//移动蛇头
switch(this.direct){
case "up":
this.body[0].y-=1;
break;
case "down":
this.body[0].y+=1;
break;
case "left":
this.body[0].x-=1;
break;
case "right":
this.body[0].x+=1;
break;
}
//删除移动之前的身体元素
this.removeSnake();
//重新显示新的身体元素
this.display();
//撞墙死亡
if(this.body[0].x<0 || this.body[0].x>39 || this.body[0].y<0 || this.body[0].y>19){
alert("Game Over!")
clearInterval(snake_id);
}
//撞自己死亡，前四个元素不能撞到自己
for(var i=this.body.length-1;i>=4;i--){
if(this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y){
alert("Game Over!")
clearInterval(snake_id);
break;
}
}
//吃食物，添加新的身体元素
if(this.body[0].x == food.x && this.body[0].y == food.y){
this.body[this.body.length] = {x:0,y:0,color:"red",div:null};
//吃掉食物后刷新食物位置
food.reDisplay();
}
}
//删除之前的身体元素
this.removeSnake = function(){
var map = document.getElementById("map");
for(var i=0;i<this.body.length;i++){
if(this.body[i].div != null){
map.removeChild(this.body[i].div);
}
}
}
//读取键盘，改变方向:37,left; 38,up; 39,right; 40,down.
this.setDirect = function(keycode){
switch(keycode){
case 37:
if(this.direct != "right"){
this.direct="left";
}
break;
case 38:
if(this.direct != "down"){
this.direct="up";
}
break;
case 39:
if(this.direct != "left"){
this.direct="right";
}
break;
case 40:
if(this.direct != "up"){
this.direct="down";
}
break;
}
}
}
浙公网安备 33010602011771号