网页游戏贪吃蛇兼容火狐版本（发布）

chaoming

1. <title>贪吃蛇游戏（兼容火狐版本-BY scorusoncer QQ:278619131）</title>
2. <!--网页特效代码由[url]http://js.jojoo.net[/url]提供！-->
3. <!--网页特效代码兼容火狐由我完成！2008-9-26-->
4. <style>
5. .Food{background-color:red}    /*  事物颜色  */
6. .Snake{background-color:green}  /*  蛇颜色    */
7. body{
8. padding:0;
9. margin:0px;
10. }
11. </style>
13. <script>
14. var Rows=20      //  地图行数
15. var Cells=30    //  地图列数
16. var Num=15      //  地图小格边长
17. var BorderWidth=1  //  边框宽度
18. var SpeedUp=5000  
19. //创建地图
20. function CreateMap(){
21. BW=eval(Cells*Num+2*BorderWidth)  //  地图宽度
22. BH=eval(Rows*Num+2*BorderWidth)    //  地图高度
23. document.body.innerHTML=&#39;蛇蛇王座<br>网页游戏“贪食蛇”<br>功能：蛇吃食物有三种情况：走到的地方有食物；走到的地方没有食物；走到的地方是墙壁。吃到食物后，蛇的身体会变长；碰到墙壁后 Game Over，询问是否重新开始。<br>蛇为绿色，事物为红色，按上下左右键，控制方向进行移动。<br><span id="ssss"></span><br><span onclick="window.location.reload()">点此重新开始</span><div id=MainMap style=position:absolute;left:&#39;+(document.body.clientWidth-BW)/2+&#39;;top:&#39;+(document.body.clientHeight-BH)/2+&#39;;width:&#39;+BW+&#39;;height:&#39;+BH+&#39;;border-width:&#39;+BorderWidth+&#39;;border-style:inset;border-color:#0000cc></div>&#39;
24. Map=new Array()
25. for(y=0;y<Rows;y++){
26.   Map[y]=new Array()
27.   for(x=0;x<Cells;x++){
28.     Map[y][x]=&#39;0&#39;
29.     }
30.   }
31. Sx=parseInt(Math.random()*Cells)
32. Sy=parseInt(Math.random()*Rows)
33. CreateSnake()
34. CreatFood()
35. AllDiv=document.getElementById("MainMap").getElementsByTagName(&#39;DIV&#39;)
36. AllSpan=document.getElementById("MainMap").getElementsByTagName(&#39;SPAN&#39;)
37. }
38. var len=0;
39. //创建食物的位置
40. function CreatFood(){
41. Fx=parseInt(Math.random()*Cells)
42. Fy=parseInt(Math.random()*Rows)
44. if(Map[Fy][Fx]==&#39;0&#39;){
45.   MainMap.innerHTML+=&#39;<span style=position:absolute;left:&#39;+Fx*Num+&#39;;top:&#39;+Fy*Num+&#39;;width:&#39;+Num+&#39;;height:&#39;+Num+&#39;;overflow:hidden class=Food>食</span>&#39;
46.   Map[Fy][Fx]=&#39;F&#39;
47.   len=len+1;
48.   document.getElementById("ssss").innerHTML="蛇蛇现在毛重：<span style=&#39;color:green;font-size:40px;&#39;>"+len+" </span>公斤";
49.   }
50. else CreatFood()
51. }
52. //创建蛇的位置
53. function CreateSnake(){
54. //if(Sy==19){alert("最后一次")}
55. MainMap.innerHTML+=&#39;<div x=&#39;+Sx+&#39; y=&#39;+Sy+&#39; style=position:absolute;left:&#39;+Sx*Num+&#39;;top:&#39;+Sy*Num+&#39;;width:&#39;+Num+&#39;;height:&#39;+Num+&#39;;overflow:hidden class=Snake>蛇</div>&#39;
56. Map[Sy][Sx]=&#39;S&#39;
57. }
58. //主移动--判断蛇头前面的是什么
59. function Move(){
60. Sx+=GoX
61. Sy+=GoY
62. if(Sy<0||Sy>=Rows){ Move1()}
63. else{
64.   SnakeFront=Map[Sy][Sx]
65.   if(SnakeFront==&#39;0&#39;)Move2()
66.   else{
67.     if(SnakeFront==&#39;F&#39;)Move3()
68.     else Move1()
69.     }
70.   }
71. }
73. //重新开始
74. function Move1(){
75. alert("您的小蛇出生时1公斤，牺牲时"+len+"公斤")
76. ReStart=confirm("Game Over，重新开始？")
77. if(ReStart)window.location.reload()
78. }
80. var Times=200
82. //蛇前是空地时
84. function Move2(){
85. Map[parseInt(AllDiv[0].getAttribute("y"))][parseInt(AllDiv[0].getAttribute("x"))]=&#39;0&#39;
86. document.getElementById("MainMap").removeChild(AllDiv[0]);
87. CreateSnake()
88. setTimeout(&#39;Move()&#39;,Times)
89. }
91. //蛇前面是食物时
92. function Move3(){
93. CreateSnake()
94. document.getElementById("MainMap").removeChild(AllSpan[0]);
95. CreatFood()
96. setTimeout(&#39;Move()&#39;,Times)
97. }
99. //蛇越行越快
100. function oTimes(){
101. Times-=5
102. if(Times>5)setTimeout(&#39;oTimes()&#39;,SpeedUp)//setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
103. }
105. document.onkeydown=KeyDown
107. //方向
108. function KeyDown(evt){
109.   evt=evt|| window.event;
110.   Key=evt.keyCode
111.   switch(Key){
112.       case 37:Dir(-1,0);break//左
113.       case 39:Dir(1,0);break//右
114.       case 38:Dir(0,-1);break//上
115.       case 40:Dir(0,1);break//下
116.     }
117.   return false
118. }
119. var Star=0
121. function Dir(x,y){
122. GoX=x
123. GoY=y
124. if(Star==0){
125.   oTimes()
126.   Star=1
127.   Move()
128.   }
129. }
130. //开始时运行
131. onload=CreateMap
132. </script>

复制代码

mxqchina

可以用，不错。