تعليق: الأكل الأكل ، الوظائف الرئيسية: 1. حركة الثعبان 2. تغيير اتجاه الأفعى 3. ضع الطعام 4. زيادة التضحية بالنفس 5. كيفية تعليقه ، فإن التنفيذ المحدد هو كما يلي. إنه بسيط وعملي في 60 سطرًا. يمكن للأصدقاء المهتمين الرجوع إليها. آمل أن يكون ذلك مفيدًا للجميع.
نادراً ما اهتمت بـ HTML5 في الماضي. أشعر أن اختيار HTML أصبح اتجاهًا تدريجيًا ، لذلك أريد أن أعرف ذلك. لقد وجدت لعبة لتعلمها. بعد كتابة هذه اللعبة ، شعرت أن HTML5 و JS تم دمجهما بشكل وثيق ، إذا لم يكن JS جيدًا بشكل خاص. أعتقد أنني بحاجة إلى أخذ دروس JS أولاً. هذه مجرد نصيحتي الشخصية وقد لا تكون دقيقة. شيء آخر هو أنه يجب أن تكون واضحًا بشكل خاص بشأن تفكيرك والمنطق ، وإلا فإن كتابة الألعاب قد تكون مؤلمة.الوظائف الرئيسية للثعابين الجشع: 1. يتحرك الأفعى 2. تغيير اتجاه الأفعى 3. ضع الطعام 4. زيادة التضحية 5. كيفية تعليقه.
في المرة الأولى التي كتبت فيها لعبة ، في المرة الأولى التي كتبت فيها HTML5 ، شعرت بصعوبة للغاية. لقد انتهيت من الكتابة وسأشاركها معك. التواصل مع بعضها البعض ... إذا لم تفهم أو لديك أي اقتراحات ، يرجى ترك رسالة لي. . . الكود قصير جدا ، فقط 60 سطر.
ولكن هذا منتج شبه مصقول ، وقد انتهى. تحديث مرة أخرى
<! doctype html>
<html>
<body>
<Canvas> </tanvas>
<script type = "text/javaScript">
var c = document.getElementById ("mycanvas") ؛
var time = 160 ؛ // Snake's Speed
var cxt = c.getContext ("2d") ؛
var x = y = 8 ؛
var a = 0 ؛ // إحداثيات الطعام
var t = 20 ؛ // التضحية بحياتك
خريطة var = [] ؛ // سجل مسار تشغيل الأفعى
var size = 8 ؛ // حجم وحدة جسم الأفعى
الاتجاه var = 2 ؛ // 1 UP 2 يمين 0 اليسار 3 لأسفل
الفاصل الزمني = window.setInterval (set_game_speed ، الوقت) ؛ // نقل الأفعى
الدالة set_game_speed () {// نقل الأفعى
التبديل (الاتجاه) {
الحالة 1: y = y-size ؛ break ؛
الحالة 2: x = x+size ؛ break ؛
الحالة 0: x = x-size ؛ break ؛
الحالة 3: y = y+size ؛ break ؛
}
if (x> 400 || y> 400 || x <0 || y <0) {
في حالة تأهب ("أنت ميت ، استمر في العمل بجد! سبب الفشل: أنا أضرب الجدار ...") ؛ window.location.reload () ؛
}
لـ (var i = 0 ؛ i <map.length ؛ i ++) {
if (parseint (map [i] .x) == x && parseint (map [i] .y) == y) {
تنبيه ("أنت ميت ، استمر في العمل بجد! سبب الفشل: لقد اصطدمت بنفسي ...") ؛ window.location.reload () ؛
}
}
if (map.length> t) {// حافظ على طول القربان
var cl = map.shift () ؛ // حذف العنصر الأول من المصفوفة وإرجاع العنصر الأصلي
cxt.clearrect (cl ['x'] ، cl ['y'] ، الحجم ، الحجم) ؛
} ؛
map.push ({'x': x ، 'y': y}) ؛ // إضافة بيانات إلى نهاية المصفوفة الأصلية
cxt.fillstyle = "#006699" ؛ // لون التعبئة الداخلي
cxt.strokestyle = "#006699" ؛ // لون الحدود
cxt.fillrect (x ، y ، الحجم ، الحجم) ؛ // ارسم المستطيل
إذا ((A*8) == x && (a*8) == y) {// أكل الطعام
rand_frog () ؛ t ++ ؛
}
}
document.onkeydown = function (e) {// قم بتغيير اتجاه الأفعى
VAR CODE = E.KeyCode - 37 ؛
التبديل (رمز) {
الحالة 1: الاتجاه = 1 ؛ كسر ؛ // على
الحالة 2: الاتجاه = 2 ؛ كسر ؛ // اليمين
الحالة 3: الاتجاه = 3 ؛ كسر ؛ // التالي
الحالة 0: الاتجاه = 0 ؛ كسر ؛ // اليسار
}
}
// وضع الطعام بشكل عشوائي
وظيفة rand_frog () {
a = math.ceil (Math.Random ()*50) ؛
cxt.fillstyle = "#00000" ؛ // لون التعبئة الداخلي
cxt.strokestyle = "#00000" ؛ // لون الحدود
cxt.fillrect (a*8 ، a*8 ، 8 ، 8) ؛ // ارسم المستطيل
}
// وضع الطعام بشكل عشوائي
rand_frog () ؛
</script>
</body>
</html>