JS+html+css实现的一个小小的贪吃蛇游戏

提前声明,我做的这个游戏有个BUG,目前我无法解决。BUG为,同一个方向连续按两次以上,会使得贪吃蛇或者一种“神功”。

代码如下(阁下如果需要复制粘贴过去试一下效果的话,务必把代码中所有的路径都修改一下,别问为什么。)

思路为:

建立一个大大的div,然后这个div里面有20x30=600个小div。

蛇的走动,是靠一个数组来实现。这个数组储存着蛇身子每个部分所在的div的ID,每走一步,就把前面的传递给后面的。比如把第3号的数据传给第2号,第2号的数据传给第1号,第一号是指蛇头的头部,数组的第一个怎么变?这得看是蛇是向哪个方向动啦!


<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇消除无聊时光!</title>
<meta charset="utf-8">


<style>
div{
height:1.9rem;
width:1.9rem;
padding:0;
margin:0;
border:0.05rem solid purple;
box-sizing:content-box;
float:left;
border-radius:2%;                                    /* 所有的小div的样式在这里*/
}


p,h2{
text-align:center;
font-size:1.2rem;
}


div#map{
position:absolute;
left:15%;
box-sizing:content-box;
border:12px double purple;
background-origin:content-box;
background-repeat:no-repeat;
background-size:100% 100%;
background-image:url(image/snakebackground.jpg);           /*大div的样式在这里,采用绝对定位*/
padding:0;
margin:0;
width:60rem;
height:40rem;
}
#begin{
display:block;
height:3rem;
width:7rem;
font-size:1.5rem;
border:2px solid black;
background-color:yellow;                      /*这是一个button的样式这个button是用来开始游戏的,它的样式没什么卵用,丢掉也不影响游戏*/
border-radius:30%;
}
</style>
</head>




<body bgcolor="#AAA">
<h2>欢迎来玩消磨时光的贪吃蛇!</h2>
<p>W:控制方向上,A:控制方向左,S:控制方向下,D::控制方向右</p>
<p>按左边的开始游戏按键可以开始游戏</p>






<div id="map">


</div>



<script>


var x=document.getElementById("map");
for(var i=0;i<600;i++){
var onecell=document.createElement("div");
x.appendChild(onecell);
}                                                                                                   //创建600个div子元素


var y=document.getElementsByTagName("div");                              


for(var i=1;i<601;i++){
var temp="";
if((i-1)%30+1<10){
temp="0"+((i-1)%30+1);
y[i].id=Math.ceil(i/30)+"."+temp;}
else{y[i].id=Math.ceil(i/30)+"."+((i-1)%30+1);}
y[i].style.color="gray";
y[i].style.textAlign="center";
y[i].style.lineHeight="2rem";                      //给这600个子元素添加ID名,这个ID名的格式是xx.xx,前面的xx是第×行的意思,后面的xx是第几列的意思,以及一些样式
}






for(var i=1;i<31;i++){
if(i<10){
var z=document.getElementById(1+".0"+i);
z.style.backgroundImage="url(image/boom.jpg)"; }
else{
z=document.getElementById(1+"."+i);
z.style.backgroundImage="url(image/boom.jpg)"; }      
}
for(var i=1;i<31;i++){
if(i<10){
var z=document.getElementById(20+".0"+i);
z.style.backgroundImage="url(image/boom.jpg)";}
else{
var z=document.getElementById(20+"."+i);
z.style.backgroundImage="url(image/boom.jpg)";
}
}
for(var i=2;i<20;i++){
var z=document.getElementById(i+".01");
z.style.backgroundImage="url(image/boom.jpg)";
}
for(var i=2;i<20;i++){
var z=document.getElementById(i+"."+30);
z.style.backgroundImage="url(image/boom.jpg)";
}                                                                                                         //   这4个for循环,目的是给四边放上炸弹,变得好看,表示边界。


var mySnake=new Array();
mySnake[0]="11.07";
mySnake[1]="11.06";
mySnake[2]="11.05";
var snakeHead=document.getElementById(mySnake[0]);
snakeHead.style.backgroundImage="url(image/huaji.jpg)";
var snakeBody1=document.getElementById(mySnake[1]);
snakeBody1.style.backgroundColor="red";
var snakeBody2=document.getElementById(mySnake[2]);
snakeBody2.style.backgroundColor="red";                                             //初始化蛇的位置


function startright(){
document.getElementById(mySnake[0]).style.backgroundImage="";
for(var i=1;i<mySnake.length;i++){
document.getElementById(mySnake[i]).style.backgroundColor="";
}
for(var i=mySnake.length;i>=2;i--){
mySnake[i-1]=mySnake[i-2];
}
mySnake[0]=((mySnake[0]*100+1)/100).toFixed(2)+'';         //一定要保留两位数字,比如11.20变成11.2,找不到ID
if(mySnake[0]*100%100>29){
clearInterval(right);
alert("Game Over!"+" "+" "+'你的战绩为:'+mySnake.length);
document.write("<a href='../贪吃蛇/index.html'>重新开始</a>");
}
document.getElementById(mySnake[0]).style.backgroundImage="url(image/huaji.jpg)";
for(i=1;i<mySnake.length;i++){
document.getElementById(mySnake[i]).style.backgroundColor="red";                                                  //  这是控制蛇向右走的函数,并且触碰边界,会死..
}
}


function startleft(){
document.getElementById(mySnake[0]).style.backgroundImage="";
for(var i=1;i<mySnake.length;i++){
document.getElementById(mySnake[i]).style.backgroundColor="";
}
for(var i=mySnake.length;i>=2;i--){
mySnake[i-1]=mySnake[i-2];
}
mySnake[0]=((mySnake[0]*100-1)/100).toFixed(2)+'';                                //一定要保留两位数字,不然11.20会变成11.2,找不到ID
if(mySnake[0]*100%100<2){
clearInterval(left);
alert("Game Over!"+" "+" "+'你的战绩为:'+mySnake.length);
document.write("<a href='../贪吃蛇/index.html'>重新开始</a>");
}
document.getElementById(mySnake[0]).style.backgroundImage="url(image/huaji.jpg)";                                   //  这是控制蛇向左走的函数,并且触碰边界,会死..
for(i=1;i<mySnake.length;i++){
document.getElementById(mySnake[i]).style.backgroundColor="red";
}
}


function startup(){
document.getElementById(mySnake[0]).style.backgroundImage="";
for(var i=1;i<mySnake.length;i++){
document.getElementById(mySnake[i]).style.backgroundColor="";
}
for(var i=mySnake.length;i>=2;i--){
mySnake[i-1]=mySnake[i-2];
}
mySnake[0]=(parseFloat(mySnake[0])-1).toFixed(2)+''; //一定要保留两位数字,不然11.20会变成11.2,找不到ID
if(mySnake[0]<2){
clearInterval(up);
alert("Game Over!"+" "+" "+'你的战绩为:'+mySnake.length);
document.write("<a href='../贪吃蛇/index.html'>重新开始</a>");
}
document.getElementById(mySnake[0]).style.backgroundImage="url(image/huaji.jpg)";
for(i=1;i<mySnake.length;i++){
document.getElementById(mySnake[i]).style.backgroundColor="red";                                               //  这是控制蛇向上走的函数,并且触碰边界,会死..
}
}


function startdown(){
document.getElementById(mySnake[0]).style.backgroundImage="";
for(var i=1;i<mySnake.length;i++){
document.getElementById(mySnake[i]).style.backgroundColor="";
}
for(var i=mySnake.length;i>=2;i--){
mySnake[i-1]=mySnake[i-2];
}
mySnake[0]=(parseFloat(mySnake[0])+1).toFixed(2)+''; //一定要保留两位数字,不然11.20会变成11.2,找不到ID
if(mySnake[0]>20){
clearInterval(down);
alert("Game Over!"+" "+" "+'你的战绩为:'+mySnake.length);                                                                        //  这是控制蛇向下走的函数,并且触碰边界,会死..
document.write("<a href='../贪吃蛇/index.html'>重新开始</a>");
}
document.getElementById(mySnake[0]).style.backgroundImage="url(image/huaji.jpg)";
for(i=1;i<mySnake.length;i++){
document.getElementById(mySnake[i]).style.backgroundColor="red";
}
}


right=setInterval("startright()",300);
left=setInterval("startleft()",300);
down=setInterval("startdown()",300);
up=setInterval("startup()",300);
clearInterval(up);
clearInterval(left);
clearInterval(down);
clearInterval(right);
 
function start(){
up=setInterval("startup()",300);
var bb=document.getElementById("begin");
bb.style.backgroundColor="red";
setInterval("createFood()",3000);
document.οnkeydοwn=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode==68){   // 按 D/d 那就往右走
right=setInterval("startright()",300);
clearInterval(up);
clearInterval(left);
clearInterval(down);
}else if(e && e.keyCode==65){             // 按 A/a 那就往左走
left=setInterval("startleft()",300);
clearInterval(right);
clearInterval(up);
clearInterval(down);}
else if(e && e.keyCode==83){            // 按 S/s 那就往下走
down=setInterval("startdown()",300);
clearInterval(right);
clearInterval(left);
clearInterval(up);}
else if(e && e.keyCode==87){            // 按 W/w 那就往上走
up=setInterval("startup()",300);
clearInterval(right);
clearInterval(left);
clearInterval(down);}
};
}


function back(){
var bb=document.getElementById("begin");
bb.style.backgroundColor="yellow";                  //这个是控制button的样式的JS代码,没什么卵用,可以不看
}



var checking=new Array();
checking[0]="useless";
function createFood(){
var idone=Math.floor(Math.random()*18+2);
var idtwo=Math.floor(Math.random()*28+2);
if(idtwo<10){
idtwo="0"+idtwo;
}                                                                                             //  随机生成食物的函数
var idAll=idone+"."+idtwo;
var food=document.getElementById(idAll);
food.style.backgroundImage="url(image/food.jpg)";
checking[checking.length]=idAll;
}




function check(){
for(i=1;i<checking.length;i++){
if(mySnake[0]==checking[i]){
mySnake[mySnake.length]=checking[i];         //检查头部有没有碰到生成的食物,碰到就是吃到的意思。
checking[i]='';}
}
setTimeout("check()",50);
}
check();


</script>


<button οnmοusedοwn="start()" id="begin" οnmοuseup="back()">开始游戏</button>
</body>
</html>

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页