HTML5 スネーク ゲーム実装のアイデアとソース コード_html5 チュートリアルのスキル

ゲーム操作説明

方向キーを使用して貪欲なヘビを上下左右に動かします。貪欲なヘビは食べ物を食べると体長が伸びます。

ゲームの具体的な実装

ゲームの難しさは、貪欲な蛇の動きをどのようにシミュレートするかです。単なるブロックであれば、明らかに非常に簡単です。しかし、ヘビの長さが長くなると、各ブロック

の動きをどのように制御するのでしょうか?

ヘビの動きを観察すると、ヘビの頭から尻尾まで、次の瞬間の各ブロックの位置が、その時点での前のブロックの位置であることがわかります。現在の瞬間

場所。したがって、私たちがしなければならないのは、ヘビの頭の動きを制御することだけです。他の部品の位置は類推して推測できます。

もう 1 つの注目すべき問題は、

貪欲なヘビが餌を食べた後、新しく追加されたブロックをどこに配置するかです。

答えは、次の瞬間には、新しく追加されたブロックが現在の瞬間の最後に表示されるはずです。

したがって、餌を食べた後、ヘビの各位置を更新する前にブロックを追加し、その位置を現時点の尻尾の位置に設定する必要があります。

すると、新しく追加されたブロックを除くすべてのブロックの位置が現時点で更新されます。

index.html
snake.js

コードは次のとおりです。

var canvas; 
var ctx; 
var timer; 
//measures 
var x_cnt = 15; 
var y_cnt = 15; 
var unit = 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; 
//images 
var image_sprite; 
//objects 
var snake; 
var food; 
var food_x; 
var food_y; 
//functions 
function Role(sx, sy, sw, sh, direction, status, speed, image, flag) 
{ 
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; 
} 
function transfer(keyCode) 
{ 
switch (keyCode) 
{ 
case 37: 
return 1; 
case 38: 
return 3; 
case 39: 
return 2; 
case 40: 
return 0; 
} 
} 
function 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 Role(food_x, food_y, unit, unit, 0, 0, 0, image_sprite, true); 
} 
function play(event) 
{ 
var keyCode; 
if (event == null) 
{ 
keyCode = window.event.keyCode; 
window.event.preventDefault(); 
} 
else 
{ 
keyCode = event.keyCode; 
event.preventDefault(); 
} 
var cur_direction = transfer(keyCode); 
snake[0].direction = cur_direction; 
} 
function update() 
{ 
//add a new part to the snake before move the snake 
if (snake[0].x == food.x && snake[0].y == food.y) 
{ 
var length = snake.length; 
var tail_x = snake[length - 1].x; 
var tail_y = snake[length - 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(); 
} 
//modify attributes 
//move the head 
switch (snake[0].direction) 
{ 
case 0: //down 
snake[0].y += unit; 
if (snake[0].y > bound_down - unit) 
snake[0].y = bound_down - unit; 
break; 
case 1: //left 
snake[0].x -= unit; 
if (snake[0].x < bound_left) 
snake[0].x = bound_left; 
break; 
case 2: //right 
snake[0].x += unit; 
if (snake[0].x > bound_right - unit) 
snake[0].x = bound_right - unit; 
break; 
case 3: //up 
snake[0].y -= unit; 
if (snake[0].y < bound_up) 
snake[0].y = bound_up; 
break; 
} 
//move other part of the snake 
for (var i = snake.length - 1; i >= 0; i--) 
{ 
if (i > 0) 
//snake[i].direction=snake[i-1].direction; 
{ 
snake[i].x = snake[i - 1].x; 
snake[i].y = snake[i - 1].y; 
} 
} 
} 
function 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); 
//detection collisions 
//draw images 
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); 
} 
function init() 
{ 
canvas = document.getElementById("scene"); 
ctx = canvas.getContext(&#39;2d&#39;); 
//images 
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(&#39;keydown&#39;, play, false); 
addFood(); 
setInterval(update, 300); //note 
setInterval(drawScene, 30); 
}