我寫博客的主要目的就是溫習所學的知識，自己以前寫的游戲當然不能放過！
這款網頁版貪吃蛇是大一下冊學習網頁前端時老師教我們寫的，由于那個時候初學網頁前端，所以這款游戲是純原生Java Script寫的，沒有使用JQuery，
重新看了一遍自己寫的代碼，大一的我真的太年輕了，一個注釋都沒有寫，幸好這款游戲的邏輯不難，還能看得懂，補了一些注釋，對一些細節加深了理解，（以后要逼著自己寫注釋才行呀！）
從大一寒假寫C語言的俄羅斯方塊開始，我就下定決心學一門編程語言，就用這門編程語言寫一個游戲，這個目標也基本上實作了，陸陸續續寫了C++推箱子、Python飛機大戰，最近正在寫Java打磚塊，以后會慢慢跟大家分享的，
廢話不多說，上代碼！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>貪吃蛇</title> <script type="text/javascript"> var size = 20; //網格大小 var rows = 30; //網格行數 var cols = 40; //網格列數 var c; var snake = []; //保存貪吃蛇的位置資訊 var snake_len = 4; //貪吃蛇的長度 var foodx; //食物x坐標 var foody; //食物y坐標 var mark; //分數 var go = 3; //貪吃蛇爬行方向，左：1；上：2；右：3；下：4 var pause = true; //是否暫停 var interval; //游戲回圈 function draw() { c.clearRect(0, 0, size * cols, size * rows); c.strokeStyle = "black"; for (var i = 1; i <= rows; i++) { c.beginPath(); c.moveTo(0, i * size); c.lineTo(size * cols, i * size); c.closePath(); c.stroke(); } //畫橫線 for (var i = 1; i <= cols; i++) { c.beginPath(); c.moveTo(i * size, 0); c.lineTo(i * size, size * rows); c.closePath(); c.stroke(); } //畫豎線 c.strokeStyle = "white"; c.fillStyle = "green"; for (var i = 0; i < snake_len; i++) { c.beginPath(); c.fillRect(snake[i].x, snake[i].y, size, size); c.moveTo(snake[i].x, snake[i].y); c.lineTo(snake[i].x + size, snake[i].y); c.lineTo(snake[i].x + size, snake[i].y + size); c.lineTo(snake[i].x, snake[i].y + size); c.closePath(); c.stroke(); } //畫貪吃蛇 c.fillStyle = "yellow"; c.beginPath(); c.fillRect(foodx, foody, size, size); c.moveTo(foodx, foody); c.lineTo(foodx + size, foody); c.lineTo(foodx + size, foody + size); c.lineTo(foodx, foody + size); c.closePath(); c.stroke(); //畫食物 } function addfood() { foodx = Math.floor(Math.random() * (cols - 1)) * size; foody = Math.floor(Math.random() * (rows - 1)) * size; while (foodx == 0) { foodx = Math.floor(Math.random() * (cols - 1)) * size; } while (foody == 0) { foody = Math.floor(Math.random() * (rows - 1)) * size; } } //設定食物位置，保證不為第一行(列)、最后一行(列) function start() { for (var i = 0; i < snake_len; i++) { snake[i] = { x: i * size, y: 0 } } //設定貪吃蛇出現的位置 addfood(); draw(); mark.innerHTML = 0; } function addsnake() { snake_len++; snake.unshift({ x: size * cols, y: size * rows }); //添加新方塊至網格外，會在下個游戲回圈添加至貪吃蛇 } function IsEat() { if (snake[snake_len - 1].x == foodx && snake[snake_len - 1].y == foody) { mark.innerHTML = (parseInt(mark.innerHTML) + 1).toString(); addfood(); addsnake(); } } function IsDie() { if (snake[snake_len - 1].x == -1 * size || snake[snake_len - 1].y == -1 * size || snake[snake_len - 1].x == cols * size || snake[snake_len - 1].y == rows * size) { clearInterval(interval); alert("Game Over!沒有玩過癮，那就重繪頁面再來一次，"); } //貪吃蛇爬行到網格外 for (var i = 0; i < snake_len - 1; i++) { if (snake[i].x == snake[snake_len - 1].x && snake[i].y == snake[snake_len - 1].y) { clearInterval(interval); alert("Game Over!沒有玩過癮，那就重繪頁面再來一次，"); } } //貪吃蛇纏繞 } function move() { switch (go) { case 1: snake.push({ x: snake[snake_len - 1].x - size, y: snake[snake_len - 1].y }); break; case 2: snake.push({ x: snake[snake_len - 1].x, y: snake[snake_len - 1].y - size }); break; case 3: snake.push({ x: snake[snake_len - 1].x + size, y: snake[snake_len - 1].y }); break; case 4: snake.push({ x: snake[snake_len - 1].x, y: snake[snake_len - 1].y + size }); } snake.shift(); IsEat(); IsDie(); draw(); } //游戲回圈 function keydown(keyCode) { switch (keyCode) { case 37: if (go != 1 && go != 3) go = 1; break; case 38: if (go != 2 && go != 4) go = 2; break; case 39: if (go != 3 && go != 1) go = 3; break; case 40: if (go != 4 && go != 2) go = 4; break; case 32: if (pause) { interval = setInterval(move, 130); //開始游戲回圈 pause = false; document.getElementById('pause').innerHTML = "Pause"; } else { clearInterval(interval); pause = true; document.getElementById('pause').innerHTML = "Satrt"; } break; } } //鍵盤操作 window.onload = function () { c = document.getElementById('canvas').getContext('2d'); mark = document.getElementById('score'); start(); document.onkeydown = function (event) { var event = event || window.event; keydown(event.keyCode); } } </script> <style> #page { margin-left: auto; margin-right: auto; margin-top: 20px; width: 1000px; height: 600px; } #yard { width: 800px; border: 1px solid gray; box-shadow: 0 0 10px #000; float: right; } #mark { font-weight: 800; } #score { color: #f00; } button { width: 50px; } p { margin-left: 40px; } </style> </head> <body> <div id="page"> <div id="yard"> <canvas id="canvas" width="800" height="600"></canvas> </div> <div id="help"> <div id="mark">Mark:<span id="score"></span></div> <div id="helper"> <table> <tr> <td></td> <td> <button onclick="keydown(38)">Up</button> </td> <td></td> </tr> <tr> <td> <button onclick="keydown(37)">Left</button> </td> <td> <button onclick="keydown(32)" id="pause">Satrt</button> </td> <td> <button onclick="keydown(39)">Right</button> </td> </tr> <tr> <td></td> <td> <button onclick="keydown(40)">Down</button> </td> <td></td> </tr> </table> <p>空格鍵暫停</p> </div> </div> </div> </body> </html>
效果圖：
試玩：http://static.pzijigame.com/Game/snake.html（PC端才能玩哦！！！）
有感興趣的朋友可以直接私聊我（[email protected]），我們可以一起討論，一起進步！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/33890.html
標籤：其他
上一篇：一個玩游戲的失足青年，轉行做游戲開發到教育的痛苦掙扎程序（3）
下一篇：求書