jsp網(wǎng)頁實(shí)現(xiàn)貪吃蛇小游戲
本文實(shí)例為大家分享了jsp網(wǎng)頁實(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);//頁面繪制 } } } //創(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匹配鍵盤方向 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)建蛇身 } //鍵盤事件 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){ //用戶按了某個(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í)有所幫助,也希望大家多多支持碩編程。
相關(guān)文章
- jsp+servlet實(shí)現(xiàn)文件上傳與下載功能
- EJB3.0部署消息驅(qū)動(dòng)Bean拋javax.naming.NameNotFoundException異常
- 在JSP中使用formatNumber控制要顯示的小數(shù)位數(shù)方法
- 秒殺系統(tǒng)Web層設(shè)計(jì)的實(shí)現(xiàn)方法
- 將properties文件的配置設(shè)置為整個(gè)Web應(yīng)用的全局變量實(shí)現(xiàn)方法
- JSP使用過濾器防止Xss漏洞
- 在JSP頁面中動(dòng)態(tài)生成圖片驗(yàn)證碼的方法實(shí)例
- 詳解JSP 內(nèi)置對(duì)象request常見用法
- 使用IDEA編寫jsp時(shí)EL表達(dá)式不起作用的問題及解決方法
- jsp實(shí)現(xiàn)局部刷新頁面、異步加載頁面的方法
- Jsp中request的3個(gè)基礎(chǔ)實(shí)踐
- JavaServlet的文件上傳和下載實(shí)現(xiàn)方法
- JSP頁面的靜態(tài)包含和動(dòng)態(tài)包含使用方法