Ideen zur Implementierung von HTML5-Snake-Spielen und Fähigkeiten im Tutorial zu Quellcode_html5

Spielanleitung

Verwenden Sie die Richtungstasten, um die gierige Schlange so zu steuern, dass sie sich nach oben, unten, links und rechts bewegt. Eine gierige Schlange wird länger, nachdem sie Nahrung aufgenommen hat.

Die spezifische Umsetzung des Spiels

Die Schwierigkeit des Spiels besteht darin, die Bewegung der gierigen Schlange zu simulieren. Es ist natürlich sehr einfach, wenn es nur ein Block ist. Aber wenn die Länge der Schlange länger wird, wie kann man dann die Bewegung jedes Blocks steuern

?

Wenn Sie die Bewegung der Schlange beobachten, können Sie feststellen, dass die Position jedes Blocks vom Kopf bis zum Schwanz der Schlange im nächsten Moment der Position des vorherigen Blocks entspricht aktueller Moment

Standort. Wir müssen also nur die Bewegung des Schlangenkopfes kontrollieren. Die Positionen anderer Teile können analog abgeleitet werden.

Ein weiteres erwähnenswertes Problem ist

Nachdem die gierige Schlange das Futter gefressen hat, wo sollten die neu hinzugefügten Blöcke platziert werden?

Die Antwort ist, dass im nächsten Moment der neu hinzugefügte Block am Ende des aktuellen Moments erscheinen sollte.

Daher sollten Sie nach dem Essen einen Block hinzufügen, bevor Sie jede Position der Schlange aktualisieren, und ihre Position auf die Schwanzposition im aktuellen Moment einstellen.

Dann werden die Positionen aller Blöcke außer den neu hinzugefügten Blöcken zum aktuellen Zeitpunkt aktualisiert

index.html
snake.js

Der Code lautet wie folgt:

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); 
}