蛇を捕まえるゲームを実装するためのjspのWebページ
2022-01-19 04:17:23
この例では、参考のため、スナッチャーのミニゲームを実装する jsp ウェブページの具体的なコードを、以下のように共有します。
I. 主な考え方
(1)まずは地図の実装です。
(2) 第2ステップでは、蛇体を実装します。
(3)第3ステップでは、餌を実現します。
(4) 第四段階は、食べ物を食べるために移動することを実現する。
(5) 第五段階は、ルール(壁にぶつかるゲームの終了)を実現する。
II. コードの実装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gluttony</title>
<style>
#map{
width: 400px;
height: 400px;
border: 1px solid black;
}
/*map color*/
.divMap{
width: 18px;
height: 18px;
margin: 1px;
background-color: yellow;
float: left;
}
/*Snake body color*/
.divSnake{
width: 18px;
height: 18px;
margin: 1px;
background-color: red;
float: left;
}
/*food-color*/
.divFood{
width: 18px;
height: 18px;
margin: 1px;
background-color: green;
float: left;
}
</style>
<script>
var mapX=20;
var mapY=20; //map boundary, horizontal and vertical div cells
var arrMap=new Array();//map array
var snackeX = [4,5,6,7],snackeY=[2,2,2,2];//snake body initialization coordinate value
var foodX,foodY; //create food coordinates
var keyCode = 39;//Snake body move direction, default to the right
//create a map
function createMap() {
//Get the map outer frame div
var map = document.getElementById("map");
//map create div grid, horizontal and vertical 20
for(y=0;y<mapY;y++)
{
arrMap[y]= new Array();
for(x=0;x<mapX;x++)
{
//div small cell
var div =document.createElement("div");
div.className="divMap";//initialize style
arrMap[y][x]=div;//put the div grid into the map array
map.appendChild(div);//page draw
}
}
}
//create the snake body
function createSnack(){
//change the bottom color of a string of consecutive divs in the map
for(i=0;i<snackeX.length;i++)
{
arrMap[snackeY[i]][snackeX[i]].className = "divSnake";
}
}
// Clear the snake body
function clearSnack() {
for(i=0;i<snackeX.length;i++)
{
arrMap[snackeY[i]][snackeX[i]].className="divMap";
}
}
// Create food
function createFood()
{
//arrMap[foodY][foodX].className="divFood";
var result;//judge whether to regenerate the food
do {
result = false;//default does not overlap
//random food coordinates
foodX=parseInt(Math.random()*mapX);
foodY=parseInt(Math.random()*mapY);
//judge the food can not appear on the snake
for(i=0;i>snackeX.length;i++) {
if(snackeX[1]==foodX&&snackeY[1]==foodY)
{
result = true;//need to regenerate
break;
}
}
}while(result);
arrMap[foodY][foodX].className="divFood";
}
//Snake body movement
//1. clear the snake body
//2. move the snake body coordinates, increase the snake head, and clear the snake tail by one frame
function snackMove() {
//clear snack
clearSnack();
for (i = 0; i < snackeX.length - 1; i++) {
snackeX[i] = snackeX[i + 1];
snackeY[i] = snackeY[i + 1];
}
//each time you move, the snake head increases by one frame, keyCode matches the keyboard direction
switch (keyCode) {
case 37://left
snackeX[snackeX.length - 1]--;
break;
case 38://up
snackeY[snackeY.length - 1]--;
break;
case 39://right
snackeX[snackeX.length - 1]++;
break;
case 40://down
snackeY[snackeY.length - 1]++;
break;
}
//eat food
if (snackeX[snackeX.length - 1] == foodX && snackeY[snackeY.length - 1] == foodY)
{
//eat the food
snackeX[snackeX.length]=snackeX[snackeX.length-1];
snackeY[snackeY.length]=snackeY[snackeY.length-1];
// rearrange the snake body
for(i=snackeX.length-1;i>0;i--)
{
snackeX[i]=snackeX[i-1];
snackeY[i]=snackeY[i-1];
}
createFood();// regenerate the next food
}
//Out of the game border
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);//stop moving
alert("Game over");
return ;
}
createSnack();//recreate the snake body
}
//keyboard event
function keyDown(){
var newKey = event.keyCode//Keyboard key
if(keyCode == 37 && newKey == 39||
keyCode == 39 && newKey == 37||
keyCode == 38 && newKey == 40||
keyCode == 40 && newKey == 38
) {
// Forbid turnaround
return ;
} else if(newKey>=37&&newKey<=40){
//the user pressed a certain direction key
keyCode=newKey;
}
else{
//other keys
}
}
//run
window.onload =function () {
createMap(); //createMap
createSnack();//create snake body
createFood();//create food
move= setInterval("snackMove()",200)//Snake body move
document.onkeydown = keyDown;//get the arrow keys
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
III. 効果の実装
矢印キーを押して、蛇の体の動きを実現します。
以上が今回の記事の内容ですが、皆様の学習の一助となり、スクリプトハウスをより一層応援していただければ幸いです。
関連
-
jsp session.setAttribute() と session.getAttribute() の使用例について説明します。
-
JSP統計のウェブサイトの訪問者を使用する方法を教える
-
jsp filter フィルタ機能と簡単な使用例
-
ページメッセージのポップアップボックスの右下を実現するJSP
-
数字当てゲームの jsp+servlet 実装
-
大富豪の数字当てゲームのJSP実装
-
JSPで実現するシンプルな人事管理システム
-
Javawebプロジェクト実行エラーHTTPステータス404の解決策
-
サーブレット+jspでログインできないようにフィルタを実装する
-
ファイルアップロード機能のJSP実装
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
jsp は sessionScope を使用してセッション・ケースの詳細を取得します。
-
JSPの9つの組み込みオブジェクトを徹底解説
-
JSP技術を使って簡単なオンラインテストシステムを実装する例 詳細へ
-
JSPデータ連動プロセス解析
-
JSP組み込みオブジェクト要求共通使用法詳細
-
JavaScript-statementを解説した記事
-
jsp cookie+sessionで簡単な自動ログイン。
-
jspインターフェースに画像を挿入する方法
-
jsp+servletによるファイルアップロード機能の簡易実装(saveディレクトリの改良)
-
サーバーへのファイルアップロード機能を実現するJSP+サーブレット