##之前一直想写个贪吃蛇,在网上也没找到可以借鉴的js代码,看见有大神用二十多行就实现了,可惜自己还不会也完全看不懂,于是自己用JS琢磨了两三天,也算是实现了基本功能,莫约两百多行代码,分享出来与大家一起交流。
直接上效果图:
##饶了一些弯路,因为我是将所有的div都一致化,在之后为了区别边界,又不得不又多套了一个div,前期布局的时候可以将边界和内部的活动区域提前利用属性区别开来。
上代码:
(界面布局)
<body>
<div class="Lbody">
<div class="Mbody01">
<div class="Sbody01"><h1>贪吃蛇</h1></div>
<div class="Sbody02">
<div class="bound">
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
</div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="bound"><div class="Xbody01"></div></div>
<div class="bound">
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
<div class="Xbody01"></div>
</div>
</div>
</div>
<div class="Mbody02">
<div class="Sbody03">
<h1>挑战难度</h1>(默认为简单模式)
</div>
<div class="Xbody01" id="1">简单</div>
<div class="Xbody01" id="2">中等</div>
<div class="Xbody01" id="3">困难</div>
<h3>时间:0秒</h3>
<h3>果实:0个</h3>
</div>
</div>
<div class="Mbody03">
<input type="button" value="开始" id="start" />
<input type="button" value="暂停" id="pause" />
<input type="button" value="结束" id="end" />
</div>
</body>
</html>
(CSS样式):
<style>
.Lbody{width: 710px;height: 510px;border: 1px solid firebrick;background-color: salmon;}
.Mbody01{width: 508px;height: 508px;border: 1px solid firebrick;float: left;}
.Mbody02{width: 200px;height: 508px;float: left;text-align: center;}
.Mbody03{width: 710px;height: 110px;border: 1px solid firebrick;text-align: center;line-height: 100px;background-color: salmon;}
.Sbody01{width: 504px;height: 100px;border: 1px solid firebrick;text-align: center;}
.Sbody02{width: 504px;height: 400px;border: 1px solid firebrick;}
.Mbody01 .Xbody01{width: 34px;height: 34px;border: 1px solid whitesmoke;float: left;background-color: #C4E3F3;}
.Mbody02 .Xbody01{width: 193px;height: 88px;line-height: 88px;background-color: cornsilk;border: solid white;}
.Mbody02 .Sbody03{height: 82px;margin: 10px;}
.Mbody03 input{width: 60px;margin: auto 50px;}
</style>
(jsp程序实现)
<script>
var time1;
var time2;
var ram1;
var ram2;
var speed=500;
var lon;
var varl01;
var varl02;
var varl03;
var count;
var getTime;
var snake;
var getResult;
var num;
$(function(){
init1();
$(".Mbody03 input").on("click",function(){
$(".Mbody03 input").attr("disabled",false);
$(this).attr("disabled",true);
varl01=$(this).attr("id");
switch(varl01){
case "start":init1();$(".Mbody03 #pause").attr("disabled",false);$(".Mbody02 .Xbody01").off("click");contrl();break;//开始按钮,主要程序在control里。
case "pause":$(this).attr("disabled",false);$(this).attr("id","goon");$(this).val("继续");clearInterval(time1);clearInterval(time2);break;//暂停按钮
case "goon":$(this).attr("disabled",false);$(this).attr("id","pause");$(this).val("暂停");contrl();break;//继续按钮
default :gameOver();//结束游戏按钮
}
})
})
function gameOver(){
alert("游戏结束!共坚持"+getTime/1000+"秒"+" 吃到果实"+count+"个");
init1();
$(".Mbody03 input").attr("disabled",true);
$(".Mbody03 input").first().attr("disabled",false);
}
function start(num1,num2){
switch(num2){
case 0:/num1++;break;
case 1:num1--;break;
case 2:num1+=14;break;
default:num1-=14;
}
return num1;
}
function left(num1,num2){
update();
if(snake.length<lon){//初始化一条蛇,用数组储存;
for(var i=0;i<lon;i++){
if(i==0){
$(".Mbody01 .Sbody02 .Xbody01").eq(num1).css("background-color","red");
}else{
$(".Mbody01 .Sbody02 .Xbody01").eq(num1).css("background-color","coral");
}
snake[i]=num1;
num1=start(num1,num2); //初始化的运动轨迹。
}
}else{//实现蛇的移动
for(var i=lon-1;i>=0;i--){
if(i==0){
snake[i]=num1;
$(".Mbody01 .Sbody02 .Xbody01").eq(snake[i]).css("background-color","red");
}else{
if(snake[0]==snake[i]){
gameOver();return;
}
snake[i]=snake[i-1];
$(".Mbody01 .Sbody02 .Xbody01").eq(snake[i]).css("background-color","coral");
}
}
}
if(getResult==-1){//出现果实
getResult=isBound();
}
if(snake[0]==getResult){ //咬到果实
count++;
snake[lon]=snake[lon-1];
lon++;
getResult=-1;
}
}
function leftGo(){
switch (ram2){
case 0:
case 1:
$(document).keypress(function(event){//左右方向移动只能控制上下键,我设置的是笔记本键盘上的W/S键,
switch(event.keyCode){
case 119:ram2=2;break;
case 115:ram2=3;break;
}
$(this).off("keypress");
})
break;
case 2:
default:
$(document).keypress(function(event){//上下方向只能控制左右键,我设置的是笔记本键盘的A/D键。
switch(event.keyCode){
case 97:ram2=0;break;
case 100:ram2=1;break;
}
$(this).off("keypress");
})
break;
}
varl01=$(".Mbody01 .Sbody02 .Xbody01").eq(ram1).parent().attr("class");
if(varl01=="bound"){//如果触碰到边界游戏结束。
gameOver();
}else{
ram1=start1(ram1,ram2);//根据上面的操作控制蛇的移动方向;
left(ram1,ram2);
}
}
function start1(num1,num2){
switch(num2){
case 0:num1-=1;break;
case 1:num1+=1;break;
case 2:num1-=14;break;
default:num1+=14;
}
return num1;
}
function isBound(){//判断蛇头是否选点是否在边界上,如果之前布局只包含了内部活动区域,边界就可以不用判断。
num=Math.round(Math.random()*153);
varl01=$(".Mbody01 .Sbody02 .Xbody01").eq(num).parent().attr("class");
for(var i=0;i<lon;i++){
if(snake[i]==num||varl01=="bound"){//果实不能出现在蛇身上
num=Math.round(Math.random()*153);
return isBound();
}
}
return num;
}
function update(){//更新页面状态
$(".Mbody01 .Sbody02 .Xbody01").css("background-color","#C4E3F3");
$(".Mbody01 .Sbody02 .bound").children().css("background-color","#1B6D85");
if(getResult!=-1){
$(".Mbody01 .Sbody02 .Xbody01").eq(getResult).css("background-color","yellow");
}
}
function contrl(){
left(ram1,ram2);
time1=setInterval("leftGo()",speed);//蛇移动的程序
time2=setInterval(function(){//计时器
getTime+=100;
varl03+=100;
varl02=getTime/1000;
varl03=(varl03==1000)?0:varl03;
varl02=varl02<10?("0"+varl02):varl02;
if(varl03==0){
$(".Mbody02 h3").eq(0).html("时间:"+varl02+".0"+"秒");
}else{
$(".Mbody02 h3").eq(0).html("时间:"+varl02+"秒");
}
varl02=count<10?("0"+count):count;
$(".Mbody02 h3").eq(1).html("果实:"+varl02+"个");
},100);
}
function init1(){//游戏初始化。
count=0;
varl03=0;
lon=3;
getTime=0;
getResult=-1;
snake=new Array();
$(".Mbody02 .Xbody01").eq(0).css("background-color"," #C4E3F3");
$(".Mbody02 .Xbody01").on("click",function(){//难度选择事件
$(".Mbody02 .Xbody01").css("background-color","cornsilk");
$(this).css("background-color"," #C4E3F3")
varl01=$(this).attr("id");
switch(varl01){
case "1":speed=500;break;
case "2":speed=250;break;
case "3":speed=100;break;
default:500;
}
})
switch(speed){
case 100:speed=100;break;
case 500:speed=500;break;
case 250:speed=250;break;
default:500;
}
$(".Mbody03 #goon").attr("id","pause");
$(".Mbody03 #pause").attr("disabled",true);
$(".Mbody03 #pause").val("暂停");
ram2=Math.round(Math.random()*3);
update();
ram1=isBound();
clearInterval(time1);
clearInterval(time2);
}
</script>