jsp網頁實現(xiàn)貪吃蛇小游戲
本文實例為大家分享了jsp網頁實現(xiàn)貪吃蛇小游戲的具體代碼，供大家參考，具體內容如下
一、主要思路
（1）第一步實現(xiàn)地圖。
（2）第二步實現(xiàn)蛇身。
（3）第三步實現(xiàn)食物。
（4）第四步實現(xiàn)移動吃食物。
（5）第五步實現(xiàn)規(guī)則（撞墻游戲結束）。
二、代碼實現(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];//蛇身初始化坐標值
var foodx,foody; //創(chuàng)建食物坐標
var keycode = 39;//蛇身移動方向,默認向右
//創(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;//默認不重疊
//隨機食物坐標
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.移動蛇身坐標，增加蛇頭，清除蛇尾一格
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("游戲結束");
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)蛇身運動。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持碩編程。
相關文章
- jsp+servlet實現(xiàn)文件上傳與下載功能
- EJB3.0部署消息驅動Bean拋javax.naming.NameNotFoundException異常
- 在JSP中使用formatNumber控制要顯示的小數(shù)位數(shù)方法
- 秒殺系統(tǒng)Web層設計的實現(xiàn)方法
- 將properties文件的配置設置為整個Web應用的全局變量實現(xiàn)方法
- JSP使用過濾器防止Xss漏洞
- 在JSP頁面中動態(tài)生成圖片驗證碼的方法實例
- 詳解JSP 內置對象request常見用法
- 使用IDEA編寫jsp時EL表達式不起作用的問題及解決方法
- jsp實現(xiàn)局部刷新頁面、異步加載頁面的方法
- Jsp中request的3個基礎實踐
- JavaServlet的文件上傳和下載實現(xiàn)方法
- JSP頁面的靜態(tài)包含和動態(tài)包含使用方法
JSP技巧