使用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>
相關文章
- 1. 使用Javascript來編寫貪食蛇（零基礎）
- 2. 迴歸原生，使用javascript編寫小遊戲 --- 貪食蛇
- 3. 一塊兒來作webgame，《Javascript貪食蛇》
- 4. javaScript小項目------貪食蛇
- 5. 用原用JS寫一個貪食蛇
- 6. 貪食蛇程序
- 7. c# 版貪食蛇
- 8. 基於javaSwing的貪食蛇遊戲
- 9. Labview學習之貪食蛇
- 10. C++編寫貪吃蛇
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Composer 安裝與使用
- • 使用Rxjava計算圓周率
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章