コメント：ゲームの難しさは、貪欲なヘビの動きをシミュレートする方法です。それがただの正方形である場合、それは明らかに簡単です。しかし、ヘビが長くなった後にヘビの長さを制御する方法は？特定の実装の簡単な紹介を次に示します。興味のある友達はそれを参照できます。それがあなたに役立つことを願っています。
ゲーム操作の手順
矢印キーを使用して、ヘビの動きを左右に制御します。食いしん坊のヘビは、食べ物を食べた後に1つの長さになります。
ゲームの実装
ゲームの難しさは、貪欲なヘビの動きをシミュレートする方法です。それがただの正方形である場合、それは明らかに簡単です。しかし、ヘビが長くなった後にヘビの長さを制御する方法
各正方形の動きはどうですか？
ヘビの動きを観察すると、頭からヘビの尾まで、次の瞬間の各正方形の位置が現在の瞬間の前の正方形であることがわかります。
位置。ですから、私たちがする必要があるのは、食いしん坊のヘビの頭の動きを制御することです。他の部品の位置は順番に類推することができます。
別の注目すべき問題はです
ヘビが食べ物を食べた後、新しく追加されたブロックはどこに置かれるべきですか？
答えは、次の瞬間に、新しく追加されたブロックが現在の瞬間の尾の位置に表示されるはずだということです。
したがって、食べ物を食べた後、ヘビの各位置を更新する前に正方形を追加する必要があり、その位置は現在の瞬間の尾の位置に設定されます。
次に、現在の瞬間に、新しいブロックを除くすべてのブロックの位置が更新されます。
index.html
snake.js
var Canvas;
var ctx;
varタイマー;
//対策
var x_cnt = 15;
var y_cnt = 15;
varユニット= 48;
var box_x = 0;
var box_y = 0;
var box_width = 15 * unit;
var box_height = 15 * unit;
var bound_left = box_x;
var bound_right = box_x + box_width;
var bound_up = box_y;
var bound_down = box_y + box_height;
//画像
var image_sprite;
//オブジェクト
var Snake;
var Food;
var food_x;
var food_y;
//関数
関数の役割（SX、SY、SW、SH、方向、ステータス、速度、画像、フラグ）
{
this.x = sx;
this.y = sy;
this.w = sw;
this.h = sh;
this.direction = direction;
this.status = status;
this.speed = speed;
this.image = image;
this.flag = flag;
}
関数転送（keycode）
{
スイッチ（keycode）
{
ケース37：
返品1;
ケース38：
3を返します。
ケース39：
戻る2;
ケース40：
0を返します。
}
}
関数addfood（）
{
//food_x = box_x+math.floor(math.random( ）*(Box_Width-Unit）））;
//food_y = box_y+math.floor(math.random( ）*(Box_Height-Unit））;
food_x = unit * math.floor（math.random（） * x_cnt）;
food_y = unit * math.floor（math.random（） * y_cnt）;
food = new Roil（food_x、food_y、unit、unit、0、0、image_sprite、true）;
}
機能プレイ（イベント）
{
var keycode;
if（event == null）
{
keycode = window.event.keycode;
window.event.preventdefault（）;
}
それ以外
{
keycode = event.keycode;
event.preventdefault（）;
}
var cur_direction = transfer（keycode）;
snake [0] .direction = cur_direction;
}
function update（）
{
//ヘビを動かす前にヘビに新しい部分を追加する
if（snake [0] .x == food.x && snake [0] .y == food.y）
{
var length = snake.length;
var tail_x = snake [長さ-1] .x;
var tail_y = snake [長さ-1] .y;
var tail = new role（tail_x、tail_y、unit、unit、snake [length -1] .direction、0、0、image_sprite、true）;
snake.push（tail）;
addfood（）;
}
//属性を変更します
//頭を動かします
スイッチ（蛇[0]。方向）
{
ケース0：//ダウン
蛇[0] .y += unit;
if（snake [0] .y> bound_down -unit）
snake [0] .y = bound_down -unit;
壊す;
ケース1：//左
蛇[0] .x - = unit;
if（snake [0] .x <bound_left）
スネーク[0] .x = bound_left;
壊す;
ケース2：//右
蛇[0] .x += unit;
if（snake [0] .x> bound_right-ユニット）
蛇[0] .x = bound_right-ユニット;
壊す;
ケース3：// up
蛇[0] .y- = unit;
if（snake [0] .y <bound_up）
スネーク[0] .y = bound_up;
壊す;
}
//ヘビの他の部分を移動します
for（var i = snake.length-1; i> = 0; i--）
{
if（i> 0）
//snake [i] .direction=snake [i-1] .direction;
{
スネーク[i] .x =蛇[i -1] .x;
蛇[i] .y = snake [i -1] .y;
}
}
}
関数drawscene（）
{
ctx.clearrect（box_x、box_y、box_width、box_height）;
ctx.strokestyle = "rgb（0,0,0";
ctx.strokerect（box_x、box_y、box_width、box_height）;
//検出衝突
//画像を描画します
for（var i = 0; i <snake.length; i ++）
{
ctx.drawimage（image_sprite、snake [i] .x、snake [i] .y）;
}
ctx.drawimage（image_sprite、food.x、food.y）;
}
関数init（）
{
canvas = document.getElementById（ "シーン"）;
ctx = canvas.getContext（ '2d'）;
//画像
image_sprite = new image（）;
image_sprite.src = "images/sprite.png";
image_sprite.onload = function（）
{}
// ojects
Snake = new Array（）;
var head = new role（0 * unit、0 * unit、unit、unit、5、0、1、image_sprite、true）;
snake.push（head）;
window.addeventlistener（ 'keydown'、play、false）;
addfood（）;
SetInterval（更新、300）; //注記
setinterval（drawscene、30）;
}
関連する読書：63行のコードを使用して完全に実装されたHTML5スネークゲーム