我写博客的主要目的就是温习所学的知识，自己以前写的游戏当然不能放过！
这款网页版贪吃蛇是大一下册学习网页前端时老师教我们写的，由于那个时候初学网页前端，所以这款游戏是纯原生Java Script写的，没有使用JQuery。
重新看了一遍自己写的代码，大一的我真的太年轻了，一个注释都没有写，幸好这款游戏的逻辑不难，还能看得懂，补了一些注释，对一些细节加深了理解。（以后要逼着自己写注释才行呀！）
从大一寒假写C语言的俄罗斯方块开始，我就下定决心学一门编程语言，就用这门编程语言写一个游戏，这个目标也基本上实现了，陆陆续续写了C++推箱子、Python飞机大战，最近正在写Java打砖块，以后会慢慢跟大家分享的。
废话不多说，上代码！
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>贪吃蛇</title> 9 <script type="text/javascript"> 10 var size = 20; //网格大小 11 var rows = 30; //网格行数 12 var cols = 40; //网格列数 13 var c; 14 var snake = []; //保存贪吃蛇的位置信息 15 var snake_len = 4; //贪吃蛇的长度 16 var foodx; //食物x坐标 17 var foody; //食物y坐标 18 var mark; //分数 19 var go = 3; //贪吃蛇爬行方向，左：1；上：2；右：3；下：4 20 var pause = true; //是否暂停 21 var interval; //游戏循环 22 23 function draw() { 24 c.clearRect(0, 0, size * cols, size * rows); 25 26 c.strokeStyle = "black"; 27 for (var i = 1; i <= rows; i++) { 28 c.beginPath(); 29 c.moveTo(0, i * size); 30 c.lineTo(size * cols, i * size); 31 c.closePath(); 32 c.stroke(); 33 } //画横线 34 for (var i = 1; i <= cols; i++) { 35 c.beginPath(); 36 c.moveTo(i * size, 0); 37 c.lineTo(i * size, size * rows); 38 c.closePath(); 39 c.stroke(); 40 } //画竖线 41 42 c.strokeStyle = "white"; 43 c.fillStyle = "green"; 44 for (var i = 0; i < snake_len; i++) { 45 c.beginPath(); 46 c.fillRect(snake[i].x, snake[i].y, size, size); 47 c.moveTo(snake[i].x, snake[i].y); 48 c.lineTo(snake[i].x + size, snake[i].y); 49 c.lineTo(snake[i].x + size, snake[i].y + size); 50 c.lineTo(snake[i].x, snake[i].y + size); 51 c.closePath(); 52 c.stroke(); 53 } //画贪吃蛇 54 55 c.fillStyle = "yellow"; 56 c.beginPath(); 57 c.fillRect(foodx, foody, size, size); 58 c.moveTo(foodx, foody); 59 c.lineTo(foodx + size, foody); 60 c.lineTo(foodx + size, foody + size); 61 c.lineTo(foodx, foody + size); 62 c.closePath(); 63 c.stroke(); //画食物 64 } 65 66 function addfood() { 67 foodx = Math.floor(Math.random() * (cols - 1)) * size; 68 foody = Math.floor(Math.random() * (rows - 1)) * size; 69 while (foodx == 0) { 70 foodx = Math.floor(Math.random() * (cols - 1)) * size; 71 } 72 while (foody == 0) { 73 foody = Math.floor(Math.random() * (rows - 1)) * size; 74 } 75 } //设置食物位置，保证不为第一行(列)、最后一行(列) 76 77 function start() { 78 for (var i = 0; i < snake_len; i++) { 79 snake[i] = { 80 x: i * size, 81 y: 0 82 } 83 } //设置贪吃蛇出现的位置 84 addfood(); 85 draw(); 86 mark.innerHTML = 0; 87 } 88 89 function addsnake() { 90 snake_len++; 91 snake.unshift({ 92 x: size * cols, 93 y: size * rows 94 }); //添加新方块至网格外，会在下个游戏循环添加至贪吃蛇 95 } 96 97 function IsEat() { 98 if (snake[snake_len - 1].x == foodx && snake[snake_len - 1].y == foody) { 99 mark.innerHTML = (parseInt(mark.innerHTML) + 1).toString(); 100 addfood(); 101 addsnake(); 102 } 103 } 104 105 function IsDie() { 106 if (snake[snake_len - 1].x == -1 * size || snake[snake_len - 1].y == -1 * size || 107 snake[snake_len - 1].x == cols * size || snake[snake_len - 1].y == rows * size) { 108 clearInterval(interval); 109 alert("Game Over!没有玩过瘾，那就刷新页面再来一次。"); 110 } //贪吃蛇爬行到网格外 111 112 for (var i = 0; i < snake_len - 1; i++) { 113 if (snake[i].x == snake[snake_len - 1].x && snake[i].y == snake[snake_len - 1].y) { 114 clearInterval(interval); 115 alert("Game Over!没有玩过瘾，那就刷新页面再来一次。"); 116 } 117 } //贪吃蛇缠绕 118 } 119 120 function move() { 121 switch (go) { 122 case 1: 123 snake.push({ 124 x: snake[snake_len - 1].x - size, 125 y: snake[snake_len - 1].y 126 }); 127 break; 128 case 2: 129 snake.push({ 130 x: snake[snake_len - 1].x, 131 y: snake[snake_len - 1].y - size 132 }); 133 break; 134 case 3: 135 snake.push({ 136 x: snake[snake_len - 1].x + size, 137 y: snake[snake_len - 1].y 138 }); 139 break; 140 case 4: 141 snake.push({ 142 x: snake[snake_len - 1].x, 143 y: snake[snake_len - 1].y + size 144 }); 145 } 146 snake.shift(); 147 IsEat(); 148 IsDie(); 149 draw(); 150 } //游戏循环 151 152 function keydown(keyCode) { 153 switch (keyCode) { 154 case 37: 155 if (go != 1 && go != 3) 156 go = 1; 157 break; 158 case 38: 159 if (go != 2 && go != 4) 160 go = 2; 161 break; 162 case 39: 163 if (go != 3 && go != 1) 164 go = 3; 165 break; 166 case 40: 167 if (go != 4 && go != 2) 168 go = 4; 169 break; 170 case 32: 171 if (pause) { 172 interval = setInterval(move, 130); //开始游戏循环 173 pause = false; 174 document.getElementById('pause').innerHTML = "Pause"; 175 176 } else { 177 clearInterval(interval); 178 pause = true; 179 document.getElementById('pause').innerHTML = "Satrt"; 180 } 181 break; 182 } 183 } //键盘操作 184 185 window.onload = function () { 186 c = document.getElementById('canvas').getContext('2d'); 187 mark = document.getElementById('score'); 188 start(); 189 document.onkeydown = function (event) { 190 var event = event || window.event; 191 keydown(event.keyCode); 192 } 193 } 194 </script> 195 196 <style> 197 #page { 198 margin-left: auto; 199 margin-right: auto; 200 margin-top: 20px; 201 width: 1000px; 202 height: 600px; 203 } 204 205 #yard { 206 width: 800px; 207 border: 1px solid gray; 208 box-shadow: 0 0 10px #000; 209 float: right; 210 } 211 212 #mark { 213 font-weight: 800; 214 } 215 216 #score { 217 color: #f00; 218 } 219 220 button { 221 width: 50px; 222 } 223 224 p { 225 margin-left: 40px; 226 } 227 </style> 228</head> 229 230<body> 231<div id="page"> 232 <div id="yard"> 233 <canvas id="canvas" width="800" height="600"></canvas> 234 </div> 235 <div id="help"> 236 <div id="mark">Mark:<span id="score"></span></div> 237 <div id="helper"> 238 <table> 239 <tr> 240 <td></td> 241 <td> 242 <button onclick="keydown(38)">Up</button> 243 </td> 244 <td></td> 245 </tr> 246 <tr> 247 <td> 248 <button onclick="keydown(37)">Left</button> 249 </td> 250 <td> 251 <button onclick="keydown(32)" id="pause">Satrt</button> 252 </td> 253 <td> 254 <button onclick="keydown(39)">Right</button> 255 </td> 256 </tr> 257 <tr> 258 <td></td> 259 <td> 260 <button onclick="keydown(40)">Down</button> 261 </td> 262 <td></td> 263 </tr> 264 </table> 265 <p>空格键暂停</p> 266 </div> 267 </div> 268</div> 269</body> 270 271</html>
效果图：
试玩：http://static.pzijigame.com/Game/snake.html（PC端才能玩哦！！！）
有感兴趣的朋友可以直接私聊我（1527985747@qq.com），我们可以一起讨论，一起进步！！！