使用Javascript来编写贪食蛇（零基础）
引用的东西都很基础，注释也很多，这里就不多说了。
View Snake
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>贪吃蛇</title> 4 <!--css样式--> 5 <style type="text/css"> 6 body{font-size:24px; border:none; cursor:pointer;} 7 #SnakeArea{ width:420px; height:420px; border:#600 solid 2px; margin-top:-15px; margin-left:-10px; background:url(image/23.jpg);} 8 #Menu{background-image:url(image/40.gif); width:200px; height:410px; border:#90C solid 2px; margin-left:420px; margin-top:-410px; color:#FFF; text-align:center;} 9 a{ color:#FFF;text-decoration:none;} 10 .onMouseMove{ text-decoration:underline; font-size:28px; background-color:#90F; border:2px #30F solid;} 11 .onMouseOut{ text-decoration:none; font-size:24px; border: none;} 12 </style> 13 <!--下面是本人使用JavaScript来编写贪吃蛇,课外做的课堂作业,求高手点评出缺点,提出自己的看法意见--> 14 <script type="text/javascript"> 15 var keyValue;//获取键盘键值 16 var snakeId = 0;//蛇身体(控件)的id号 17 var loca = 0;//蛇身(控件)交换的索引 18 var speed = 500;//蛇移动的速度 19 var num = 1;//玩家的积分 20 window.onload = function Lond(){//初始化蛇的位置 21 var leftPoint = 10; 22 for(var i=0;i<3;i++){//初始化蛇的长度 23 var SnakeLond = SnakeBody(); 24 SnakeLond.style.position = "absolute"; 25 SnakeLond.style.top = "100px"; 26 SnakeLond.style.left = leftPoint+"px"; 27 leftPoint += 10; 28 document.body.appendChild(SnakeLond);//把创建的蛇添加到页面上去 29 } 30 Food();//初始化事物 31 } 32 function Random(){//获取食物的随机位置 33 return Math.floor(Math.random()*(40));//生成随机数 34 } 35 function SnakeBody(){//构造一个蛇身并设置其初始的属性值 36 var SnakeLond = document.createElement("input"); 37 SnakeLond.setAttribute("type","button");//初始类型 38 SnakeLond.style.width = "20px"; 39 SnakeLond.style.height = "20px"; 40 SnakeLond.setAttribute("id",snakeId); 41 snakeId++; 42 return SnakeLond; 43 } 44 function Food(){//构造食物方法 45 var x; 46 var y; 47 var SnakeLond = document.createElement("input");//创建食物 48 SnakeLond.setAttribute("type","button");//食物的类型是button类型 49 SnakeLond.style.width = "20px"; 50 SnakeLond.style.height = "20px"; 51 SnakeLond.setAttribute("id","food");//id为food 52 x = Random() * 10; 53 y = Random() * 10; 54 SnakeLond.style.position = "absolute";//绝对定位 55 SnakeLond.style.top = x+"px"; 56 SnakeLond.style.left = y+"px"; 57 SnakeLond.style.background = "blue"; 58 document.body.appendChild(SnakeLond); 59 } 60 function $(id){//返回指定id号的实例 61 return document.getElementById(id); 62 } 63 function KeyDown(){//键盘键入事件,获取从键盘输入而得到的键值 64 if(keyValue == 38 && event.keyCode == 40) 65 event.keyCode = 38; 66 else if(keyValue == 40 && event.keyCode == 38) 67 event.keyCode = 40; 68 else if(keyValue == 37 && event.keyCode == 39) 69 event.keyCode = 37 70 else if(keyValue == 39 && event.keyCode == 37) 71 event.keyCode = 39; 72 keyValue = event.keyCode 73 Stir();//蛇移动 74 EatFood();//蛇吃食 75 } 76 function EatFood(){//吃食方法 77 var SnakeHead = Head(); 78 var score = $("score"); 79 //var leng = document.getElementsByTagName("input").length-2; 80 var food = $("food"); 81 var s = SnakeHead.style; 82 //如果蛇的头部与食物刚好对应的话就表示蛇吃到了食物,蛇的长度和速度就会增加,并且要重置定时器的速度 83 if(s.top == food.style.top && s.left == food.style.left){ 84 speed -= 30;//速度发生改变 85 if(speed- 30 <= 30) 86 speed = 5; 87 clearInterval(time);//清除定时器 88 time = setInterval("Tir()",speed);//重置定时器 89 score.innerHTML = "积分："+num;//积分增加 90 num++; 91 food.setAttribute("id",snakeId); 92 var x = parseInt(SnakeHead.style.top); 93 var y = parseInt(SnakeHead.style.left); 94 food.style.top = x+"px";//消化食物 95 food.style.left = y+"px"; 96 snakeId++; 97 Food(); 98 } 99 } 100 function SelfEnd(){//蛇自杀方法 101 var SnakeHead = Head(); 102 var leng = document.getElementsByTagName("input").length-1;//得到蛇的长度 103 var SnakeItem = document.getElementsByTagName("input");//得到蛇身体所有的部位 104 var headTop = SnakeHead.style; 105 var head = $(SnakeItem.length-2);//得到蛇的头部 106 for(var i=0;i<SnakeItem.length;i++){//循环蛇的每个部位 107 var items = SnakeItem.item(i).style; 108 var id = SnakeItem.item(i).id; 109 //如果蛇的头部与蛇的其它部位相吻合的话就表示蛇咬到了自己 110 if(headTop.top == items.top && headTop.left == items.left && id<leng-2){ 111 clearTimeout(time); 112 alert("<^GAME ^ OVER^>");//游戏结束 113 } 114 } 115 } 116 function BumpWall(){//蛇撞墙方法 117 var SnakeHead = Head(); 118 var s = SnakeHead.style; 119 var top = parseInt(s.top); 120 var left = parseInt(s.left); 121 //如果蛇移动的坐标超过了边界,则蛇撞到了墙,游戏结束 122 if(top < 0 || top >= 410 || left < 0 || left >= 410){ 123 clearTimeout(time); 124 alert("<^GAME ^ OVER^>"); 125 } 126 } 127 function Stir(){//蛇移动方法 128 var pointx = 0; 129 var pointy = 0; 130 var leng = document.getElementsByTagName("input").length-1; 131 var SnakeHead = document.getElementById(leng-1); 132 var SnakeBody;//申明蛇的身体 133 var leftPoint = SnakeHead.style.left; 134 var topPoint = SnakeHead.style.top; 135 //设置蛇的样式 136 for(var i=0;i<leng;i++){ 137 if(i==leng-1) 138 $(i).style.backgroundColor = "purple"; 139 else 140 $(i).style.backgroundColor = "black"; 141 } 142 //蛇根据你按下的上下左右键来进行移动行走 143 if(keyValue == 40){ 144 pointy = parseInt(SnakeHead.style.top) + 10; 145 pointx = parseInt(SnakeHead.style.left); 146 } 147 else if(keyValue == 38){ 148 pointy = parseInt(SnakeHead.style.top) - 10; 149 pointx = parseInt(SnakeHead.style.left); 150 } 151 else if(keyValue == 39){ 152 pointx = parseInt(SnakeHead.style.left) + 10; 153 pointy = parseInt(SnakeHead.style.top); 154 } 155 else if(keyValue == 37){ 156 pointx = parseInt(SnakeHead.style.left) - 10; 157 pointy = parseInt(SnakeHead.style.top); 158 } 159 else{ 160 pointx = parseInt(SnakeHead.style.left) + 10; 161 pointy = parseInt(SnakeHead.style.top); 162 } 163 SnakeBody = $(loca);//得到蛇的各个身体 164 SnakeBody.style.left = leftPoint; 165 SnakeBody.style.top = topPoint; 166 loca++; 167 if(loca == leng-1) 168 loca = 0; 169 SnakeHead.style.left = pointx + "px";//蛇按照指定方向走动 170 SnakeHead.style.top = pointy + "px"; 171 var snakeSpeed = $("speed");//用来记录蛇的坐标 172 snakeSpeed.innerHTML = "坐标：<br/>"+"X "+pointx+","+"Y "+pointy; 173 BumpWall();//调用蛇撞墙方法 174 SelfEnd();//调用蛇自杀方法 175 } 176 function Head(){//返回蛇的头部 177 var leng = document.getElementsByTagName("input").length-1;//蛇的长度 178 return document.getElementById(leng-1);//蛇的头部 179 } 180 function Pause(){//暂停方法 181 alert("暂停中......"); 182 } 183 function Tir(){//计时器方法 184 Stir(); 185 EatFood(); 186 } 187 function onMouseMove(id){//鼠标移到指定选项的方法 188 var p = $(id); 189 p.className = "onMouseMove"; 190 } 191 function onMouseOut(id){//鼠标移开指定选项的方法 192 var p = $(id); 193 p.className = "onMouseOut"; 194 } 195 var time = setInterval("Tir()",speed);//定时器 196 </script> 197 </head> 198 199 <body onkeydown="KeyDown()"> 200 <div id="SnakeArea"> 201 </div> 202 <!--游戏菜单--> 203 <div id="Menu"> 204 <p style="color:#FF0;">游戏菜单</p> 205 <a href="Snake.html" id="start" onMouseMove="onMouseMove('start')" onMouseOut="onMouseOut('start')">重新开始</a> 206 <br/> 207 <p id="speed" onMouseMove="onMouseMove('speed')" onMouseOut="onMouseOut('speed')">坐标</p> 208 <p id="score" onMouseMove="onMouseMove('score')" onMouseOut="onMouseOut('score')">积分</p> 209 <p id="pause" onClick="Pause()" onMouseMove="onMouseMove('pause')" onMouseOut="onMouseOut('pause')">暂停</p> 210 <p id="end" onClick="javascript:window.close()" onMouseMove="onMouseMove('end')" onMouseOut="onMouseOut('end')">结束游戏</p> 211 </div> 212 </body> 213 </html>