简单贪吃蛇游戏js
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单贪吃蛇游戏js相关的知识，希望对你有一定的参考价值。
新手，仿照别人的写的。只能实现简单的功能，代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #box{ 12 position: absolute; 13 left: 0; 14 top: 0; 15 right: 0; 16 bottom: 0; 17 width: 400px; 18 height: 400px; 19 margin: auto; 20 border: 1px solid #EEEEEE; 21 background-color: #F4F4F4; 22 } 23 span{ 24 border: 1px solid #EEEEEE; 25 display: block; 26 float: left; 27 box-sizing: border-box; 28 } 29 .snake{ 30 position: absolute; 31 background-color: palegreen; 32 } 33 .food{ 34 position: absolute; 35 background-color: orange; 36 border-radius: 10px; 37 } 38 </style> 39 </head> 40 <body> 41 <div id="box"> 42 43 </div> 44 <script> 45 var box=document.getElementById(‘box‘); 46 var cell={ 47 width:20, 48 height:20 49 }; 50 var snakeArr=[]; 51 var pos={ 52 right:0, 53 left:1, 54 top:2, 55 bottom:3 56 }; 57 var dir=pos.right; 58 //初始化地图 59 function map(){ 60 var cols=Math.floor(box.offsetWidth / cell.width); 61 var rows=Math.floor(box.offsetHeight / cell.height); 62 var num=cols*rows; 63 for(var i=0;i<num;i++) 64 { 65 span=document.createElement(‘span‘); 66 span.style.width=cell.width+‘px‘; 67 span.style.height=cell.height+‘px‘; 68 box.appendChild(span); 69 } 70 } 71 map(); 72 //创建蛇 73 function Snake(){ 74 for(var i=0;i<3;i++) 75 { 76 snake=document.createElement(‘span‘); 77 snake.style.width=cell.width+‘px‘; 78 snake.style.height=cell.height+‘px‘; 79 snake.style.left=i*cell.width+‘px‘; 80 box.appendChild(snake); 81 snake.className=‘snake‘; 82 snakeArr.push(snake); 83 } 84 } 85 Snake(); 86 //创建食物 87 function Food(){ 88 food=document.createElement(‘span‘); 89 food.style.width=cell.width+‘px‘; 90 food.style.height=cell.height+‘px‘; 91 var top=null; 92 do{ 93 left=Math.floor((box.offsetWidth-2)/cell.width*Math.random())*cell.width; 94 top=Math.floor((box.offsetHeight-2)/cell.height*Math.random())*cell.height; 95 }while(isSnakeBody(left,top)); 96 food.style.left=left+‘px‘; 97 food.style.top=top+‘px‘; 98 food.className=‘food‘; 99 box.appendChild(food); 100 } 101 function isSnakeBody(left,top){ 102 for(var i=0;i<snakeArr.length;i++) 103 { 104 if(snakeArr[i].offsetLeft==left&&snakeArr[i].offsetTop==top) 105 { 106 return true; 107 } 108 } 109 } 110 Food(); 111 //蛇的移动 112 function snakeMove(){ 113 var head=snakeArr[snakeArr.length-1]; 114 var newtop=head.offsetTop; 115 newleft=head.offsetLeft; 116 switch(dir){ 117 case pos.left: 118 newleft-=cell.width; 119 break; 120 case pos.right: 121 newleft+=cell.width; 122 break; 123 case pos.bottom: 124 newtop+=cell.height; 125 break; 126 case pos.top: 127 newtop-=cell.height; 128 break; 129 default: 130 break; 131 } 132 for(var i=0;i<snakeArr.length-1;i++) 133 { 134 snakeArr[i].style.left=snakeArr[i+1].offsetLeft+‘px‘; 135 snakeArr[i].style.top=snakeArr[i+1].offsetTop+‘px‘; 136 } 137 //吃食物 138 if(newleft==food.offsetLeft&&newtop==food.offsetTop) 139 { 140 food.className=‘snake‘; 141 snakeArr.push(food); 142 Food(); 143 return ; 144 } 145 //蛇是否碰到自己的身体 146 for(var i=0;i<snakeArr.length-1;i++) 147 { 148 if(snakeArr[i].offsetLeft==newleft&&snakeArr[i].offsetTop==newtop) 149 { 150 alert(‘游戏结束！‘); 151 window.location.href=window.location.href; 152 } 153 head.style.left=newleft+‘px‘; 154 head.style.top=newtop+‘px‘; 155 } 156 //超出边界 157 if(newleft>box.offsetWidth-2-1||newtop>box.offsetHeight-2-1||newleft<0||newtop<0) 158 { 159 alert(‘游戏结束！‘); 160 window.location.href=window.location.href; 161 } 162 } 163 //键盘控制蛇的移动 164 document.onkeyup=function(e){ 165 switch(e.keyCode){ 166 case 37: 167 dir=pos.left; 168 break; 169 case 38: 170 dir=pos.top; 171 break; 172 case 39: 173 dir=pos.right; 174 break; 175 case 40: 176 dir=pos.bottom; 177 break; 178 } 179 } 180 setInterval(snakeMove,500); 181 </script> 182 </body> 183 </html>
以上是关于简单贪吃蛇游戏js的主要内容，如果未能解决你的问题，请参考以下文章
手把手教你完成第一个JS项目：用简单到极致的贪吃蛇游戏熟悉JS语法