의견 : 게임의 어려움은 탐욕스러운 뱀의 움직임을 시뮬레이션하는 방법입니다. 정사각형이라면 분명히 간단합니다. 그러나 뱀이 길어진 후에 뱀의 길이를 조절하는 방법은 무엇입니까? 다음은 특정 구현에 대한 간단한 소개입니다. 관심있는 친구들이 그것을 언급 할 수 있습니다. 나는 그것이 당신에게 도움이되기를 바랍니다.
게임 운영 지침
화살표 키를 사용하여 뱀의 움직임을 왼쪽과 오른쪽으로 제어하십시오. 멍청한 뱀은 음식을 먹은 후 한 번의 길이가 자랍니다.
게임 구현
게임의 어려움은 탐욕스러운 뱀의 움직임을 시뮬레이션하는 방법입니다. 정사각형이라면 분명히 간단합니다. 그러나 뱀이 길어진 후 뱀의 길이를 조절하는 방법
각 광장의 움직임은 어떻습니까?
뱀의 움직임을 관찰하면 머리에서 뱀의 꼬리까지 다음 순간의 각 정사각형의 위치가 현재 순간의 이전 광장임을 알 수 있습니다.
위치. 따라서 우리가해야 할 일은 멍청한 뱀의 머리의 움직임을 통제하는 것입니다. 다른 부분의 위치는 차례로 유사 할 수 있습니다.
또 다른 주목할만한 문제는입니다
뱀이 음식을 먹은 후에 새로 추가 된 블록은 어디에 배치해야합니까?
답은 다음 순간에 새로 추가 된 블록이 현재 순간의 꼬리 위치에 나타나야한다는 것입니다.
따라서 음식을 먹은 후에는 뱀의 각 위치를 업데이트하기 전에 정사각형을 추가해야하며 위치는 현재 순간의 꼬리 위치에 설정됩니다.
그런 다음 현재 순간에 새 블록을 제외한 모든 블록의 위치가 업데이트됩니다.
index.html
뱀 .js
var 캔버스;
var ctx;
var 타이머;
// 측정
var x_cnt = 15;
var y_cnt = 15;
var unit = 48;
var box_x = 0;
var box_y = 0;
var box_width = 15 * 단위;
var box_height = 15 * 단위;
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 뱀;
var 음식;
var food_x;
var food_y;
// 함수
기능 역할 (SX, SY, SW, SH, 방향, 상태, 속도, 이미지, 플래그)
{
this.x = sx;
this.y = sy;
this.w = sw;
this.h = sh;
이것은 방향 = 방향;
this.status = 상태;
이 .speed = 속도;
this.image = 이미지;
this.flag = 플래그;
}
함수 전송 (키 코드)
{
스위치 (키 코드)
{
사례 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 역할 (Food_x, Food_y, Unit, Unit, 0, 0, image_sprite, true);
}
기능 재생 (이벤트)
{
var 키 코드;
if (event == null)
{
KeyCode = Window.event.KeyCode;
Window.event.preventDefault ();
}
또 다른
{
keycode = event.keyCode;
event.preventDefault ();
}
var cur_direction = 송환 (키 코드);
뱀 [0]. 방향 = cur_direction;
}
함수 업데이트 ()
{
// 뱀을 움직이기 전에 뱀에 새로운 부분을 추가
if (뱀 [0] .x == food.x && 뱀 [0] .y == food.y)
{
var 길이 = 뱀. 길이;
var tail_x = 뱀 [길이 -1] .x;
var tail_y = 뱀 [길이 -1] .y;
var tail = 새로운 역할 (tail_x, tail_y, 단위, 단위, 뱀 [길이 -1]. 방향, 0, 0, image_sprite, true);
Snake.push (꼬리);
addfood ();
}
// 속성을 수정합니다
// 머리를 움직입니다
스위치 (뱀 [0]. 방향)
{
사례 0 : // 다운
뱀 [0] .y += 단위;
if (뱀 [0] .y> bound_down- 유닛)
뱀 [0] .y = bound_down- 단위;
부서지다;
사례 1 : // 왼쪽
뱀 [0] .x- = 단위;
if (뱀 [0] .x <bound_left)
뱀 [0] .x = bound_left;
부서지다;
사례 2 : // 오른쪽
뱀 [0] .x += 단위;
if (뱀 [0] .x> bound_right- 단위)
뱀 [0] .x = bound_right- 단위;
부서지다;
사례 3 : // UP
뱀 [0] .y- = 단위;
if (뱀 [0] .y <bound_up)
뱀 [0] .y = bound_up;
부서지다;
}
// 뱀의 다른 부분을 움직입니다
for (var i = snake.length-1; i> = 0; i-)
{
if (i> 0)
//snake].
{
뱀 [i] .x = 뱀 [i -1] .x;
뱀 [i] .y = 뱀 [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, 뱀 [i] .x, 뱀 [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
뱀 = 새로운 배열 ();
var head = 새로운 역할 (0 * 단위, 0 * 단위, 단위, 단위, 5, 0, 1, image_sprite, true);
Snake.push (머리);
window.addeventListener ( 'keydown', play, false);
addfood ();
SetInterval (업데이트, 300); //메모
SetInterval (DrawScene, 30);
}
관련 읽기 : HTML5 뱀 게임 63 줄의 코드를 사용하여 완벽하게 구현