تشاركك الأمثلة في هذه المقالة مع العرض التوضيحي للعبة Snake JS ، والتي يتم الانتهاء منها بحتة من قبل JS و CSS للرجوع إليها. المحتوى المحدد كما يلي
<! doctype html> <html> <meta charset = "utf-8"> <head> <style>*{margin: 0 ؛ Padding: 0 ؛} .Content {position: Absolute ؛ العرض: 500 بكسل ؛ الارتفاع: 500 بكسل ؛ لون الخلفية: #212121 ؛ } .colo {width: 48px ؛ الارتفاع: 48 بكسل ؛ لون الخلفية: #e6e6e6 ؛ الحدود: 1 بكسل Solid #466F85 ؛ تعويم: اليسار. . الحدود الحدودية: 10px ؛ حجم الخلفية: 100 ٪ ؛ الموقف: مطلق ؛ الارتفاع: 48 بكسل ؛ العرض: 48 بكسل ؛ . حجم الخلفية: 100 ٪ ؛ الموقف: مطلق ؛ الارتفاع: 48 بكسل ؛ العرض: 48 بكسل ؛ } .score {font-family: 'Bold' ؛ اليسار: 600 بكسل ؛ الموقف: مطلق ؛ الارتفاع: 50 بكسل ؛ العرض: 200 بكسل ؛ لون الخلفية: #212121 ؛ اللون: #fff ؛ . العرض: 48 بكسل ؛ الارتفاع: 48 بكسل ؛ صورة الخلفية: url (./ img/33.jpg) ؛ حجم الخلفية: 100 ٪ ؛ } .btn {font-family: 'Bold' ؛ اليسار: 600 بكسل ؛ أعلى: 100px ؛ الموقف: مطلق ؛ الارتفاع: 50 بكسل ؛ العرض: 100px ؛ خلفية اللون: #1193ff ؛ اللون: #fff ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 50 بكسل ؛ حجم الخط: 20 بكسل ؛ المؤشر: مؤشر. الحدود الحدودية: 15 بكسل ؛ } </style> </head> <body> <div id = "content"> </div> <div id = "stop"> أوقف اللعبة </div> <div style = "top: 180px" id = "start" type = "text/javaScript"> // أضف حالة var stop = document.getElementById ('stop') ؛ var start = document.getElementById ("start") ؛ var gameway = document.getElementById ('gameway') ؛ start.onclick = function () {head.value = '2' ؛ حادث = setInterval (move ، 200) ؛} stop.onclick = function () {clearinterval (uggen) ؛} // var content = document.getElementById ("content") ؛ لـ (var i = 0 ؛ i <100 ؛ i ++) {var div = document.createElement ("div") ؛ Div.ClassName = "colo" ؛ content.appendchild (div) ؛ } var scoreid = document.getElementById ("Score") ؛ var scorenum = 0 ؛ var scorecon = document.createElement ("p") ؛ // var scoretext = document.createTextNode (scorenum) ؛ // scorecon.appendchild (scoretext) ؛ Scoreid.AppendChild (ScoreCon) ؛ var head = null ؛ // حفظ رأس الثعبان var fruit = null ؛ // حفظ الفاكهة var dir = null ؛ // حفظ اتجاه الثعبان var body = new array () ؛ // حفظ الجزء المضافة من جسم الأفعى var bodynum = 0 ؛ // سجل عدد الأجسام التي يتم إنشاؤها // قم بإنشاء الرأس والفاكهة بشكل عشوائي في وظيفة createType (type) {if (type == 1) {// إنشاء رقم عشوائي var row = parseint (Math.Random () * 6 +2) ؛ var col = parseint (Math.Random () * 6 +2) ؛ Head = document.createElement ("div") ؛ head.className = "Head" ؛ head.style.top = row*50+"px" ؛ head.style.left = col*50+"px" ؛ content.appendchild (head) ؛ // head.style.top = ؛ // head.style.left = ؛ } if (type == 2) {// إنشاء رقم عشوائي var row = parseint (math.random () * 6 +2) ؛ var col = parseint (Math.Random () * 6 +2) ؛ fruit = document.createElement ("div") ؛ fruit.classname = "الفاكهة" ؛ fruit.style.width = "50" ؛ fruit.style.height = "50" ؛ fruit.style.backgroundColor = "#ea2000" ؛ fruit.style.top = row*50+"px" ؛ fruit.style.left = col*50+"px" ؛ content.appendchild (الفاكهة) ؛ }} // استدعاء طريقة الدعامة التي تم إنشاؤها CreateType (1) ؛ CreateType (2) ؛ // Snake Head Movement function var direction = new array ؛ // احفظ اتجاه كل الجسم الذي تم إنشاؤه حديثًا // رقم التحويل var numss = 0 ؛ // وظيفة حدث الانزلاق التلقائي MOVE () {if (head.value! = "") {switch (head.value) {case '1': head.style.top = head.offsettop-50+"px" ؛ استراحة؛ الحالة '2': head.style.top = head.offsettop+50+"px" ؛ استراحة؛ الحالة '3': head.style.left = head.offsetleft-50+"px" ؛ استراحة؛ Case '4': head.style.left = head.offsetleft+50+"px" ؛ استراحة؛ }} console.log (head.offsettop) ؛ if (head.offsettop> 500) {Alert ("تجاوز الحدود! يرجى إعادة التشغيل") ؛ } // if (head == null) {// if (head.style.top <0 || head.style.top> 500 || head.style.left <0 || head.style.left> 500) {// alert ("تجاوز الحدود! يرجى إعادة") ؛ //} if (body.length! = 0) {for (var i = body.length-1 ؛ i> = 0 ؛ i-) {if (i == 0) {body [0] .value = head.value ؛ } آخر {body [i] .value = body [i-1] .value ؛ }}} // تحويل الاتجاه // إذا تم تناول الحدث بعد الفاكهة بنجاح إذا (head.style.top == fruit.style.top && head.style.left == fruit.style.left) {var row = parseint (math.random () * 6 +2) ؛ var col = parseint (Math.Random () * 6 +2) ؛ fruit.style.top = row*50+"px" ؛ fruit.style.left = col*50+"px" ؛ // سجل scorenum = scorenum+1 ؛ document.getElementsByTagName ('p') [0] .innertext = "" ؛ document.getElementsByTagName ('p') [0] .innertext = scorenum ؛ // إنشاء جزء الجسم bodyadd (head.style.top ، head.style.left ، head.value) ؛ }. body01.style.top = head.offsettop+"px" ؛ body01.style.left = head.offsetleft+"px" ؛ Switch (head.value) {case '1': body01.style.top = head.offsettop+50+"px" ؛ body01.style.left = head.offsetleft+"px" ؛ استراحة؛ الحالة '2': body01.style.top = head.offsettop-50+"px" ؛ body01.style.left = head.offsetleft+"px" ؛ استراحة؛ الحالة '3': body01.style.left = head.offsetleft+50+"px" ؛ body01.style.top = head.offsettop+"px" ؛ استراحة؛ الحالة '4': body01.style.left = head.offsetleft-50+"px" ؛ body01.style.top = head.offsettop+"px" ؛ استراحة؛ }} if (body.length> 1) {body [bodynum-1] .value = body [bodynum-2] .value ؛ لـ (var i = 1 ؛ i <body.length ؛ i ++) {var nu = i+1 ؛ var bodyid = document.getElementById ('body0'+nu) ؛ var body_id = document.getElementById ('body0'+i) ؛ bodyid.style.top = body_id.offsettop+"px" ؛ bodyid.style.left = body_id.offsetleft+"px" ؛ التبديل (الجسم [bodynum- (body.length-i)]. القيمة) {case '1': bodyid.style.top = body_id.offsettop+50+"px" ؛ bodyid.style.left = body_id.offsetleft+"px" ؛ استراحة؛ الحالة '2': bodyid.style.top = body_id.offsettop-50+"px" ؛ bodyid.style.left = body_id.offsetleft+"px" ؛ استراحة؛ الحالة '3': bodyid.style.left = body_id.offsetleft+50+"px" ؛ bodyid.style.top = body_id.offsettop+"px" ؛ استراحة؛ الحالة '4': bodyid.style.left = body_id.offsetleft-50+"px" ؛ bodyid.style.top = body_id.offsettop+"px" ؛ استراحة؛ }}}} // إنشاء زر زمن وقت المستند. Switch (Code) {// up case 38: head.value = '1' ؛ استراحة؛ // Down Case 40: head.value = '2' ؛ استراحة؛ // اليسار 37: head.value = '3' ؛ استراحة؛ // case 39 إلى اليمين: head.value = '4' ؛ استراحة؛ console.log (head.value) ؛ }} // زيادة الجسم وظيفة الحدث bodyadd (أعلى ، اليسار ، dir) {if (dir! = "") {dir = dir ؛ } آخر {dir = head.value ؛ } // إنشاء الجسم لأول مرة if (bodynum == 0) {var newbody = document.createElement ('div') ؛ newbody.className = "NewBody" ؛ newbody.id = "body01" ؛ Switch (dir) {case '1': newbody.style.top = head.offsettop-50+'px' ؛ newbody.style.left = head.offsetleft+"px" ؛ استراحة؛ الحالة '2': newbody.style.top = head.offsettop+50+'px' ؛ newbody.style.left = head.offsetleft+"px" ؛ استراحة؛ الحالة '3': newbody.style.left = head.offsetleft-50+'px' ؛ newbody.style.top = head.offsettop+"px" ؛ استراحة؛ الحالة '4': newbody.style.left = head.offsetleft+50+'px' ؛ newbody.style.top = head.offsettop+"px" ؛ استراحة؛ } content.appendChild (newbody) ؛ bodynum = bodynum+1 ؛ body.push (newbody) ؛ } آخر {// إنشاء var newbody = document.createElement ('div') ؛ newbody.className = "NewBody" ؛ newbody.id = "body0"+(body.length+1) ؛ Switch (dir) {case '1': newbody.style.top = body [body.length-1] .OffSetTOP-50+'px' ؛ newbody.style.left = body [body.length-1] .offSetLeft+"px" ؛ استراحة؛ الحالة '2': newbody.style.top = body [body.length-1] .OffSettop+50+'px' ؛ newbody.style.left = body [body.length-1] .offSetLeft+"px" ؛ استراحة؛ الحالة '3': newbody.style.left = body [body.length-1] .offsetleft-50+'px' ؛ newbody.style.top = body [body.length-1] .OffSetTop+"px" ؛ استراحة؛ الحالة '4': newbody.style.left = body [body.length-1] .offsetleft+50+'px' ؛ newbody.style.top = body [body.length-1] .OffSetTop+"px" ؛ استراحة؛ } content.appendChild (newbody) ؛ bodynum = bodynum+1 ؛ body.push (newbody) ؛ } // body.push (content) ؛} // تجاوز الحدود ، أعد تعيين وظيفة حدث المعلومات () {// إعادة تعيين ROW fruit var = parseint (Math.Random () * 6 +2) ؛ var col = parseint (Math.Random () * 6 +2) ؛ fruit.style.top = row*50+"px" ؛ fruit.style.left = col*50+"px" ؛ // Record Score document.getElementSbyTagName ('p') [0] .innertext = "" ؛ // إعادة ضبط Snake Snake} var. حادث = setInterval (move ، 200) ؛ // إضافة عمليات // var btn = document.getElementById ('btn') ؛ // btn.onclick = function () {// clearinterval (uggen) ؛ //} // </script> </body> </html>لا يزال يتم تحسينه ، وآمل أن يكون مفيدًا لتعلم الجميع.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.