贪吃蛇案例
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蛇</title>
<link rel="stylesheet" type="text/css" href="css/demo1.css"/>
<script src="js/demo1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<audio id="music" autoplay="autoplay" loop="loop">
<source src="img/24K Magic Remix Havana (Live).mp3" type="audio/mp3"></source>
</audio>
<div class="wrap">
<div class="div1">贪吃蛇大战</div>
<button id="btn1">开始</button>
<button id="btn2">暂停</button>
<button id="btn3">刷新</button>
<button id="btn4">分数</button>
</div>
</body>
</html>
css部分
.wrap {
position: relative;
}
.div1 {
font-family: "微软雅黑";
font-size: 24px;
text-align: center;
color: lightcoral;
}
#btn1 {
width: 60px;
height: 40px;
background: lightblue;
font-family: "微软雅黑";
font-size: 18px;
color: rosybrown;
font-weight: bold;
position: absolute;
left: 430px;
top: 35px;
}
#btn2 {
width: 60px;
height: 40px;
background: lightblue;
font-family: "微软雅黑";
font-size: 18px;
color: rosybrown;
font-weight: bold;
position: absolute;
left: 600px;
top: 35px;
}
#btn3 {
width: 60px;
height: 40px;
background: lightblue;
font-family: "微软雅黑";
font-size: 18px;
color: rosybrown;
font-weight: bold;
position: absolute;
left: 770px;
top: 35px;
}
#btn4 {
width: 60px;
height: 40px;
background: lightblue;
font-family: "微软雅黑";
font-size: 18px;
color: rosybrown;
font-weight: bold;
position: absolute;
left: 940px;
top: 35px;
}
js部分
//创建地图
var map_01;
//创建食物
var food_01;
//创建蛇
var snake_01;
var times=0;
var speed=prompt('请选择适合自己的速度程度:(1,2,3)');
if(speed==1){
times=300;
}else if(speed==2){
times=200;
}else{
times=50;
}
//定时器
var timer;
定义一个变量来记录分数
var count=0;
var leftEye; //左眼
var rightEye; //右眼
var Music; //音乐
//创建地图对象
function _Map(){
//创建地图属性
this.width=800;
this.height=600;
this.color='black';
//创建一个空元素来存储div元素
this.div_Map=null;
//用一个函数来显示地图
this.display=function(){
//创建地图div
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.position='relative';
this.div_Map.style.left=335+'px';
this.div_Map.style.top=50+'px';
//将地图添加到body中
document.getElementsByTagName('body')[0].appendChild(this.div_Map);
}
}
//创建食物对象
function _Food(){
this.width=20;
this.height=20;
this.div_Food=null;
this.x;
this.y;
//this.color='blue';
//用一个函数显示食物
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.position='absolute';
this.div_Food.style.borderRadius=20+'%';
//将食物放入地图中
map_01.div_Map.appendChild(this.div_Food);
}
this.div_Food.style.background="rgb(" + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + ")";
this.x=Math.round(Math.random()*39);
this.y=Math.round(Math.random()*29);
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='red';
this.direct='right';
leftEye=null;
rightEye=null;
//创建一个二维数组,用来存储蛇以及蛇的相关信息
//null:表示的是分别存储蛇头，蛇身，蛇尾对象（div）
this.body=[
[5,4,null,'plum','eyes'],
[4,4,null,'tomato'],
[3,4,null,'tomato']
];
//用一个函数来显示蛇
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.borderRadius='50%';
this.body[i][2].style.position='absolute';
//将蛇放入地图中
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.background='black';
leftEye.style.borderRadius='50%';
leftEye.style.position='absolute';
rightEye.style.width=5+'px'
rightEye.style.height=5+'px';
rightEye.style.background='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]!=null){ //判断是蛇头
//alert('蛇头不为空');
switch (this.direct){
case 'down':
leftEye.style.left=3+'px';
leftEye.style.top=10+'px';
rightEye.style.left=13+'px';
rightEye.style.top=10+'px';
break;
case 'right':
leftEye.style.top=3+'px';
leftEye.style.left=10+'px';
rightEye.style.top=10+'px';
rightEye.style.left=10+'px';
break;
case 'left':
leftEye.style.top=3+'px';
leftEye.style.left=10+'px';
rightEye.style.top=13+"px";
rightEye.style.left=10+'px';
break;
case 'up':
leftEye.style.left=3+'px';
leftEye.style.top=10+'px';
rightEye.style.left=13+'px';
rightEye.style.top=10+'px';
break;
default:
break;
}
}
}
//创建一个方法来记录蛇的方法
this.setDirect=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--){
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 'up':
this.body[i][1]--;
break;
case 'right':
this.body[i][0]++;
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,"rgb(" + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + ")"]);
food_01.display();
count++;
btn4.innerHTML=count;
timer=setTimeout('snake_01.move();',100);
document.getElementById('score').innerHTML=sum;
}
//判断蛇头碰到边界
if(this.body[0][0]>39 || this.body[0][0]<0 || this.body[0][1]>29 || this.body[0][1]<0){
Music.pause();
alert('Game Over');
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();
timer=setTimeout('snake_01.move();',times);
}
}
window.function(){
Music=document.getElementById('music');
map_01=new _Map();
//加载时，访问对象的方法display()
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.setDirect(event.keyCode);
}
function ById(ids){
return document.getElementById(ids);
}
var btn1=ById('btn1');
var btn2=ById('btn2');
var btn3=ById('btn3');
var btn4=ById('btn4');
btn2.onclick=function(){
clearTimeout(timer);
}
btn1.onclick=function(){
timer=setTimeout('snake_01.move();',times);
}
btn3.onclick=function(){
window.location.reload();
}
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
