小白记录~学习JAVA一个多月 使用js写出简易版贪吃蛇

于 2017-03-13 21:00:26 发布
阅读量453 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q574689376/article/details/61927693
版权

没有百度哦

其实有  哈哈   不过是百度一些js事件  

最自豪的就是1小时多想出了蛇移动的方法

虽然我也不知道是快是慢

自我感觉挺快的   所以认为这脑子不能浪费  好好敲代码得意

允许我自己对自己装一下  哈哈


蛇移动的核心就是把最后一张图片变为第一张


代码比较简陋   但注释都有    见谅


jsp代码  (图片是一张10*10像素的  name="1.png"

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
	div{
		width:800px; height:600px;border:2px solid red;background-color:black;
	}	
	body{
		overflow:hidden;
	}
</style>
</head>
<body  οnkeydοwn="remove(event)">
<div id="a" >
	<img id="1" src="1.png" style="position:absolute;top:280;left:380px">
	<img id="cba" src="1.png" style="position:absolute;top:280;left:300px">
	
	
	 
</div>
</body>
<script language="javascript">
	//初始化随机出现的坐标
	var L;
	var T;
	//初始化头出现的坐标
	var Left = 380;
	var Top = 280;
	//标记第二个的id
	var index=1;
	//标记最后一个的id
	var i=2;
	//初始化自动移动的方向的ID,以便于下一次按键后,上一次的自动可以清除
	var ID=null;
	//初始化相反的移动方向
	var key=null;
		//随机添加食物
		function removecba(){
			//取俩个随机数并设置坐标
			L=Math.ceil(Math.random()*80)*10;
			T=Math.ceil(Math.random()*60)*10;
			var cba=document.getElementById("cba");
			cba.style.left=L;
			cba.style.top=T;
		}
		removecba();
		//吃到食物后增加图片的方法
		function addimg(){
				var img=document.createElement("img");
				fff=document.getElementById("a");
				img.setAttribute("src","1.png");
				img.style.position="absolute";
				img.style.left=Left;
				img.style.top=Top;
				fff.appendChild(img);
				var test=document.getElementById("1");
				index=index+1;
				test.id=index;
				img.setAttribute("id","1");
		}
		//移动的方向
		function removeL(){
			if(Left!=10){
				if(Left==L&&Top==T){
					removecba();
					addimg();
				}
				var test=document.getElementById("1");
				Left-=10;
				test.style.left=Left+"px";
			}else{
				clearInterval(ID);
				window.alert("游戏结束");
			}
		}
		function removeT(){
			if(Top!=10){
				if(Left==L&&Top==T){
					removecba();
					addimg();
				}
				var test=document.getElementById("1");
				Top -= 10;
				test.style.top=Top+"px";
			}else{
				clearInterval(ID);
				window.alert("游戏结束");
			}
		}
		function removeR(){
			if(Left!=800){
				if(Left==L&&Top==T){
					removecba();
					addimg();
				}
				var test=document.getElementById("1");
				Left+=10;
				test.style.left=Left+"px";
			}else{
				clearInterval(ID);
				window.alert("游戏结束");
			}
		}
		function removeD(){
			
			if(Top!=600){
				if(Left==L&&Top==T){
					removecba();
					addimg();
				}
				var test=document.getElementById("1");
				Top += 10;
				test.style.top=Top+"px";
			}else{
				window.alert("游戏结束");
				clearInterval(ID);
			}
		}
		function removeLL(){
			//判断是否撞上墙壁
			if(Left!=10){
				//当蛇头的坐标与食物的坐标完全重合时,重新出现一个食物
				if(Left==L&&Top==T){
					//调用出现食物的方法
					removecba();
					//调用增加长度的方法
					addimg();
				}
				//取得蛇头与最后一个
				var test=document.getElementById("1");
				var testT=document.getElementById(i++);
				//对下一次蛇头所在位置进行计算
				Left-=10;
				//将最后一个的坐标设置为计算好的蛇头所在位置
				testT.style.left=Left+"px";
				testT.style.top=Top+"px";
				//将新的蛇头id设置为1
				testT.id="1";
				index++;
				//将原来的蛇头id设置为index
				test.id=index;
				//每次移动完调用此方法判断是否撞上自身
				myself();
			}else{
				clearInterval(ID);
				window.alert("游戏结束");
			}
		}
		function removeTT(){
			if(Top!=10){
				if(Left==L&&Top==T){
					removecba();
					addimg();
				}
				var test=document.getElementById("1");
				var testT=document.getElementById(i++);
				Top -= 10;
				testT.style.top=Top+"px";
				testT.style.left=Left+"px";
				testT.id="1";
				index++;
				test.id=index;
				myself();
			}else{
				clearInterval(ID);
				window.alert("游戏结束");
			}
		}
		function removeRR(){
			if(Left!=800){
				if(Left==L&&Top==T){
					removecba();
					addimg();
				}
				var test=document.getElementById("1");
				var testT=document.getElementById(i++);
				Left+=10;
				testT.style.left=Left+"px";
				testT.style.top=Top+"px";
				testT.id="1";
				index++;
				test.id=index;
				myself();
			}else{
				clearInterval(ID);
				window.alert("游戏结束");
			}
		}
		function removeDD(){
			
			if(Top!=600){
				if(Left==L&&Top==T){
					removecba();
					addimg();
				}
				var test=document.getElementById("1");
				var testT=document.getElementById(i++);
				Top += 10;
				testT.style.top=Top+"px";
				testT.style.left=Left+"px";
				testT.id="1";
				index++;
				test.id=index;
				myself();
			}else{
				window.alert("游戏结束");
				clearInterval(ID);
			}
		}
		//接收键盘指令并开始自动移动
		function remove(event){
			var sum=event.keyCode;
			if(index==1){
					//判断是否为上一次的相反方向,如果是,此次返回false,按键不响应
					if(sum==key){
						return false;
					}
					else if(sum==37){
						//每次按键根据ID清除上一次的自动移动
						clearInterval(ID);
						//每次设置为相反方向
						key=39;
						removeL()
						//设置自动移动
						ID=setInterval("removeL()",500);
					}else if(sum==38){
						clearInterval(ID);
						key=40;
						removeT();
						ID=setInterval("removeT()",500);
					}else if(sum==39){
						clearInterval(ID);
						key=37;
						removeR();
						ID=setInterval("removeR()",500);
					}else if(sum==40){
						clearInterval(ID);
						key=38;
						removeD();
						ID=setInterval("removeD()",500);
					//如果不是上下左右四个键,弹出对话框,游戏暂停
					}else{
					window.alert("游戏暂停,点击确认恢复");	
					}
			}else{
					
					if(sum==key){
						return false;
					}
					
					else if(sum==37){
						clearInterval(ID);
						key=39;
						removeLL();
						ID=setInterval("removeLL()",150);
					}else if(sum==38){
						clearInterval(ID);
						key=40;
						removeTT();
						ID=setInterval("removeTT()",150);
					}else if(sum==39){
						clearInterval(ID);
						key=37;
						removeRR();
						ID=setInterval("removeRR()",150);
					}else if(sum==40){
						clearInterval(ID);
						key=38;
						removeDD();
						ID=setInterval("removeDD()",150);
					}else{
					window.alert("游戏暂停,点击确认恢复");
					}
				}
		}
		//碰到自己
		function myself(){
			//根据蛇身长度用for循环依次判断蛇头与蛇身任意一张图片是否重合
			for(var k=i;k<index;k++){
				var t1=document.getElementById("1");
				var t2=document.getElementById(k);
				if(t1.style.top==t2.style.top&&t1.style.left==t2.style.left){
				window.alert("游戏结束");
				}
			}
		}
</script>
</html>



                

        

        

    




    

      

        

            

              
                
                  各种被占用
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










              

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值