Komentar: Kesulitan permainan ini adalah bagaimana mensimulasikan pergerakan ular rakus. Jelas sederhana jika hanya persegi. Namun, bagaimana mengontrol panjang ular setelah menjadi lebih lama? Berikut adalah pengantar singkat untuk implementasi spesifik. Teman yang tertarik dapat merujuknya. Saya harap ini akan membantu Anda.
Instruksi Operasi Game
Gunakan tombol panah untuk mengontrol pergerakan ular ke atas dan ke bawah, kiri dan kanan. Ular rakus akan tumbuh satu panjang setelah makan.
Implementasi Game
Kesulitan permainan ini adalah bagaimana mensimulasikan pergerakan ular serakah. Jelas sederhana jika hanya persegi. Tapi bagaimana mengontrol panjang ular setelah menjadi lebih lama
Bagaimana dengan pergerakan setiap kotak?
Jika Anda mengamati pergerakan ular, Anda dapat menemukannya dari kepala ke ekor ular, posisi setiap kotak pada saat berikutnya adalah kotak sebelumnya pada saat saat ini.
Lokasi. Jadi yang perlu kita lakukan adalah mengendalikan pergerakan kepala ular rakus. Posisi bagian lain dapat dianalogikan pada gilirannya.
Masalah penting lainnya adalah
Setelah ular makan makanan, di mana blok yang baru ditambahkan ditempatkan?
Jawabannya adalah bahwa pada saat berikutnya, blok yang baru ditambahkan harus muncul pada posisi ekor saat saat ini.
Oleh karena itu, setelah makan makanan, persegi harus ditambahkan sebelum memperbarui setiap posisi ular dan posisinya ditetapkan pada posisi ekor saat saat ini.
Kemudian, pada saat saat ini, posisi semua blok kecuali blok baru diperbarui.
index.html
Snake.js
Var Canvas;
var ctx;
var timer;
// langkah -langkah
var x_cnt = 15;
var y_cnt = 15;
unit 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;
// gambar
var image_sprite;
// objek
var ular;
makanan var;
var food_x;
var food_y;
// fungsi
Peran fungsi (SX, SY, SW, SH, arah, status, kecepatan, gambar, bendera)
{
this.x = sx;
this.y = sy;
this.w = sw;
this.h = sh;
this.direction = arah;
this.status = status;
this.speed = speed;
this.image = gambar;
this.flag = bendera;
}
transfer fungsi (kode kunci)
{
sakelar (kode kunci)
{
Kasus 37:
kembali 1;
Kasus 38:
kembali 3;
Kasus 39:
kembali 2;
Kasus 40:
kembali 0;
}
}
fungsi 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);
makanan = peran baru (food_x, food_y, unit, unit, 0, 0, image_sprite, true);
}
function play (event)
{
VaR keycode;
if (event == null)
{
KeyCode = window.event.keycode;
window.event.preventdefault ();
}
kalau tidak
{
KeyCode = Event.KeyCode;
event.preventdefault ();
}
var cur_direction = transfer (kode kunci);
Snake [0] .direction = cur_direction;
}
pembaruan fungsi ()
{
// Tambahkan bagian baru ke ular sebelum memindahkan ular
if (ular [0] .x == food.x && ular [0] .y == food.y)
{
var length = snake.length;
var tail_x = ular [panjang - 1] .x;
var tail_y = ular [panjang - 1] .y;
var tail = peran baru (tail_x, tail_y, unit, unit, ular [panjang - 1] .direction, 0, 0, Image_sprite, true);
snake.push (ekor);
addFood ();
}
// Ubah atribut
// Pindahkan kepala
sakelar (ular [0] .direksi)
{
Kasus 0: // Down
ular [0] .y += unit;
if (ular [0] .y> bound_down - unit)
ular [0] .y = bound_down - unit;
merusak;
Kasus 1: // Kiri
ular [0] .x -= unit;
if (ular [0] .x <bound_left)
Snake [0] .x = Bound_Left;
merusak;
Kasus 2: // Benar
ular [0] .x += unit;
if (ular [0] .x> Bound_Right - Unit)
Snake [0] .x = Bound_Right - Unit;
merusak;
Kasus 3: // Up
ular [0] .y -= unit;
if (ular [0] .y <bound_up)
ular [0] .y = bound_up;
merusak;
}
// Pindahkan bagian ular lain
untuk (var i = snake.length-1; i> = 0; i--)
{
if (i> 0)
//snakehti media
{
ular [i] .x = ular [i - 1] .x;
ular [i] .y = ular [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);
// tabrakan deteksi
// Gambar gambar
untuk (var i = 0; i <snake.length; i ++)
{
ctx.drawimage (gambar_sprite, ular [i] .x, ular [i] .y);
}
ctx.drawimage (gambar_sprite, food.x, food.y);
}
fungsi init ()
{
canvas = document.getElementById ("scene");
ctx = canvas.getContext ('2d');
// gambar
image_sprite = gambar baru ();
Image_sprite.src = "Images/Sprite.png";
image_sprite.onload = function ()
{}
// ojects
ular = array baru ();
var head = peran baru (0 * unit, 0 * unit, unit, unit, 5, 0, 1, Image_sprite, true);
snake.push (kepala);
window.addeventListener ('keydown', mainkan, false);
addFood ();
setInterval (pembaruan, 300); //catatan
setInterval (DrawScene, 30);
}
Bacaan Terkait: Game Ular HTML5 Diimplementasikan dengan Sempurna Menggunakan 63 Baris Kode