ความคิดเห็น: การกินงู, ฟังก์ชั่นหลัก: 1. การเคลื่อนไหวของงู 2. เปลี่ยนทิศทางของงู 3. วางอาหาร 4. เพิ่มการเสียสละของตัวเอง 5. วิธีการแขวนมันการใช้งานที่เฉพาะเจาะจงมีดังนี้ มันง่ายและใช้งานได้จริงใน 60 บรรทัด เพื่อนที่สนใจสามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน
ฉันไม่ค่อยให้ความสนใจกับ HTML5 ในอดีต ฉันรู้สึกว่าการเลือก HTML ได้ค่อยๆกลายเป็นเทรนด์ดังนั้นฉันจึงอยากรู้เกี่ยวกับมัน ฉันพบเกมเพื่อเรียนรู้ หลังจากเขียนเกมนี้ฉันรู้สึกว่า HTML5 และ JS ได้รวมเข้าด้วยกันอย่างใกล้ชิดถ้า JS ไม่ดีเป็นพิเศษ ฉันเดาว่าฉันต้องใช้การสอน JS ก่อน นี่เป็นเพียงคำแนะนำส่วนตัวของฉันและอาจไม่ถูกต้อง อีกอย่างคือคุณควรมีความชัดเจนโดยเฉพาะอย่างยิ่งเกี่ยวกับความคิดและตรรกะของคุณมิฉะนั้นการเขียนเกมอาจเจ็บปวดฟังก์ชั่นหลักของงูโลภ: 1. งูเคลื่อนที่ 2. เปลี่ยนทิศทางของงู 3 วางอาหาร 4. เพิ่มการเสียสละ 5. วิธีการแขวนมัน
ครั้งแรกที่ฉันเขียนเกมครั้งแรกที่ฉันเขียน HTML5 มันรู้สึกยากมาก ฉันเขียนเสร็จแล้วและฉันจะแบ่งปันกับคุณ การสื่อสารซึ่งกันและกัน ... หากคุณไม่เข้าใจหรือมีคำแนะนำใด ๆ โปรดฝากข้อความถึงฉัน - - รหัสสั้นมากเพียง 60 บรรทัด
แต่นี่เป็นผลิตภัณฑ์กึ่งสำเร็จรูปและเสร็จสิ้นแล้ว อัปเดตอีกครั้ง
<! doctype html>
<html>
<body>
<Canvas> </sanvas>
<script type = "text/javascript">
var c = document.getElementById ("Mycanvas");
var time = 160; // ความเร็วของงู
var cxt = c.getContext ("2d");
var x = y = 8;
var a = 0; // พิกัดอาหาร
var t = 20; // เสียสละชีวิตของคุณ
var map = []; // บันทึกเส้นทางการทำงานของงู
ขนาด var = 8; // ขนาดหน่วยงู
ทิศทาง var = 2; // 1 ขึ้น 2 ขวา 0 ซ้าย 3 ลง
Interval = window.setInterval (set_game_speed, เวลา); // ย้ายงู
function 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 (แผนที่ [i] .x) == x && parseint (แผนที่ [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, ขนาด, ขนาด); // วาดสี่เหลี่ยมผืนผ้า
if ((a*8) == x && (a*8) == y) {// กินอาหาร
rand_frog (); t ++;
-
-
document.onkeydown = function (e) {// เปลี่ยนทิศทางงู
รหัส var = e.keycode - 37;
สลับ (รหัส) {
กรณีที่ 1: ทิศทาง = 1; break; // on
กรณีที่ 2: ทิศทาง = 2; break; // ขวา
กรณีที่ 3: ทิศทาง = 3; break; // ถัดไป
กรณี 0: ทิศทาง = 0; break; // ซ้าย
-
-
// สุ่มวางอาหาร
ฟังก์ชั่น 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>