文章詳情頁
jsp網(wǎng)頁實現(xiàn)貪吃蛇小游戲
瀏覽：268日期：2022-06-07 13:48:08
本文實例為大家分享了jsp網(wǎng)頁實現(xiàn)貪吃蛇小游戲的具體代碼，供大家參考，具體內(nèi)容如下
一、主要思路
（1）第一步實現(xiàn)地圖。
（2）第二步實現(xiàn)蛇身。
（3）第三步實現(xiàn)食物。
（4）第四步實現(xiàn)移動吃食物。
（5）第五步實現(xiàn)規(guī)則（撞墻游戲結(jié)束）。
二、代碼實現(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;//蛇身移動方向,默認(rèn)向右 //創(chuàng)建地圖 function createMap() { //獲取地圖外框div var map=document.getElementById("map"); //地圖創(chuàng)建div小格，橫縱各20個 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);//頁面繪制 } } } //創(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"; } //蛇身運動 //1.清除蛇身 //2.移動蛇身坐標(biāo)，增加蛇頭，清除蛇尾一格 function snackMove() { //清除蛇身 clearSnack(); for (i = 0; i < snackeX.length - 1; i++) { snackeX[i] = snackeX[i + 1]; snackeY[i] = snackeY[i + 1]; } //每次移動，蛇頭增加一格， keyCode匹配鍵盤方向 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();//重新生成下一個食物 } //超出游戲邊框 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);//停止移動 alert("游戲結(jié)束"); return ; } createSnack();//重新創(chuàng)建蛇身 } //鍵盤事件 function keyDown(){ var newKey = event.keyCode//鍵盤按鍵 if(keyCode == 37 && newKey == 39|| keyCode == 39 && newKey == 37|| keyCode == 38 && newKey == 40|| keyCode == 40 && newKey == 38 ) { //禁止掉頭 return ; } else if(newKey>=37&&newKey<=40){ //用戶按了某個方向鍵 keyCode=newKey; } else{ //其他按鍵 } } //運行 window.onload =function () { createMap(); //創(chuàng)建地圖 createSnack();//創(chuàng)建蛇身 createFood();//創(chuàng)建食物 move= setInterval("snackMove()",200)//蛇身移動 document.onkeydown = keyDown;//獲取方向鍵 } </script></head><body><div id="map"></div></body></html>三、實現(xiàn)效果
按方向鍵實現(xiàn)蛇身運動。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持。
標(biāo)簽：
JSP
相關(guān)文章：
1. 淺談SpringMVC jsp前臺獲取參數(shù)的方式 EL表達(dá)式2. JSP 中request與response的用法詳解3. asp+jsp+JavaScript動態(tài)實現(xiàn)添加數(shù)據(jù)行4. JSP servlet實現(xiàn)文件上傳下載和刪除5. Jsp中request的3個基礎(chǔ)實踐6. JSP學(xué)習(xí)心得7. 基于javaweb+jsp實現(xiàn)企業(yè)車輛管理系統(tǒng)8. jsp中javaBean的運用9. jsp cookie+session實現(xiàn)簡易自動登錄10. jsp實現(xiàn)textarea中的文字保存換行空格存到數(shù)據(jù)庫的方法
排行榜
網(wǎng)公網(wǎng)安備