javascript小游戏：贪吃蛇

此小游戏采用的是面向对象的思想，将蛇，食物，和游戏引擎分为3个对象来写的。

为方便下载，我把js写在了html中，

源码中暂时没有注释，等有空我在添加点注释吧。

游戏玩法：直接打开html文件即可开始游戏，用键盘的上下左右键控制蛇的移动。

代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>贪吃蛇</title>

		<style type="text/css">

			*{

				margin:0; padding:0;

			}

			#tab{

				margin:50px auto;

				border:1px solid #000;

				border-collapse:collapse;

			}

			#tab td{

				width:20px; height:20px;

				border:1px solid #555;

			}

			.cover{

				background:#000;

			}

			.food{

				background:#f00;

			}

		</style>

		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			window.onload = function(){

				var tab = document.getElementById('tab');

				for(var i = 0;i<20;i++){

					var temptr = document.createElement('tr');

					for(var j = 0;j<20;j++){

						var temptd = document.createElement('td');

						temptr.appendChild(temptd);

					}

					tab.appendChild(temptr);

				}

				new Game().start();

			}

			function Game(){

				if(Game.instance) {

					return Game.instance;

				}

				var self = this;

				this.flag = true;

				this.keyJudge = true;

				this.body = $('#tab');

				this.start = function(){

					this.flag = true;

					new food().show();

					this.snk = new snake().print().move();

					this.listener();

				}

				this.stop = function(){

					this.flag = false;

					alert("Game Over!");

				}

				this.getDom = function(pos){

					return this.body.children[pos.row].children[pos.col];

				}

				this.listener = function(){

					document.addEventListener("keydown",function(e){

						if(self.keyJudge == true){

							switch(e.keyCode){

								case 37: self.snk.dir = self.snk.dir ==3? 3:1; break;

								case 38: self.snk.dir = self.snk.dir ==4? 4:2; break;

								case 39: self.snk.dir = self.snk.dir ==1? 1:3; break;

								case 40: self.snk.dir = self.snk.dir ==2? 2:4; break;

							}

							self.keyJudge = false;

						}

					});

				}

				Game.instance = this;

			}

			function snake(){

				var self = this;

				this.body = [{row:randomInt(0,19),col:randomInt(0,19)}];

				this.dir = randomInt(1,4);

				this.print = function(){

					 this.body.forEach(function(pos){

					 	new Game().getDom(pos).className = "cover";

					 });

					return this;

				}

				this.step = function(){

						switch(this.dir){

							case 1: this.next = {col:this.body[0].col-1,row:this.body[0].row}; break;

							case 2: this.next = {col:this.body[0].col, row:this.body[0].row-1}; break;

							case 3: this.next = {col:this.body[0].col+1, row:this.body[0].row}; break;

							case 4: this.next = {col:this.body[0].col, row: this.body[0].row+1}; break;

						}

						if(this.next.col<0||this.next.col>19||this.next.row<0||this.next.row>19){

							new Game().stop();

						}else if(new Game().getDom(this.next).className == "food"){

							this.body.unshift(this.next);

							new food().show();

						}else if(new Game().getDom(this.next).className == "cover"){

							new Game().stop();

						}else{

							this.body.unshift(this.next);

							var del = this.body.pop();

							new Game().body.children[del.row].children[del.col].className = "";

						}

						this.print();

						return this;

				}

				this.move = function(){

					this.speed = 300;

					setTimeout(function(){

						switch(self.body.length){

							case 5: self.speed = 250; break;

							case 10: self.speed = 200; break;

							case 15: self.speed = 150; break;

							case 20: self.speed = 100; break;

							case 30: self.speed = 70;

						}

						if(new Game().flag ){

							self.step();

							new Game().keyJudge = true;

							setTimeout(arguments.callee,self.speed);

						}

					}.bind(this),self.speed)

					return this;

				}

			}

			function food(){

				this.show = function(){

					this.body = {row:randomInt(0,19),col:randomInt(0,19)};

					while(new Game().getDom(this.body).className == "cover"){

						this.body = {row:randomInt(0,19),col:randomInt(0,19)};

					}

					 new Game().getDom(this.body).className = "food";

					 return this;

				}

			}

		</script>

	</head>

	<body>

		<table id = "tab" >

		</table>

	</body>

</html>

JS小游戏：贪吃蛇（附源码）的更多相关文章

  1. Ruby for Sketchup 贪吃蛇演示源码（naive_snake）

    sketchup是非常简单易用的三维建模软件,可以利用ruby 做二次开发, api文档 http://www.rbc321.cn/api 今天在su中做了一款小游戏 贪吃蛇,说一下步骤 展示 主要思 ...

  2. JS/Jquery版本的俄罗斯方块(附源码分析)

    转载于http://blog.csdn.net/unionline/article/details/63250597 且后续更新于此 1.前言 写这个jQuery版本的小游戏的缘由在于我想通过从零到有 ...

  3. JavaScript面向对象编程小游戏---贪吃蛇

    1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块 1- 2 维护非常方便并且成本较低. ​ 2 这个demo是采用了 ...

  4. 第一个windows 小游戏 贪吃蛇

    最近用dx尝试做了一个小的贪吃蛇游戏,代码放到github上面:https://github.com/nightwolf-chen/MyFreakout 说一下自己实现的过程: 首先,我把蛇这个抽象成 ...

  5. Java经典小游戏——贪吃蛇简单实现（附源码）

    一.使用知识 Jframe GUI 双向链表 线程 二.使用工具 IntelliJ IDEA jdk 1.8 三.开发过程 3.1素材准备 首先在开发之前应该准备一些素材,已备用,我主要找了一个图片以 ...

  6. 使用JS制作小游戏贪吃蛇

    先看效果图: 过程如下: 1.首先创建一张画布地图<div class="map"> </div>: 2.创建食物的自调用函数 (function (){ ...

  7. 手把手教学h5小游戏 - 贪吃蛇

    简单的小游戏制作,代码量只有两三百行.游戏可自行扩展延申. 源码已发布至github,喜欢的点个小星星,源码入口:game-snake 游戏已发布,游戏入口:http://snake.game.yan ...

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

    最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...

  9. 用Canvas制作小游戏——贪吃蛇

    今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不 ...

  10. JavaScript 小游戏 贪吃蛇

    贪吃蛇 代码: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <met ...

随机推荐

  1. 在jsp页面的js中使用Cookie的原理介绍以及相应方法的代码

    1. 设置cookie 1.1 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="user_Id=828&q ...

  2. 慢SQL汇总

    select count(*) as aggregate from `yqz_feed_praise` where `uid` = '580242' and `praise_uid` <> ...

  3. 敏捷开发(2)-Scrum

    什么是SCRUM Scrum的英文意思是橄榄球运动的一个专业术语,表示“争球”的动作:把一个开发流程的名字取名为Scrum,我想你一定能想象出你的开发团队在开发一个项目时,大家像打橄榄球一样迅速.富有 ...

  4. JAVA常用API（Date、DateFormat、Calendar、System、Math、基本数据类型包装类）

    注:本文所有内容均属个人见解,如有错误望各位大佬好心指点批评,不胜感激 本章重点单词: parse:解析 format:格式化 pattern:模式 amount:数量 filed :领域 1.Dat ...

  5. linux 计划任务(crontab)

    每天写一点,总有一天我这条咸鱼能变得更咸 cron服务是一个linux下 的定时执行工具,可以在无需人工干预的情况下运行作业.频率可以划分为 分钟 小时 天 月 周,格式如下: 1.crontab 服 ...

  6. Learning Scrapy 中文版翻译 第一章

    第一章:scrapy介绍 欢迎来到scrapy之旅.通过这本书,我们将帮助你从只会一点或者零基础的Scrapy初学者达到熟练使用这个强大的框架在互联网或者其他资源抓取海量的数据.在这一章节,我们将给你 ...

  7. 用 eclipse 创建一个简单的 meaven spring springMvc mybatis 项目

    下面是整体步骤: 1: 先创建一个Maven 项目: 选择跳过骨架: 因为要搭建的是 web 项目  所以这个地方选择 war 包; 点击完成 这样就完成 Maven项目的搭建: 接下俩 先把 Mav ...

  8. UISearchBar的扩展使用

    1. 设置背景颜色 let searchBar = UISearchBar.init() searchBar.barTintColor = UIColor.white 2. 去除上下黑线 let bg ...

  9. JQuery-基础学习1

    1)JQuery语法 jquery语法是为HTML元素的选取编制,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义JQuery 选择符(selector)& ...

  10. JAVA基础知识总结：八

    面向对象语言的三大特性;封装.继承.多态 一.面向对象语言特性之封装 1.什么是封装? 一个类中某些属性,如果不希望外界直接访问,我们可以将这个属性作为私有的,可以给外界暴露出来一个访问的方法 使用封 ...