تشترك الأمثلة في هذه المقالة في الكود ذي الصلة للعبة Snake JS للرجوع إليها. المحتوى المحدد كما يلي
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> لعبة الأفعى </title> <style>*{margin: 0 ؛ Padding: 0 ؛} header {display: block ؛ الهامش: 0 Auto ؛ العرض: 500 بكسل ؛ النصوص النصية: المركز ؛} رأس H1 {font-family: arial ؛ font-weight: Bold ؛} header #newgameButton {display: block ؛ الهامش: 20 بكسل Auto ؛ العرض: 100px ؛ الحشو: 10px 10px ؛ خلفية اللون: #8F7A66 ؛ Font-Family: Arial ؛ اللون: أبيض. الحدود الحدودية: 10px ؛ نص النص: none ؛} header #newgameButton: hover {background-color: #9f8b7 ؛} header p {font-family: arial ؛ حجم الخط: 25 بكسل ؛ الهامش: 20px Auto ؛} canvas {display: block ؛ الحدود: أسود مزدوج متوسط ؛ الهامش: 4px Auto ؛} </style> </head> <body> <header> <h1> لعبة الأفعى </h1> <a href = "javaScript: newGame () ؛" id = "newGameButton"> لعبة جديدة </a> <p> SCORE: <span id = "score"> 0 </p> </p> </header> <canvas id = "canvas"> لا يدعم متصفحك <code> canvas </code> عنصر. </canvas> <script> var canvas = document.getElementById ("canvas") ؛ var ctx = canvas.getContext ("2d") ؛ var snake = new array () ؛ // محاكاة جسم الأفعى var مع قائمة انتظار dir = "right" ؛ // استخدم للتحكم في اتجاه رأس Snake VAR SIZE = 20 ؛ // عرض جسم الأفعى var foodx = 0 ؛ // الإحداثيات x من food var foody = 0 ؛ // إحداثي y من Food var Headx = 0 ؛ // الإحداثيات x من رأس الأفعى var heady = 0 ؛ // إحداثي y من رأس الأفعى var maxwidth = 200 ؛ // ارتفاع القماش var maxheight = 200 ؛ // عرض Canvas var time = 400 ؛ // سرعة Snake var Score = 0 ؛ // حساب درجة اللاعب var vertal = null ؛ canvas.width = maxwidth ؛ canvas.height = maxheight ؛ window.onload = function () {newgame () ؛} ؛ document.getElementById ( // استخدم قائمة الانتظار لمحاكاة جسم الأفعى dir = "right" ؛ // استخدم للتحكم في اتجاه Headx رأس الأفعى = 0 ؛ // الإحداثيات x من رأس الأفعى heady = 0 ؛ // إحداثي y من درجة رأس الأفعى = 0 ؛ window.clearinterval (الفاصل) ؛ الفاصل الزمني = فارغ ؛ // تهيئة canvas ctx.clearrect (0 ، 0 ، maxwidth ، maxheight) ؛ // ارسم ثعبان drawsnake () ؛ // Port Food Setfood () ؛ // Move Snake الفاصل الزمني = window.setInterval (تحرك ، الوقت) ؛} وظيفة move () {switch (dir) {case up ": heady = heady-size ؛ break ؛ حالة "يمين": Headx = Headx+Size ؛ Break ؛ حالة "لأسفل": heady = heady+size ؛ break ؛ حالة "اليسار": Headx = Headx-Size ؛ Break ؛ } if (Headx> maxwidth-size || heady> maxheight-size || headx <0 || heady <0) {Alert ("الخاص بك هي:"+Score+"، استمر في العمل بجد! سبب الفشل: ركضت في الجدار ......") ؛ window.location.reload () ؛ } لـ (var i = 1 ؛ i <snake.length ؛ i ++) {if (snake [i] [0] == Snake [0] window.location.reload () ؛ }} if (snake.length == maxwidth *maxHeight) {Alert ("So Awesome! ~") ؛ window.location.reload () ؛ } movein (Headx ، heady) ؛ // نقل شبكة واحدة} document.onkeydown = function (e) {// تغيير رمز Var Direction Direction = E.KeyCode - 37 ؛ التبديل (رمز) {الحالة 1: dir = "up" ؛ break ؛ // on case 2: dir = "right" ؛ break ؛ // اليمين 3: dir = "down" ؛ break ؛ // down case 0: dir = "left";break;//Left}}//================================================================================================ ========================================================== ========================================================== ========================================================== ========================================================== ========================================================== ========================================================== Snake.push ([Headx ، Heady]) ؛ // Drawing Snake Body Switch (dir) {case "up": drawBody (Headx ، Heady + size ، Headx ، Heady + 2 * size) ؛ استراحة؛ حالة "يمين": drawbody (Headx - size ، heady ، headx - 2 * size ، heady) ؛ استراحة؛ حالة "Down": drawbody (Headx ، heady - size ، headx ، heady - 2 * size) ؛ استراحة؛ حالة "اليسار": drawbody (headx + size ، heady ، headx + 2 * size ، heady) ؛ استراحة؛ }} drawbody (x1 ، y1 ، x2 ، y2) {ctx.fillRect (x1 ، y1 ، size ، size) ؛ ctx.fillRect (x2 ، y2 ، الحجم ، الحجم) ؛ snake.push ([x1 ، y1]) ؛ Snake.push ([x2 ، y2]) ؛} // ====================================================== =============================================================== =============================================================== =============================================================== =============================================================== =============================================================== =============================================================== =============================================================== foody ، الحجم ، الحجم) ؛} وظيفة foodinsnake () {for (var i = 0 ؛ i <snake.length ؛ i ++) {if (foodx == snake [i] [0] && foody == snake [i] [1]) {return true ؛ } } يعود false ؛} // ========================================================================================================================= ================================================================================================================================= ================================================================================================================================= ==================================================================================================================================== ctx.fillrect (x ، y ، size ، size) ؛ // repraw رأس الأفعى // أضف رأس الأفعى الجديد إلى صفيف الأفعى var newsnake = [[x ، y]] ؛ الأفعى = newsnake.concat (الأفعى) ؛ إذا (false == eatfood ()) {// إذا كنت لا تأكل الطعام ، فقم بتقليل ذيل الأفعى واحد var snaketail = snake.pop () ؛ // احصل على موضع ذيل الأفعى ctx.clearrect (snaketail [0] ، snaketail [1] ، الحجم ، الحجم) ctx.fillstyle = "block" ؛ ctx.fillRect (Foodx ، foody ، الحجم ، الحجم) ؛ setFood () ؛ النتيجة ++ ؛ //$("#score").text(score) ؛ document.getElementById ("SCORE"). innerhtml = score ؛ العودة صحيح. } إرجاع false ؛} </script> </html>صورة التكاثر:
الأفكار:
وظيفة newGame () {إعادة تعيين بيانات الثعبان والكسور ؛ فاصل واضح تهيئة قماش. ارسم ثعبان ضع الطعام استخدم مؤقتًا (setInterval) لتحريك الثعبان (نقل وظيفة) ؛ } وظيفة move () {تغيير موضع خط العرض التالي لرأس الأفعى وفقًا للاتجاه ؛ تحديد ما إذا كانت اللعبة قد انتهت وسبب النهاية (بما في ذلك الفوز أو الخسارة) ؛ الأفعى تحرك خط عرض واحد (وظيفة movein) ؛ } مراقبة مفاتيح اتجاه لوحة المفاتيح ، وتعديل قيمة المتغير العالمي DIR (المستخدم لتخزين الاتجاه) ؛ وظيفة movein () {أضف خط عرض إلى خط العرض السابق لرأس الأفعى كرأس ثعبان جديد ، وأضف إحداثيات رأس الأفعى كعنصر أول إلى الصفيف الذي يمثل الثعبان ؛ إذا (لم يتم تناول أي طعام) {حذف خط عرض لذيل الأفعى وإجراء تغييرات مماثلة في القماش ؛ }}تجدر الإشارة إلى أنه إذا كنت بحاجة إلى ضبط العرض والارتفاع في قماش في JS ، فهذا يختلف قليلاً عن وضع خصائص CSS الأخرى.
canvas.width = maxwidth ؛ canvas.height = maxheight ؛
أعد المحرر أيضًا موضوعًا رائعًا للجميع: ملخص لألعاب JavaScript الكلاسيكية
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.