النسخة الكاملة من JavaScript Snake مشروحة بالكامل وموجهة نحو الكائنات
انسخ رمز الكود كما يلي:
<أتش تي أم أل>
<الرأس>
<title>الثعبان v2.4</title>
<نمط>
جسم{
حجم الخط: 9pt؛
}
طاولة{
انهيار الحدود: انهيار؛
الحدود: الصلبة #333 1px؛
}
الدفتيريا {
الارتفاع: 10 بكسل؛
العرض: 10 بكسل؛
حجم الخط: 0 بكسل؛
}
.مملوء{
لون الخلفية: أزرق؛
}
</نمط>
</الرأس>
<النص البرمجي>
الوظيفة $(id){return document.getElementById(id);}
/********************************************************************************************************************************************************************* ***** *************
* جافا سكريبت ثعبان v2.4 <br />
* قام الإصدار 2.4 بتصحيح لون جسم الثعبان ليتحرك بينما يتحرك الثعبان للأمام
********************************************************************************************************************************************************************************* * ************/
// الثعابين الجشعة
فار الأفعى = {
tbl: فارغة،
/**
* الجسم: جسم الثعبان، يوضع كل قسم من أجزاء الثعبان في المصفوفة،
* بنية البيانات {x:x0، y:y0، اللون:color0}،
* x، y يمثل الإحداثيات، واللون يمثل اللون
**/
جسم: []،
// الاتجاه الحالي للحركة، القيم 0، 1، 2، 3 على التوالي تمثل أعلى، يمين، أسفل، يسار، اضغط على مفاتيح الاتجاه في لوحة المفاتيح لتغييره
الاتجاه: 0،
// الموقت
الموقت: لا شيء،
//سرعة
السرعة: 250،
// سواء تم إيقافه مؤقتًا
متوقف: صحيح،
// عدد الصفوف
عدد الصفوف: 30،
// عدد الأعمدة
عدد العمود: 30،
//التهيئة
الحرف الأول: وظيفة () {
varcolors = ['red','orange','yellow','green','blue','purple','#ccc'];
this.tbl = $("الرئيسي");
فار س = 0;
فار ص = 0;
فار كولوريندكس = 0؛
// إنشاء اتجاه الحركة الأولي
this.direction = Math.floor(Math.random()*4);
// بناء الجدول
for(varrow=0;row<this.rowCount;row++){
var tr=this.tbl.insertRow(-1);
for(var col=0;col<this.colCount;col++) {
var td=tr.insertCell(-1);
}
}
// إنشاء 20 عقدة فضفاضة
ل(فار ط=0;أنا<10;i++){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
colorIndex = Math.floor(Math.random()*7);
إذا(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor =colors[colorIndex];
}
}
// إنشاء رأس ثعبان
بينما (صحيح) {
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
إذا(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = "black";
this.body.push({x:x,y:y,color:'black'});
استراحة؛
}
}
this.paused = true;
// أضف حدث لوحة المفاتيح
document.onkeydown= وظيفة (ه) {
إذا (!e)e=window.event;
التبديل (e.keyCode | e.what | e.charCode){
الحالة 13: {
إذا (ثعبان. متوقف مؤقتا) {
Snake.move();
Snake.paused = false;
}
آخر{
// إذا لم يكن هناك توقف مؤقت، توقف عن الحركة
Snake.pause();
Snake.paused = true;
}
استراحة؛
}
الحالة 37:{//يسار
// أوقف الثعبان عن المشي للخلف
إذا(Snake.direction==1){
استراحة؛
}
اتجاه الأفعى = 3؛
استراحة؛
}
الحالة 38:{//أعلى
// مفاتيح الاختصار تعمل هنا
إذا (الحدث.ctrlKey) {
Snake.speedUp(-20);
استراحة؛
}
if(Snake.direction==2){// امنع الثعبان من المشي للخلف
استراحة؛
}
اتجاه الأفعى = 0;
استراحة؛
}
الحالة 39:{//صحيح
if(Snake.direction==3){// امنع الثعبان من المشي للخلف
استراحة؛
}
اتجاه الأفعى = 1؛
استراحة؛
}
الحالة 40: {//أسفل
إذا (الحدث.ctrlKey) {
Snake.speedUp(20);
استراحة؛
}
if(Snake.direction==0){// امنع الثعبان من المشي للخلف
استراحة؛
}
اتجاه الأفعى = 2;
استراحة؛
}
}
}
},
//يتحرك
نقل: وظيفة () {
this.timer = setInterval(function(){
Snake.erase();
Snake.moveOneStep();
Snake.paint();
}, this.speed);
},
// حرك قسمًا واحدًا من الجسم
moveOneStep: وظيفة () {
إذا(this.checkNextStep()==-1){
ClearInterval(this.timer);
تنبيه("انتهت اللعبة!/اضغط على إعادة التشغيل للمتابعة.");
يعود؛
}
إذا (this.checkNextStep()==1){
var _point = this.getNextPos();
var _x = _point.x;
var _y = _point.y;
var _color = this.getColor(_x,_y);
this.body.unshift({x:_x,y:_y,color:_color});
// لأنه يتم تناول طعام واحد، يتم إنشاء طعام آخر
this.generateDood();
يعود؛
}
//window.status = this.toString();
var point = this.getNextPos();
// احتفظ بلون القسم الأول
فار اللون = this.body[0].color;
// يتحرك اللون للأمام
for(var i=0; i<this.body.length-1; i++){
this.body[i].color = this.body[i+1].color;
}
// اطرح قسمًا واحدًا من ذيل الثعبان وأضف قسمًا واحدًا إلى ذيل الثعبان لإظهار تأثير تحرك الثعبان للأمام.
this.body.pop();
this.body.unshift({x:point.x,y:point.y,color:color});
//window.status = this.toString();
},
// اكتشف إلى أين تذهب بعد ذلك
وقفة: وظيفة () {
ClearInterval(Snake.timer);
this.paint();
},
getNextPos: وظيفة () {
var x = this.body[0].x;
var y = this.body[0].y;
فار اللون = this.body[0].color;
//أعلى
إذا (هذا. الاتجاه == 0) {
ذ--؛
}
//إلى اليمين
وإلا إذا (هذا. الاتجاه == 1) {
س++;
}
//تحت
وإلا إذا (هذا. الاتجاه == 2) {
ص++;
}
//غادر
آخر{
س--;
}
// إرجاع الإحداثيات
العودة {س: س، ص: ص}؛
},
//تحقق من الخطوة التالية للانتقال إليها
checkNextStep: وظيفة () {
var point = this.getNextPos();
فار س = نقطة.x;
فار y = point.y;
إذا(x<0||x>=this.colCount||y<0||y>=this.rowCount){
return -1;// تنتهي اللعبة عند لمس الحدود
}
for(var i=0; i<this.body.length; i++){
إذا (this.body[i].x==x&&this.body[i].y==y){
return -1;// عندما تلمس جسمك، تنتهي اللعبة
}
}
إذا (this.isCellFilled(x,y)){
return 1;// هناك شيء ما
}
إرجاع 0;//مساحة مفتوحة
},
// امسح جسم الثعبان
محو: وظيفة () {
for(var i=0; i<this.body.length; i++){
this.eraseDot(this.body[i].x, this.body[i].y);
}
},
// ارسم جسم الثعبان
الطلاء: وظيفة () {
for(var i=0; i<this.body.length; i++){
this.paintDot(this.body[i].x, this.body[i].y,this.body[i].color);
}
},
// مسح قسم
مسح النقطة: وظيفة (س، ص) {
this.tbl.rows[y].cells[x].style.backgroundColor = "";
},
بينت دوت: وظيفة (س، ص، اللون) {
this.tbl.rows[y].cells[x].style.backgroundColor = color;
},
// احصل على اللون عند الإحداثيات
الحصول على اللون: وظيفة (س، ص) {
إرجاع this.tbl.rows[y].cells[x].style.backgroundColor;
},
// لتصحيح الأخطاء
إلى سلسلة: وظيفة () {
فار str = "";
for(var i=0; i<this.body.length; i++){
str += "x:" + this.body[i].x + " y:" + this.body[i].y + " color:" + this.body[i].color + " - ";
}
شارع العودة؛
},
//تحقق مما إذا كانت نقطة الإحداثيات ممتلئة
isCellFilled: الوظيفة(x,y){
إذا (this.tbl.rows[y].cells[x].style.backgroundColor == ""){
عودة كاذبة.
}
عودة صحيحة؛
},
//إعادة تشغيل
إعادة التشغيل: وظيفة () {
إذا (هذا. الموقت) {
ClearInterval(this.timer);
}
for(var i=0; i<this.rowCount;i++){
this.tbl.deleteRow(0);
}
this.body = [];
this.init();
this.speed = 250;
},
//تسريع
تسريع: وظيفة (الوقت) {
إذا (! هذا. توقف مؤقتا) {
إذا(this.speed+time<10||this.speed+time>2000){
يعود؛
}
this.speed +=time;
this.pause();
this.move();
}
},
// إنتاج الغذاء.
إنشاء دوود: وظيفة () {
varcolors = ['red','orange','yellow','green','blue','purple','#ccc'];
var x = Math.floor(Math.random()*this.colCount);
var y = Math.floor(Math.random()*this.rowCount);
var colorIndex = Math.floor(Math.random()*7);
إذا(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor =colors[colorIndex];
}
}
};
</script>
<body onload="Snake.init();">
/********************************************************************************************************************************************************************* ***** ************<br />
* ثعبان جافا سكريبت v2.4<br />
********************************************************************************************************************************************************************************* *************/<br />
<معرف الجدول = "الرئيسي" cellpacing = "0" cellpadding = "0"></table>
<input type="button" id="btn" value="Start/Pause" />انقر على الزر الأيسر أو اضغط على Enter لبدء/إيقاف اللعبة مؤقتًا<br />
<input type="button" id="reset" value="البدء من جديد" /><br />
<input type="button" id="upSpeed" value="Accelerate" />انقر على الزر الأيسر أو اضغط على Ctrl + ↑ للتسريع<br />
<input type="button" id="downSpeed" value="Slow down" />انقر على الزر الأيسر أو اضغط على Ctrl + ↓ لإبطاء السرعة
<النص البرمجي>
$('btn').onclick = function(){
إذا (ثعبان. متوقف مؤقتا) {
Snake.move();
Snake.paused = false;
}
آخر{
Snake.pause();
Snake.paused = true;
}
};
$("إعادة التعيين").onclick = function(){
Snake.restart();
this.blur();
};
$("upSpeed").onclick = function(){
Snake.speedUp(-20);
};
$("downSpeed").onclick = function(){
Snake.speedUp(20);
};
</script>
</الجسم>
</html>