JavaScript实现贪吃蛇（附带代码）

最新推荐文章于 2024-05-02 14:46:08 发布

XueDinge_Cat

最新推荐文章于 2024-05-02 14:46:08 发布

阅读量682

点赞数 4

分类专栏： javascript

本文链接：https://blog.csdn.net/XueDinge_Cat/article/details/89647026

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
<head>
	<title>eat_snake</title>
</head>
<style type="text/css">
	#D1{
        width: 600px;
        height: 600px;
        background: #aa22ff;
        margin-left: 450px;
	}
	.D2{
		width: 6px;
		height: 6px;
		background: #000;
		float: left;
	}
    h1{
    text-align: center;
    }

</style>
<body>
	<h1>WSAD移动</h1>
 <div id="D1">
 	 

 </div>

<script type="text/javascript">
 window.onload = function () {
  var str='';
  for(var i=0; i<10000 ;i++){
   str += "<div class='D2'></div>"; //拼接str
  }
  document.getElementById('D1').innerHTML=str;
  var x=document.getElementsByClassName('D2');
  var n=1;
  var list = [];
  list.push(0);
  list.push(1);
  list[0]=1;

  //alert(list.length);

  var dom=Math.round(Math.random()*9998);

 function first(){
 	for(var i=0; i<10000 ;i++){
        x[i].style.background="#000";
    }
      if(dom%5==1){
      	x[dom].style.background="#aaa";
      }
      if(dom%5==2){
      	x[dom].style.background="#cdf";
      }
      if(dom%5==3){
      	x[dom].style.background="#d56";
      }
      if(dom%5==4){
      	x[dom].style.background="#442";
      }
      if(dom%5==0){
      	x[dom].style.background="#aa2";
      }
      
    
    if(dom==n){
      for(var le=list.length+1;le>0;){
   	le--;
   	if(le==0){
      list[0]=dom;
   	}else{
   		if(le==list.length){
          list.push(list[le-1]);
   		}
     list[le]=list[le-1];
   	}
   	
   }
     white();
    }
    for(var le=list.length;le>0;){
   	le--;
   	if(le==1||le==0){
      
   	}else{
    if(n==list[le]){
       alert("游戏结束");
       window.location.reload();
    }
   	}
   }
    if(n<0||n>10000){
       alert("游戏结束");
       window.location.reload();
    }
 }
 function go1(){
   first();
   n++;
   for(var le=list.length;le>0;){
   	le--;
   	if(le==0){
      list[0]=n;
      x[list[0]].style.background="#a00";
   	}else{
     list[le]=list[le-1];
      x[list[le]].style.background="#fff";
   	}
   	
   }
	
   
 } 
  function go2(){
   first();
   n+=100;  
   for(var le=list.length;le>0;){
   	le--;
   	if(le==0){
      list[0]=n;
      x[list[0]].style.background="#a00";
   	}else{
     list[le]=list[le-1];
      x[list[le]].style.background="#fff";
   	}
   	
   }
 }
function go3(){
   first();
   n-=100;
   	 for(var le=list.length;le>0;){
   	le--;
   	if(le==0){
      list[0]=n;
      x[list[0]].style.background="#a00";
   	}else{
     list[le]=list[le-1];
      x[list[le]].style.background="#fff";
   	}
   	
   }

 } 
 function go4(){
   first();
   n--; 
    for(var le=list.length;le>0;){
   	le--;
   	if(le==0){
      list[0]=n;
      x[list[0]].style.background="#a00";
   	}else{
     list[le]=list[le-1];
      x[list[le]].style.background="#fff";
   	}
   	
   }
 } 

 var t = window.setInterval(go1,80); 
 //产生随机白色

 function white(){
   dom=Math.round(Math.random()*9998);
 }
 var key=100;
//去掉定时器的方法 
//window.clearInterval(t1); 
window.onkeypress=function (e) {
             //  alert(e.key)//弹出按键对应的字母
              // alert(e.keyCode)
                if (e.charCode==119){
                    //w
                    if(key!=115){
                    	 window.clearInterval(t);
                   t = window.setInterval(go3,80); 
                    }
                   
                }
                if (e.charCode==115){
                    //s
                    if(key!=119){
                     window.clearInterval(t);
                     t = window.setInterval(go2,80); 
                    }
                
                }
                if (e.charCode==97){
                    //a
                    if(key!=100){
                     window.clearInterval(t);
                     t = window.setInterval(go4,80); 
                    }
                  
                }
                if (e.charCode==100){
                   //d
                   if(key!=97){
                    window.clearInterval(t);
                   t = window.setInterval(go1,80);
                   } 
                }
                 
               key=e.charCode;

            
            }

 }

</script>
</body>
</html>

主要是利用了div+js实现了贪吃蛇小游戏。

包括界面判定，自身的撞击判定，反方向无法移动，吃食物变长等。

代码只是闲来无事写着玩，没怎么优化，但功能基本全面。

整理一下思路吧：

首先我是怎么实现移动的呢，我抓住了一个点，就是蛇头，让蛇头的值保持是n，控制n的变化就可以移动了。

如何让蛇身保持移动的状态呢，我注意到一个细节，就是每后一格的移动都是前一个的状态，所以我建立了集合list

把所有元素都保存在集合里，通过（可以理解位数组的后移），把所有的前一秒的状态往后移一格。我觉得这里是我最聪慧的地方了。

然后自身的撞击判定是检查n在和第二格以后的元素有没有重叠的情况。可能有个小bug但不重要

检测按键前的运动状态是根据保存的上次的键值key来实现的。

效果图：

XueDinge_Cat

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现贪吃蛇（附带代码）

<!DOCTYPE html><html><head> <title>eat_snake</title></head><style type="text/css"> #D1{ width: 600px; height: 600px; backgroun...
复制链接

扫一扫