文章詳情頁(yè)
jsp網(wǎng)頁(yè)實(shí)現(xiàn)貪吃蛇小游戲
瀏覽：127日期：2022-06-07 13:48:08
本文實(shí)例為大家分享了jsp網(wǎng)頁(yè)實(shí)現(xiàn)貪吃蛇小游戲的具體代碼，供大家參考，具體內(nèi)容如下
一、主要思路
（1）第一步實(shí)現(xiàn)地圖。
（2）第二步實(shí)現(xiàn)蛇身。
（3）第三步實(shí)現(xiàn)食物。
（4）第四步實(shí)現(xiàn)移動(dòng)吃食物。
（5）第五步實(shí)現(xiàn)規(guī)則（撞墻游戲結(jié)束）。
二、代碼實(shí)現(xiàn)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>貪吃蛇</title> <style> #map{ width: 400px; height: 400px; border: 1px solid black; } /*地圖顏色*/ .divMap{ width: 18px; height: 18px; margin: 1px; background-color: yellow; float: left; } /*蛇身顏色*/ .divSnake{ width: 18px; height: 18px; margin: 1px; background-color: red; float: left; } /*食物顏色*/ .divFood{ width: 18px; height: 18px; margin: 1px; background-color: green; float: left; } </style> <script> var mapX=20; var mapY=20; //地圖邊界，橫向和縱向的div小格 var arrMap=new Array();//地圖數(shù)組 var snackeX = [4,5,6,7],snackeY=[2,2,2,2];//蛇身初始化坐標(biāo)值 var foodX,foodY; //創(chuàng)建食物坐標(biāo) var keyCode = 39;//蛇身移動(dòng)方向,默認(rèn)向右 //創(chuàng)建地圖 function createMap() { //獲取地圖外框div var map=document.getElementById("map"); //地圖創(chuàng)建div小格，橫縱各20個(gè) for(y=0;y<mapY;y++) { arrMap[y]= new Array(); for(x=0;x<mapX;x++) { //div小格 var div =document.createElement("div"); div.className="divMap";//初始化樣式 arrMap[y][x]=div;//將div小格放入地圖數(shù)組中 map.appendChild(div);//頁(yè)面繪制 } } } //創(chuàng)建蛇身 function createSnack(){ //改變地圖中一串連續(xù)div底色 for(i=0;i<snackeX.length;i++) { arrMap[snackeY[i]][snackeX[i]].className ="divSnake"; } } //清除蛇身 function clearSnack() { for(i=0;i<snackeX.length;i++) { arrMap[snackeY[i]][snackeX[i]].className="divMap"; } } //創(chuàng)建食物 function createFood() { //arrMap[foodY][foodX].className="divFood"; var result;//判斷是否要重新生成食物 do { result = false;//默認(rèn)不重疊 //隨機(jī)食物坐標(biāo) foodX=parseInt(Math.random()*mapX); foodY=parseInt(Math.random()*mapY); //判斷食物不能出現(xiàn)在蛇身上 for(i=0;i>snackeX.length;i++) { if(snackeX[1]==foodX&&snackeY[1]==foodY) { result = true;//需要重新生成 break; } } }while(result); arrMap[foodY][foodX].className="divFood"; } //蛇身運(yùn)動(dòng) //1.清除蛇身 //2.移動(dòng)蛇身坐標(biāo)，增加蛇頭，清除蛇尾一格 function snackMove() { //清除蛇身 clearSnack(); for (i = 0; i < snackeX.length - 1; i++) { snackeX[i] = snackeX[i + 1]; snackeY[i] = snackeY[i + 1]; } //每次移動(dòng)，蛇頭增加一格， keyCode匹配鍵盤(pán)方向 switch (keyCode) { case 37://向左 snackeX[snackeX.length - 1]--; break; case 38://向上 snackeY[snackeY.length - 1]--; break; case 39://向右 snackeX[snackeX.length - 1]++; break; case 40://向下 snackeY[snackeY.length - 1]++; break; } //吃食物 if (snackeX[snackeX.length - 1] == foodX && snackeY[snackeY.length - 1] == foodY) { //吃到食物 snackeX[snackeX.length]=snackeX[snackeX.length-1]; snackeY[snackeY.length]=snackeY[snackeY.length-1]; //重新排列蛇身 for(i=snackeX.length-1;i>0;i--) { snackeX[i]=snackeX[i-1]; snackeY[i]=snackeY[i-1]; } createFood();//重新生成下一個(gè)食物 } //超出游戲邊框 if(snackeX[snackeX.length-1]<0 || snackeX[snackeX.length-1]>mapX-1 || snackeY[snackeY.length-1]<0 || snackeY[snackeY.length-1]>mapY-1) { clearInterval(move);//停止移動(dòng) alert("游戲結(jié)束"); return ; } createSnack();//重新創(chuàng)建蛇身 } //鍵盤(pán)事件 function keyDown(){ var newKey = event.keyCode//鍵盤(pán)按鍵 if(keyCode == 37 && newKey == 39|| keyCode == 39 && newKey == 37|| keyCode == 38 && newKey == 40|| keyCode == 40 && newKey == 38 ) { //禁止掉頭 return ; } else if(newKey>=37&&newKey<=40){ //用戶(hù)按了某個(gè)方向鍵 keyCode=newKey; } else{ //其他按鍵 } } //運(yùn)行 window.onload =function () { createMap(); //創(chuàng)建地圖 createSnack();//創(chuàng)建蛇身 createFood();//創(chuàng)建食物 move= setInterval("snackMove()",200)//蛇身移動(dòng) document.onkeydown = keyDown;//獲取方向鍵 } </script></head><body><div id="map"></div></body></html>三、實(shí)現(xiàn)效果
按方向鍵實(shí)現(xiàn)蛇身運(yùn)動(dòng)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持。
標(biāo)簽：
JSP
相關(guān)文章：
1. 詳解JSP 內(nèi)置對(duì)象request常見(jiàn)用法2. 如何在jsp界面中插入圖片3. JSP之表單提交get和post的區(qū)別詳解及實(shí)例4. 淺談SpringMVC jsp前臺(tái)獲取參數(shù)的方式 EL表達(dá)式5. js實(shí)現(xiàn)簡(jiǎn)單貪吃蛇游戲6. Jsp中request的3個(gè)基礎(chǔ)實(shí)踐7. jsp+dao+bean+servlet(MVC模式)實(shí)現(xiàn)簡(jiǎn)單用戶(hù)登錄和注冊(cè)頁(yè)面8. 在JSP中使用formatNumber控制要顯示的小數(shù)位數(shù)方法9. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）10. 在JSP頁(yè)面中動(dòng)態(tài)生成圖片驗(yàn)證碼的方法實(shí)例
排行榜
網(wǎng)公網(wǎng)安備