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. IBM Minus One 简单字符处理

    IBM Minus One Time Limit: 2 Seconds      Memory Limit: 65536 KB You may have heard of the book '2001 ...

  2. 对Jquery中的ajax再封装,简化操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. DevOps之软件定义网络SDN

    唠叨话 关于德语噢屁事的知识点,仅提供专业性的精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <软件定义网络SDN(Software Defined Network)> 关于软 ...

  4. 【转载】基于VoiceOver的移动web站无障碍访问实战

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

  5. java基础---java语言概述

    一.计算机编程的两种范型 1.面向过程的模型---具有线性执行特点,认为是代码作用于数据. 2.面向对象的模型---围绕它的数据(即对象)和为这个数据定义的接口来组织程序:实际上是用数据控制代码的访问 ...

  6. vue搭建项目前奏曲——vue-cli

    vue-cli是快速构建这个单页应用的脚手架,这个可是官方的.官方给的建议,如果你是初次尝试Vue,哪就老老实实用普通的书写引入js文件,这里牵扯太多的东西,例如webpack.Node.js.npm ...

  7. BZOJ-1045-[HAOI2008] 糖果传递（中位数原理）

    Description 有n个小朋友坐成一圈,每人有ai个糖果.每人只能给左右两人传递糖果.每人每次传递一个糖果代价为1. Input 第一行一个正整数nn<=1'000'000,表示小朋友的个 ...

  8. ASP.NET Core 2.0 in Docker on Windows Container

    安装Docker for Windows https://store.docker.com/editions/community/docker-ce-desktop-windows 要想将一个ASP. ...

  9. Java规范推荐

    Java规范推荐 推荐:http://blog.csdn.net/tristansmile/article/details/7989670 命名规范 项目名:全部小写 Package 的命名:应该都是 ...

  10. 浅试 Webview 一app 加载 H5小游戏

    整体架构: InventionActivity:实现UI的实例化,基本的按钮Activity之间跳转 GameActivity:实现UI的实例化,Webview的基本使用 MyProgressDial ...