HTML5 أفكار تنفيذ لعبة الأفعى والرمز المصدر

التعليق: صعوبة اللعبة هي كيفية محاكاة حركة الثعبان الجشع. من الواضح أنه بسيط إذا كان مجرد مربع. ومع ذلك ، كيف تتحكم في طول الأفعى بعد أن تصبح أطول؟ فيما يلي مقدمة موجزة للتنفيذ المحدد. يمكن للأصدقاء المهتمين الرجوع إليها. آمل أن يكون ذلك مفيدًا لك.

تعليمات تشغيل اللعبة

استخدم مفاتيح الأسهم للتحكم في حركة الثعبان لأعلى ولأسفل ، اليسار واليمين. سوف ينمو الأفعى الشهية طولًا واحدًا بعد تناول الطعام.

تنفيذ اللعبة

صعوبة اللعبة هي كيفية محاكاة حركة الثعبان الجشع. من الواضح أنه بسيط إذا كان مجرد مربع. ولكن كيفية التحكم في طول الأفعى بعد أن يصبح أطول

ماذا عن حركة كل مربع؟

إذا لاحظت حركة الثعبان ، فيمكنك أن تجد ذلك من الرأس إلى ذيل الأفعى ، فإن موضع كل مربع في اللحظة التالية هو مربعه السابق في اللحظة الحالية.

موقع. لذلك كل ما نحتاج إلى فعله هو التحكم في حركة رأس الأفعى الشهية. يمكن أن تكون مواقف الأجزاء الأخرى تقليرا بدورها.

قضية أخرى جديرة بالملاحظة

بعد أن يأكل الأفعى الطعام ، أين يجب وضع الكتل المضافة حديثًا؟

الجواب هو أنه في اللحظة التالية ، يجب أن تظهر الكتلة المضافة حديثًا في موضع الذيل في اللحظة الحالية.

لذلك ، بعد تناول الطعام ، يجب إضافة مربع قبل تحديث كل موضع للثعبان ويتم تعيين موضعه في وضع الذيل في اللحظة الحالية.

ثم ، في اللحظة الحالية ، يتم تحديث مواضع جميع الكتل باستثناء الكتل الجديدة.

index.html

الأفعى

var canvas.

var ctx ؛

var timer ؛

//مقاسات

var x_cnt = 15 ؛

var y_cnt = 15 ؛

وحدة var = 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 food_x ؛

var food_y ؛

// وظائف

دور الوظيفة (SX ، SY ، SW ، SH ، الاتجاه ، الحالة ، السرعة ، الصورة ، العلم)

{

this.x = sx ؛

this.y = sy ؛

this.w = sw ؛

this.h = sh ؛

this.direction = الاتجاه ؛

this.status = الحالة ؛

this.peed = السرعة ؛

this.image = صورة ؛

this.flag = 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_x ، food_y ، الوحدة ، الوحدة ، 0 ، 0 ، image_sprite ، true) ؛

}

تشغيل الوظيفة (الحدث)

{

Var keycode ؛

إذا (الحدث == فارغ)

{

keycode = window.event.keycode ؛

window.event.preventDefault () ؛

}

آخر

{

keycode = event.keycode ؛

Event.PreventDefault () ؛

}

var cur_direction = transfer (keycode) ؛

الأفعى [0]. الاتجاه = cur_direction ؛

}

تحديث الوظيفة ()

{

// أضف جزءًا جديدًا إلى الأفعى قبل تحريك الأفعى

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 = دور جديد (tail_x ، tail_y ، الوحدة ، الوحدة ، الأفعى [الطول - 1]. الاتجاه ، 0 ، 0 ، image_sprite ، صواب) ؛

Snake.push (الذيل) ؛

addfood () ؛

}

// تعديل السمات

// mov الرأس

التبديل (الثعبان [0]. الاتجاه)

{

الحالة 0: // لأسفل

الأفعى [0] .y += الوحدة ؛

if (Snake [0] .y> bound_down - وحدة)

الأفعى [0] .y = bound_down - وحدة ؛

استراحة؛

الحالة 1: // اليسار

الأفعى [0] .x -= الوحدة ؛

إذا (الأفعى [0] .x <bound_left)

الأفعى [0] .x = bound_left ؛

استراحة؛

الحالة 2: // الحق

الأفعى [0] .x += الوحدة ؛

if (Snake [0] .x> Bound_Right - Unit)

الأفعى [0] .x = pound_right - الوحدة ؛

استراحة؛

الحالة 3: // UP

الأفعى [0] .y -= الوحدة ؛

إذا (الأفعى [0] .y <bound_up)

الأفعى [0] .y = bound_up ؛

استراحة؛

}

// حرك الجزء الآخر من الثعبان

لـ (var i = snake.length-1 ؛ i> = 0 ؛ i--)

{

إذا (أنا> 0)

//snake budapi.

{

الأفعى [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.StrokEct (box_x ، box_y ، box_width ، box_height) ؛

// الاكتشاف الاصطدام

// ارسم الصور

لـ (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 = "الصور/sprite.png" ؛

image_sprite.onload = function ()

{}

// ojects

الأفعى = صفيف جديد () ؛

VAR HEAD = دور جديد (0 * وحدة ، 0 * الوحدة ، الوحدة ، الوحدة ، 5 ، 0 ، 1 ، Image_sprite ، صواب) ؛

Snake.push (الرأس) ؛

window.addeventListener ('keydown' ، play ، false) ؛

addfood () ؛

setInterval (تحديث ، 300) ؛ //ملحوظة

setInterval (DrawScene ، 30) ؛

}

القراءة ذات الصلة: لعبة HTML5 Snake تم تنفيذها تمامًا باستخدام 63 سطرًا من التعليمات البرمجية