使用JavaScript实现简单的小游戏-贪吃蛇

最近初学JavaScript，在这里分享贪吃蛇小游戏的实现过程，
希望能看到的前辈们能指出这个程序的不足之处。

##大致思路

- 首先要解决的问题
- 随着蛇头的前进，尾巴也要前进。
- 用键盘控制蛇的运动方向。
- 初始化食物的时候不能初始化到蛇的身体上。
- 蛇吃食物的时候身体会变长。
- 蛇头碰到“墙”，或者自己的身体游戏结束
- 不影响游戏的实现但是有关于游戏体验的设计
- 界面的美观。
- 分数的设置。
- 等级的设置（随着分数的增加，蛇前进的速度的增加）。
- 暂停与继续的快捷键。

##符号$说明

function $(id){       //在文件base.js中

	return document.getElementById(id);

}

##代码

<!DOCTYPE html>

<html>

	<head>

		<title>Snake</title>

		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

		<style type="text/css" >

		body{background-color: #eee; font-family: 手札体-简;}

			#page{width: 960px; height: 560px; margin: 30px auto; background-color: #fdf5e6;box-shadow: 3px 3px 3px rgba(0,0,0,0.2),10px 10px 20px rgba(0,0,0,0.2); border-radius: 5px;}

			#page div{float: left;}

			#left{width: 710px; height: 560px; }

			table{margin: 20px 100px;background-color: #9cc;}

			td{background-color: #cff;}

			#right{width: 205px; height: 560px;}

			#right div{float: none;}

			#score{width: 200px; height: 190px;;background-color: #ffffe0; border-radius: 10px;box-shadow: 3px 3px 3px rgba(0,0,0,0.2),5px 5px 10px rgba(0,0,0,0.2);margin-top: 20px;}

			#rank{width: 200px; height: 190px; margin-top: 10px;background-color: #ffffe0;border-radius: 10px;box-shadow: 3px 3px 3px rgba(0,0,0,0.2),5px 5px 10px rgba(0,0,0,0.2);}

			#right .tag{height:30px; width: 200px ;font-size: 40px;color: #9cf;font-weight: bolder; }

			#score_num{height: 130px; width: 200px; text-align: center;color: #9cf; font-size: 100px;}

			#rank_num{height: 130px; width: 200px; text-align: center;color: #9cf; font-size: 100px;}

			#notice{width: 200px;color: #9cf; margin-top: 5px;box-shadow: 3px 3px 3px rgba(0,0,0,0.2),5px 5px 10px rgba(0,0,0,0.2);background-color: #ffffe0; border-radius: 5px;margin-top: 90px;}

		</style>

		<script type="text/javascript" src="base.js"></script>

		<script type="text/javascript">

			//全局变量

			var max_scope = 30;//贪吃蛇的移动范围

			var unit = 13;//每一个单元格的大小

			var speed = 300;//贪吃蛇移动速度

			var direction = 'left';//贪吃蛇移动方向

			var snake_body = null;

			var interval = null;//计时器

			var food = null;

			var score = 0;//分数（每吃一次，分数加一）

			var rank = 1;//随着分数的增加，等级逐渐增加，速度逐渐增加

			//初始化游戏，使用表格做贪吃蛇移动的范围

			function initGame(){

				snake_body = new Array();

				for(i = 0 ; i < max_scope; i++)

				{

					var row = document.createElement("tr");

					for( j = 0 ; j < max_scope; j++)

					{

						var cell = document.createElement("td");

						cell.id = i + "-" + j;

						cell.width = unit;

						cell.height = unit;

						row.appendChild(cell);

					}

					$("tbody").appendChild(row);

				}

				initSnake();

				snakeInterval();

				initFood();

			}

			//贪吃蛇身体初始化（随机生成）

			function initSnake(){

				var x = parseInt(Math.random()*(max_scope-2));

				var y = parseInt(Math.random()*(max_scope-2));

				var now_position = x + "-" + y;

				snake_body.push(now_position);

				setCellState(now_position);

			}

			// 贪吃蛇身体染色

			function setCellState(id){

				$(id).style.background = "#000";

			}

			// 食物染色

			function setFootState(id){

				$(id).style.background = "#b10000";

			}

			// 贪吃蛇尾巴离开位置染色

			function setCellStateBack(id){

				$(id).style.background = "";

			}

			// 获取贪吃蛇坐标

			function getSnakePos(i){

				switch(i){

					case 'x':

					return snake_body[0].split('-')[0];

					case 'y':

					return snake_body[0].split('-')[1];

				}

			}

			// 计时器

			function snakeInterval(){

				interval = window.setInterval('snakeMove()',speed);

			}

			// 初始化计时器

			function resetSnakeInterval(){

				window.clearInterval(interval);

				interval = window.setInterval('snakeMove()',speed);

			}

			// 设置蛇的移动与移动过程中发生的事件

			function snakeMove(){

				foodx = food.split('-')[0];

				foody = food.split('-')[1];

				switch(direction){

					case 'left':

					_x = getSnakePos('x');

					_y = parseInt(getSnakePos('y')) -1;

					break;

					case 'right':

					_x = getSnakePos('x');

					_y = parseInt(getSnakePos('y')) +1;

					break;

					case 'up':

					_x = parseInt(getSnakePos('x')) -1;

					_y = getSnakePos('y');

					break;

					case 'down':

					_x = parseInt(getSnakePos('x')) +1;

					_y = getSnakePos('y');

					break;

					default:

					_x = getSnakePos('x');

					_y = parseInt(getSnakePos('y')) -1;

					break;

				}

				//撞到墙游戏结束

				if (_x < 0 || _x >= max_scope|| _y < 0 || _y >= max_scope){

					alert("Game Over! Stupid!");

					window.clearInterval(interval);

				}

				//撞到自己游戏结束

				else if (eatItself(_x, _y))

				{

					alert("Game Over! Stupid!");

					window.clearInterval(interval);

				}

				//蛇吃到食物与吃到食物以后加一分，并设置相应的等级

				else if (foodx == _x && foody == _y)

				{

					snake_body.unshift(foodx + '-' + foody);

					setCellState(snake_body[0]);

					initFood();

					score+=1;

					$('score_num').innerText = score;

					if (score == 3) {

						speed = 250;

						resetSnakeInterval();

						rank = 2;

					}

					if (score == 6) {

						speed = 200;

						resetSnakeInterval();

						rank = 3;

					}

					if (score == 10) {

						speed = 150;

						resetSnakeInterval();

						rank = 4;

					}

					if (score == 20) {

						speed = 100;

						resetSnakeInterval();

						 rank = 5;

					}

					if (score == 30) {

						speed = 70;

						resetSnakeInterval();

						rank = 6;

					}

					//将等级写到层中

					$('rank_num').innerText = rank;

				}

				//普通的移动

				else {

					snake_body.unshift(_x + '-' + _y);

					setCellState(snake_body[0]);

					setCellStateBack(snake_body.pop());

				}

			}

			// 判断贪吃蛇头碰到身体的函数

			function eatItself( x,y){

				var nowpos = x + '-' + y;

				for (i = 1 ; i < snake_body.length; i++){

					if (nowpos == snake_body[i])

					return true; 

				}

			}

			// 设置蛇的移动方向以及键盘控制暂停与继续

			function setDirction(){

				  // alert(event.keyCode);

				  if (event.keyCode == 81) window.clearInterval(interval);

				  if (event.keyCode == 82) interval = window.setInterval('snakeMove()',speed);

				switch (event.keyCode){

					case 37:

					if (direction != "right")

					direction = "left";

					break;

					case 38:

					if (direction != "down")

					direction = "up";

					break;

					case 39:

					if (direction != "left")

					direction = "right";

					break;

					case 40:

					if (direction != "up")

					direction = "down";

					break;

				}

			}

			// 初始化食物

			function initFood(){

				var temp = new Array();

				for (i = 0 ; i < max_scope ; i++){

					for (j = 0 ; j < max_scope; j++){

						temp.push(i + '-' + j);

					}

				}

				var addFoodString = temp.join(',')+',';

				for(k = 0 ; k <snake_body.length; k++){

					addFoodString = addFoodString.replace(snake_body[k]+',',"")

				}

				var food_array = addFoodString.split(',');

				food = food_array[parseInt(Math.random()*(food_array.length - 1))]

				setFootState(food);

				// $('display').innerText = addFoodString;

			}

			// function pause(){

			// 	if (event.keyCode == 81)

			// 		window.clearInterval(interval);

			// }

		</script>

	</head>

	<body onload="initGame()" onkeydown="setDirction()" >

		<div id = "page">

			<div id = "left">

				<table>

					<tbody id = "tbody">

					</tbody>

				</table>

			</div>

			<div id = "right">

				<div id = "score">

					<div class = "tag">Score</div>

					<div id = "score_num">0</div>

				</div>

				<div id = "rank">

					<div class = "tag">Rank</div>

					<div id = "rank_num">1</div>

				</div>

				<div id = "notice">NOTICE：按'Q'暂停，'E'继续</div>

			</div>

		</div>

		<!-- <div id = "display"> </div> -->

	</body>

</html>

以下是效果图：
![](http://images2017.cnblogs.com/blog/885599/201708/885599-20170828144621249-460981364.png)

使用JavaScript实现简单的小游戏-贪吃蛇的更多相关文章

JavaScript面向对象编程小游戏---贪吃蛇
1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块 1- 2 维护非常方便并且成本较低. 2 这个demo是采用了 ...
手把手教学h5小游戏 - 贪吃蛇
简单的小游戏制作,代码量只有两三百行.游戏可自行扩展延申. 源码已发布至github,喜欢的点个小星星,源码入口:game-snake 游戏已发布,游戏入口:http://snake.game.yan ...
第一个windows 小游戏贪吃蛇
最近用dx尝试做了一个小的贪吃蛇游戏,代码放到github上面:https://github.com/nightwolf-chen/MyFreakout 说一下自己实现的过程: 首先,我把蛇这个抽象成 ...
JavaScript 小游戏贪吃蛇
贪吃蛇代码: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <met ...
Java经典小游戏——贪吃蛇简单实现（附源码）
一.使用知识 Jframe GUI 双向链表线程二.使用工具 IntelliJ IDEA jdk 1.8 三.开发过程 3.1素材准备首先在开发之前应该准备一些素材,已备用,我主要找了一个图片以 ...
用Canvas制作小游戏——贪吃蛇
今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不 ...
Win32小游戏--贪吃蛇
近日里学习了关于win32编程的相关知识,利用这些知识制作了一款贪吃蛇小游戏,具体细节还是分模块来叙述前期准备:在网上找到一些贪吃蛇的游戏素材图片,以及具体的逻辑框图在正式写功能之前,先把一系列环 ...
Java_GUI小游戏--贪吃蛇
贪吃蛇游戏:是一条蛇在封闭围墙里,围墙里随机出现一个食物,通过按键盘四个光标键控制蛇向上下左右四个方向移动,蛇头撞倒食物,则食物被吃掉,蛇身体长一节,接着又出现食物,等待蛇来吃,如果蛇在移动中撞到墙或 ...
用Python实现童年小游戏贪吃蛇
贪吃蛇作为一款经典小游戏,早在 1976 年就面世了,我最早接触它还是在家长的诺基亚手机中.

随机推荐

vue路由管理－保留滚动位置功能、按需加载模块名自定义
路由管理:保留滚动位置其实现与组件的keep-alive相关,仅设置了keep-aive的页面,实施保留回退位置能力. keep-alive介绍作用把切换出去的组件保留在内存中,可以保留它的状态 ...
[leetcode]238. 除自身以外数组的乘积
题目描述给定长度为 n 的整数数组 nums,其中 n > 1,返回输出数组 output ,其中 output[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积. 示例: 输 ...
[转]解决Magento批量导入带图片的商品的问题
本文转自:http://www.phpstudio.info/show-121-791-1.html 一般来说,Magento后台管理里的CSV批量导入,可以解决我们商品批量上传的大部分问题,我们只要 ...
MFC获取系统信息
一.获取系统时间 CString str,str2; CTime time; time = CTime::GetCurrentTime(); str = time.Format("%Y年%m ...
eclipse .properties插件
资源文件即 .properties 文件是常用于国际化: eclipse默认的 .properties 文件编辑器有几个问题: 编码问题多种语言同步问题下面介绍2种eclipse的 .prope ...
Dagger2 单例
解锁Dagger2使用姿势(二) 之带你理解@Scope Dagger2从0基础使用,到单例注入的正确姿势 Android之dagger2的简单运用和详细解读(入门)
JSON: jasckson 字段过滤
有这样一个场景存在一个model类如果User,这里省略了getter/setter方法 class User { String name; String uuid; Long created; Lo ...
初识Java作业
初识Java作业一. 填空题 Java技术按照用途不同分为三大版本,分别是JavaSE. javaEE 和JavaMe Java虚拟机就是一个虚拟的用于执行 .class ...
JAVA中销毁session的代码
ServletActionContext.getRequest().getSession().invalidate();
小记SharePoint REST API Search和COM
1.管理员身份Visual Studio,新建类项目 SPCOM 2.编写逻辑实现代码重点关注搜索结果的属性包括: Title,Author,Path,Description,HitHighligh ...

使用JavaScript实现简单的小游戏-贪吃蛇

使用JavaScript实现简单的小游戏-贪吃蛇的更多相关文章

随机推荐

热门专题