jsp網頁實現貪吃蛇小遊戲
阿新 • • 發佈：2020-02-21
本文例項為大家分享了jsp網頁實現貪吃蛇小遊戲的具體程式碼，供大家參考，具體內容如下
一、主要思路
（1）第一步實現地圖。
（2）第二步實現蛇身。
（3）第三步實現食物。
（4）第四步實現移動吃食物。
（5）第五步實現規則（撞牆遊戲結束）。
二、程式碼實現
<!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();//地圖陣列
var snackeX = [4,5,6,7],snackeY=[2,2,2];//蛇身初始化座標值
var foodX,foodY; //建立食物座標
var keyCode = 39;//蛇身移動方向,預設向右
//建立地圖
function createMap() {
//獲取地圖外框div
var map=document.getElementById("map");
//地圖建立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小格放入地圖陣列中
map.appendChild(div);//頁面繪製
}
}
}
//建立蛇身
function createSnack(){
//改變地圖中一串連續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";
}
}
//建立食物
function createFood()
{
//arrMap[foodY][foodX].className="divFood";
var result;//判斷是否要重新生成食物
do {
result = false;//預設不重疊
//隨機食物座標
foodX=parseInt(Math.random()*mapX);
foodY=parseInt(Math.random()*mapY);
//判斷食物不能出現在蛇身上
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();//重新建立蛇身
}
//鍵盤事件
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(); //建立地圖
createSnack();//建立蛇身
createFood();//建立食物
move= setInterval("snackMove()",200)//蛇身移動
document.onkeydown = keyDown;//獲取方向鍵
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>三、實現效果
按方向鍵實現蛇身運動。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。