JavaScript スネーク実装コード_JavaScript スキル

練習の過程で、JSを使用してスネークゲームを実装してみました。実際にうまくいきました。
アイデア: 10 ピクセル * 10 ピクセルの div レイヤーを「ピクセル」として使用し、次に 160 の「ピクセル」の 40 * 40 マトリックスを使用してゲーム インターフェイスを形成します。
コードは次のとおりです:

コードをコピーします コードは次のとおりです:

// JavaScript Document
alert("キーボードの矢印キーで方向を制御し、スペースバーで一時停止します。 LIFE 制作 nhttp://blog.csdn.net/anhulife");
// 基本的なグラフィック ブロック、つまり 160 個の 10 * 10 レイヤーで構成される 2 次元マトリックスを追加します
var rowindex = new Array( 40 );
varcolindex;
var cell;
var backcolor = "black" for(var i = 0; i {
colindex = new Array(40);
for(var j = 0; j {
// 各セルの属性を設定します
セル = document.createElement("div");
cell.style.backgroundColor = "10px";
cell.style.height = "10px"; 🎜 >cell.style.position = "absolute";
cell.style.left = "" (j * 10 100) "px";
cell.style.top = "" (i * 10 100) " px";
cell.style.overflow = "hidden";
// cell
document.body.appendChild(cell);
// 列グループを入力します
colindex[j ] = cell;
}
// 行グループを埋める
rowindex[i] =colindex;
}
// 基本画像ユニットに基づくスネーク タイプの定義
関数()
{
// ヘビの本体を定義し、
this.bodycolor = "white";
this.bodys = new Array(); 20; i {
rowindex[20][i].style.backgroundColor = this.bodycolor; // rowindex の最初の座標は行インデックスです。 is Column Index
this.bodys.push(rowindex[20][i]);
}
// ヘビの頭の座標を定義します。最初の座標は行インデックス、2 番目の座標は列インデックス
this.head = [20, 20];
// ヘビの方向を定義します。0 は左、1 は下、2 は右、3 は上を表します
this.direct = 0;
}
//モジュールを移動
function move()
{
// 順方向に従って頭部の座標を計算
switch(this.direct)
{
ケース 0 :
this.head[1] -= 1;
ケース 1 :
this.head[0] = 1;
ケース 2 :
this.head[1] = 1;
ケース 3 :
this.head[0] -= 1; }
// 範囲外かどうかを判断します
if(this.head[0] < 0 || this.head[0] > 39 || this.head[1] < 0 || this .head[1] > 39)
{
// 範囲外の場合は false を返します
return false
}
else
// 範囲外の場合は範囲外にある場合は、次の要素の特性を確認し、それが食物であり、食物に再生される場合はそれを食べます。それ自体の場合は false を返します。
if(this.head[0] == food[0] && this.head[1] == food[1])
{
//食べ物
rowindex[this.head[0]][this.head[1]].style.backgroundColor = this.bodycolor;
this.bodys.unshift(rowindex[this.head[0]][this] . head[1]]);
score ;
makefood();
else
// それ自体の場合
if(rowindex[ this .head[0]][this.head[1]].style.backgroundColor == this.bodycolor)
{
if(rowindex[this.head[0]][this.head[1] ] == this.bodys.pop())// 尻尾の場合
{
this.bodys.unshift(rowindex[this.head[0]][this.head[1]]);
return true;
}
// 末尾でない場合は
return false;
}
// 上記のいずれでもない
this.bodys.pop().style .backgroundColor = backcolor;
rowindex[this.head[0]][this.head[1]].style.backgroundColor = this.bodycolor; ]] [this.head[1]]);
return true;
}
snake.prototype.move = move;
var foodcolor = "blue" ;
var food = [20, 17];
rowindex[food[0]][food[1]].style.backgroundColor =
function makefood()
{
var tempfood ;
var tempelement;
out :
while(true)
{
tempfood = [Math.round(Math.random() * 39), Math.round(Math.ランダム( ) * 39)];
tempelement = rowindex[tempfood[0]][tempfood[1]];
for(var i in s.bodys)
{
if(s. bodys[ i] == tempelement)
{
// ランダムに生成された餌がヘビの体にある場合は、飛び出て続行します
続行します
}
// 餌を正常に生成します。
ブレイクアウト;
}
}
food = tempfood;
rowindex[food[0]][food[1]].style.backgroundColor =
} >// モジュールの回転と一時停止モジュール
document.onkeydown =turnorstop;
functionturnorstop(event)
{
if(window.event != unknown)
{
if( parseInt(window .event.keyCode)==32)
{
alert("休憩")
}
else
{
switch(parseInt(window.event); .keyCode))
{
ケース 37 :
if(s.direct!=2)
s.direct = 0;
ケース 38 :
if (s.direct !=1)
s.direct = 3;
case 39:
if(s.direct!=0)
s.direct = 2; 🎜>ブレーク;
ケース 40:
if(s.direct!=3)
s.direct = 1;
ブレーク
}
}
else
{
if(parseInt(event.that)==32)
{
alert("休憩")
}
else
{
switch(parseInt (event.that))
{
case 37 :
if(s.direct!=2)
s.direct = 0;ケース 38 :
if(s.direct!=1)
s.direct = 3;
ブレーク;
ケース 39:
if(s.direct!=0)
s.direct = 2 ;
ケース 40:
if(s.direct!=3)

; }
}
}
//ゲームモジュールを開始します
var s = new tongue();
var time = 60;//Snake の速度インデックス
function startmove()
{
if(s.move())
{
setTimeout(startmove, time)
}
else
{
alert("ゲームオーバーn あなたのスコアis:" スコア "ポイント");
}
}
//スコア設定
var core = -1;
//ゲームを実行
startmove();


Web ページに JS ファイルを接続するだけです。