计算机软件技术实习 项目二 贪吃蛇的游戏开发（游戏逻辑的JS实现）2-(4)

目录

一、简单介绍

二、代码实现

---

一、简单介绍

        这个贪吃蛇的基本逻辑是基于js20行贪吃蛇代码，这个代码看起来十分短小，但实现了贪吃蛇的所有要求。如，蛇的移动，吃豆子等等。有一点不好，为了追求极简风格，在格式和变量的命名上会有一些问题，导致很难看懂。如果有兴趣可以去搜一下，网上一搜一大把。我为了达到老师的实习要求，在此基础上，增加了计分功能和暂停游戏。

二、代码实现

        主要的东西在注释中已经很详细了，不做过多解释。

<script>
			var snake = [42, 41],//蛇
				douZi = 43,//豆子
				FangXiang = 1,//方向
				score = 0,//得分
				n,//与蛇的移动有关
				isStop = false,//判断游戏是否暂停，初始化为未暂停
				ctx = document.getElementById("can").getContext("2d");//画背景

			/**
			* 吃掉食物后调用的函数
			*/
			function draw(t, color) {
				ctx.fillStyle = color;
				ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);
			}

			/**
			* 用键盘控制蛇移动的方向的函数
			*/
			document.onkeydown = function (e) {
				FangXiang = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(e || event).keyCode - 37] || FangXiang) ? FangXiang : n
			};

			/**
			 *如果鼠标点击暂停按钮，isStop变为true,一下暂停 
			 */
			document.getElementById("stop").onclick = function (e) {
				if (isStop == false) {
					isStop = true;
				} else {
					isStop = false;
				}
			}

			/**
			 * 游戏逻辑控制兼主函数
			 */
			! function () {

				//如果游戏没有暂停，蛇向前移动（蛇头加一），并且如果按了上下左右键，蛇的运动方向改变
				if (isStop == false) {
					snake.unshift(n = snake[0] + FangXiang);

					//如果撞墙或撞到自己,游戏结束，在弹窗显示游戏结束和分数
					if (snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || FangXiang == 1 && n % 20 == 0 || FangXiang == -1 && n % 20 == 19)
						return alert("GAME OVER" + " " + "你的分数是:" + (score - 1));
					draw(n, "Lime");

					//如果吃到了豆子,产出新豆子,分数加一
					if (n == douZi) {
						while (snake.indexOf(douZi = ~~(Math.random() * 400)) >= 0);//随机产生新豆子
						draw(douZi, "Yellow");//豆子颜色是黄色
						document.getElementById("score").innerHTML = score;//更新分数
						score += 1;//分数加一
					}

					//没有吃到蛋也没死,向前走（蛇尾去掉，变为黑色）
					else
						draw(snake.pop(), "Black");
				}

				//如果游戏暂停了，蛇停止更新
				else {
					snake.unshift();
				}

				//设定蛇移动的速度（每隔0.13秒执行一次此函数，改变数字，可以改变蛇移动的速度）
				setTimeout(arguments.callee, 130);
			}();
		</script>