思想:
1、设计蛇:属性有宽、高、方向、状态(有多少节),方法:显示,跑
2、设计食物:属性宽、高
3、显示蛇:根据状态向地图里加元素
4、蛇跑起来:下一节到前一节的位置,蛇头根据方向变,删除原来的蛇,新建蛇;当出界时,死亡,初始化;当蛇头吃到自己的时候,死亡,初始化
5、食物被吃掉,蛇加一节,去掉原来的食物,生成新的食物
6、添加定时器,绑定按键
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#wrap{
width: 500px;
height: 150px;
margin: auto;
}
</style>
<script src="js/demo.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="wrap">
<audio id="music" autoplay="autoplay">
<source src="img/yinxiao197.mp3" type="audio/mp3"></source>
</audio>
<h1 >贪吃蛇游戏</h1>
<!-- 暂停按钮 -->
<input id="stop" type="button" name="name" value="暂停">
<!-- 开始按钮 -->
<input id="Start" type="button" name="name" value="开始">
<!-- 刷新(重新开始游戏) -->
<input id="Refresh" type="button" name="name" value="刷新">
<p style="font-size:20px;color:red"> 得分:<span id="score" style="color:black">0</span> </p>
</div>
</body>
</html>
js代码
//创建地图
var map_01;
//食物
var food_01;
//蛇
var snake_01;
//分数
var sum=0;
//音乐
var music;
//定时器
var movetimer;
function _map(){
this.width=600;
this.height=400;
this.color='plum';
this.div_map=null;
this.display=function(){
this.div_map=document.createElement('div');
this.div_map.style.width=this.width+'px';
this.div_map.style.height=this.height+'px';
this.div_map.style.background=this.color;
this.div_map.style.margin='auto';
this.div_map.style.position = 'relative';
document.getElementsByTagName('body')[0].appendChild(this.div_map);
}
}
//创建食物
function _food(){
this.width=20;
this.height=20;
this.color='blue';
this.div_food=null;
this.x;
this.y;
this.display=function(){
if (this.div_food==null) {
this.div_food=document.createElement('div');
this.div_food.style.width=this.width+'px';
this.div_food.style.height=this.height+'px';
this.div_food.style.background=this.color;
this.div_food.style.borderRadius='50%';
this.div_food.style.position = 'absolute';
map_01.div_map.appendChild(this.div_food);
}
this.x=Math.round(Math.random()*29);
this.y=Math.round(Math.random()*19);
this.div_food.style.left=this.x*this.width+'px';
this.div_food.style.top=this.y*this.height+'px';
}
}
//创建蛇
function _snake(){
this.width=20;
this.height=20;
this.color='tomato';
this.direct='right';
var lefteye;
var righteye;
this.body=[[5,4,null,'red','eyes'],[4,4,null,'orange'],[3,4,null,'orange']]
this.display=function(){
for(var i=0;i<this.body.length;i++){
if(this.body[i][2]==null){
this.body[i][2]=document.createElement('div');
this.body[i][2].style.width=this.width+'px';
this.body[i][2].style.height=this.height+'px';
this.body[i][2].style.background=this.body[i][3];
this.body[i][2].style.position='absolute';
this.body[i][2].style.borderRadius='50%';
map_01.div_map.appendChild(this.body[i][2]);
}
this.body[i][2].style.left=this.body[i][0]*this.width+'px';
this.body[i][2].style.top=this.body[i][1]*this.height+'px';
}
if (lefteye==null ||righteye==null) {
lefteye=document.createElement('div');
righteye=document.createElement('div');
lefteye.style.width=5+'px';
lefteye.style.height=5+'px';
lefteye.style.backgroundColor='black';
lefteye.style.borderRadius='50%';
lefteye.style.position='absolute';
righteye.style.width=5+'px';
righteye.style.height=5+'px';
righteye.style.backgroundColor='black';
righteye.style.borderRadius='50%';
righteye.style.position='absolute';
this.body[0][2].appendChild(lefteye);
this.body[0][2].appendChild(righteye);
}
if (this.body[0][2]) {//判断蛇头
switch (this.direct){
case 'right':
lefteye.style.top=3+'px';
lefteye.style.left=8+'px';
righteye.style.top=13+'px';
righteye.style.left=8+'px';
break;
case 'left':
lefteye.style.top=3+'px';
lefteye.style.left=8+'px';
righteye.style.top=13+'px';
righteye.style.left=8+'px';
break;
case 'up':
lefteye.style.top=8+'px';
lefteye.style.left=3+'px';
righteye.style.top=8+'px';
righteye.style.left=13+'px';
break;
case 'down':
lefteye.style.top=8+'px';
lefteye.style.left=3+'px';
righteye.style.top=8+'px';
righteye.style.left=13+'px';
break;
default:
break;
}
}
}
//创建一个方法记录蛇的的方向
this.Direct=function(direct){
switch (direct){
case 37:
this.direct='left';
break;
case 38:
this.direct='up';
break;
case 39:
this.direct='right';
break;
case 40:
this.direct='down';
break;
default:
break;
}
}
//创建一个蛇移动的方法
this.move=function () {
for (var i=this.body.length-1;i>0;i--) {
//alert(this.body.length);
this.body[i][0]=this.body[i-1][0];
this.body[i][1]=this.body[i-1][1];
}
switch (this.direct){
case 'left':
this.body[i][0]--;
break;
case 'right':
this.body[i][0]++;
break;
case 'up':
this.body[i][1]--;
break;
case 'down':
this.body[i][1]++ ;
break;
default:
break;
}
//吃到东西
if(this.body[0][0]==food_01.x &&this.body[0][1]==food_01.y){
//吃完加一节蛇身
var length=this.body.length-1;
var x=this.body[length][0];
var y=this.body[length][1];
this.body.push([x,y,null,'blue']);
food_01.display();
sum++;
document.getElementById('score').innerHTML=sum;
}
//碰墙死
if (this.body[0][0]>29 ||this.body[0][0]<0 ||this.body[0][1]>19 ||this.body[0][1]<0) {
music.pause();
alert('你死了');
return;
}
//吃到自己死
for (var i=1;i<this.body.length;i++) {
if (this.body[0][0]==this.body[i][0] && this.body[0][1]==this.body[i][1]) {
music.pause();
alert('吃到自己死');
return;
}
}
snake_01.display();
movetimer= setTimeout('snake_01.move();',200);
}
}
window.onload=function(){
//音乐
music=document.getElementById('music');
//music.play();
map_01=new _map();
map_01.display();
food_01=new _food();
food_01.display();
snake_01=new _snake();
snake_01.display();
snake_01.move();
document.getElementsByTagName('body')[0].onkeydown=function(event){
snake_01.Direct(event.keyCode);
}
//暂停
var stop = document.getElementById('stop');
stop.onclick=function(){
clearTimeout(movetimer);
}
//开始
var start = document.getElementById('Start');
start.onclick=function(){
clearTimeout(movetimer);
movetimer= setTimeout('snake_01.move();',200);
}
//刷新
var refresh = document.getElementById('Refresh');
refresh.onclick=function(){
window.location.reload();
}
}