`

html5-贪食蛇

    博客分类:
  • Java
阅读更多
随着HTML5的插入触碰到RIA的G点,b/s的生产力将进一步解放,生产效率将进一步提高,由此必将引起生产关系的变化,即由原来的c/s结构的保守主义,地方主义向着b/s的共产主义初级阶段迈进。Javascript,作为RIA中的宠儿,在这场浪潮中,必定迎来高潮。

识时务者为俊杰。在这个大背景下,各路英雄纷纷揭竿而起,竖起javascript的大旗,誓要在后RIA时代的舞台中占有一席之地。yangguo也未能免俗,开始重新审视这门畸形的面向对象语言。

然而畸形毕竟是畸形,没有道行进一步学习可谓举步维艰,正当陷在闭包,this,prototype,Function中百般混沌时,忽然眼前出现一白发老人。只听老人说道:

把这个代码看一看,JS的哲学思想都融合在代码里了。

我运行了那代码,发现什么也没有,怔怔地看着老人。老人抚须蔑视道:呆子,什么年代了还用IE。我反应过来换上firefox, 发现竟是一贪食蛇游戏,正惊奇间,那老人已飘然而去,口中喃喃说道:

对象本无根,类型亦无形。本来无一物,何处惹尘埃?

如今我把那奇怪的代码放在了附件,大家可以看看。











分享到:
评论
17 楼 wmj007 2010-12-07  
作者的确是文采很好,也很幽默,在简单故事描述中道出小东西的运行环境,有意思,拿来玩玩,的确是厉害人物,JS都这样玩了
16 楼 cleanidea 2010-12-03  
看过楼主几个帖子 都很有意思 ,将程序和许多东西结合在一起
15 楼 scyscy1234 2010-12-02  
测试的时候出现一个怪现象,当撞到墙上的时候不停的alert啊
14 楼 sinxsoft 2010-12-02  
需要ie9。
13 楼 yangguo 2010-12-02  
cai3178940 写道
楼主太厉害了,我发现2个Bug,改变方向的时候蛇会多走一步,这个bug我帮楼主改好了
this.turn = function(code){
		var head = this.getHead();
		var point = new E770(head.x,head.y);
		
		switch(code - 36){
			case 1:
			if(this.k209 == 1 || this.k209 == 3)
			return;	
			//point.x--;  //只改方向就行不用多走一步
			break;
			case 2:
			if(this.k209 == 2 || this.k209 == 4)
			return;
			//point.y--;
			break;
			case 3:
			if(this.k209 == 1 || this.k209 == 3)
			return;
			//point.x++;	
			break;
			case 4:
			if(this.k209 == 2 || this.k209 == 4)
			return;
			//point.y++;
			break;		
		}
		this.k209 = code - 36;
		//this.process(point);   //这里也不用判断逻辑了
	}



还有一个Bug是点两次开始游戏,蛇死亡时会不停的跳game over



呵呵,第一个不是什么bug。改变方向是要动一下,这样控制感比较强,否则效果很不好,你调到速度1就体现出来了。第二个bug修正如下:

引用

this.startGame = function(step){
this.clear();
clearInterval(this.moveHandle);
e398.init();
this.score = 0;
this.scoreLabel.innerHTML = this.score;
this.gamePanel.onkeydown = onKeyDown;
this.step = parseInt(step);
this.moveHandle = setInterval(move, 500 - 50 * this.step);
}



12 楼 flyingzl 2010-12-02  
yangguo 写道
随着HTML5的插入触碰到RIA的G点,b/s的生产力将进一步解放,生产效率将进一步提高,由此必将引起生产关系的变化,即由原来的c/s结构的保守主义,地方主义向着b/s的共产主义初级阶段迈进。Javascript,作为RIA中的宠儿,在这场浪潮中,必定迎来高潮。

识时务者为俊杰。在这个大背景下,各路英雄纷纷揭竿而起,竖起javascript的大旗,誓要在后RIA时代的舞台中占有一席之地。yangguo也未能免俗,开始重新审视这门畸形的面向对象语言。

然而畸形毕竟是畸形,没有道行进一步学习可谓举步维艰,正当陷在闭包,this,prototype,Function中百般混沌时,忽然眼前出现一白发老人。只听老人说道:

把这个代码看一看,JS的哲学思想都融合在代码里了。

我运行了那代码,发现什么也没有,怔怔地看着老人。老人抚须蔑视道:呆子,什么年代了还用IE。我反应过来换上firefox, 发现竟是一贪食蛇游戏,正惊奇间,那老人已飘然而去,口中喃喃说道:

对象本无根,类型亦无形。本来无一物,何处惹尘埃?

如今我把那奇怪的代码放在了附件,大家可以看看。









哈哈,楼主看过《悟透javascript》这部书吧,把里面的几句话学到了,尤其是“对象本无根,类型亦无形。本来无一物,何处惹尘埃?”
11 楼 sjzw46673 2010-12-02  
说实话,我不知道讨论非IE应用有什么意义,国内太多客户只知道IE了。非IE只是在程序员之间在讨论,但程序员大多数时候不是客户。
10 楼 cai3178940 2010-12-02  
楼主太厉害了,我发现2个Bug,改变方向的时候蛇会多走一步,这个bug我帮楼主改好了
this.turn = function(code){
		var head = this.getHead();
		var point = new E770(head.x,head.y);
		
		switch(code - 36){
			case 1:
			if(this.k209 == 1 || this.k209 == 3)
			return;	
			//point.x--;  //只改方向就行不用多走一步
			break;
			case 2:
			if(this.k209 == 2 || this.k209 == 4)
			return;
			//point.y--;
			break;
			case 3:
			if(this.k209 == 1 || this.k209 == 3)
			return;
			//point.x++;	
			break;
			case 4:
			if(this.k209 == 2 || this.k209 == 4)
			return;
			//point.y++;
			break;		
		}
		this.k209 = code - 36;
		//this.process(point);   //这里也不用判断逻辑了
	}



还有一个Bug是点两次开始游戏,蛇死亡时会不停的跳game over
9 楼 yangguo 2010-12-01  
pouyang 写道
有bug啊,把速度调快了,一直死在那里弹出alert,强迫任务管理器关浏览器。


将alert移到stopGame里即可fix.

this.stopGame = function(){
		this.pause();
		alert("Game Over");
		document.getElementById("control").disabled = true;
		localStorage.maxScore = this.maxScore; 
		//alert(localStorage.maxScore);
	}


8 楼 yangguo 2010-12-01  
pouyang 写道
有bug啊,把速度调快了,一直死在那里弹出alert,强迫任务管理器关浏览器。


这个bug我记得已经fix了。你再玩几次,看下有没出现。
7 楼 pouyang 2010-12-01  
有bug啊,把速度调快了,一直死在那里弹出alert,强迫任务管理器关浏览器。
6 楼 yangguo 2010-12-01  
我开8倍速,玩到528。
5 楼 zhuyan_zy 2010-12-01  
yangguo 写道
奇怪,我在空间删个贴子怎么把这个帖子的回复全都删了?!

去问肉饼
4 楼 zhuyan_zy 2010-12-01  
要我是LZ我就改行,哈哈
3 楼 yangguo 2010-12-01  
奇怪,我在空间删个贴子怎么把这个帖子的回复全都删了?!
2 楼 zhuyan_zy 2010-12-01  
文采大于程序
1 楼 snow8261 2010-12-01  
ie 好像不支持

相关推荐

    贪食蛇h5制作

    【贪食蛇h5制作】是一项利用HTML5技术来创建一款经典的贪食蛇游戏的实践项目。HTML5作为现代网页开发的主流标准,其强大的功能和兼容性使得开发者能够构建丰富的交互式应用,包括游戏。在这个项目中,我们将探讨如何...

    html与JavaScript 贪食蛇

    开发HTML与JavaScript的贪食蛇游戏,不仅需要理解HTML的基础结构和CSS的布局,还需要掌握JavaScript的基本语法和事件处理,以及Canvas API的绘图技巧。通过这个游戏,开发者可以锻炼编程思维、提高问题解决能力,...

    简单创意的html5贪食蛇小游戏代码

    本项目以"简单创意的html5贪食蛇小游戏代码"为主题,将介绍如何使用HTML5、CSS3和JavaScript来构建一个在线版本的贪食蛇游戏。 首先,我们需要理解HTML5中的Canvas元素。Canvas是HTML5中用于绘制图形的一个二维绘图...

    html5魅族首页贪食蛇游戏特效.zip

    在本案例中,“html5魅族首页贪食蛇游戏特效”是一个利用HTML5技术实现的创意游戏,用于魅族发布会,展示了HTML5在游戏开发中的强大能力。这个游戏源码的下载将帮助开发者深入理解如何利用HTML5来创建动态、引人入胜...

    纯html+js实现的贪食蛇

    网页简单实现贪食蛇 纯html+js实现的贪食蛇

    贪食蛇.zip

    【贪食蛇.zip】是一个包含了使用Html5、Canvas和JavaScript技术开发的经典小游戏——贪食蛇的源代码包。这个小游戏的实现充分利用了现代Web技术,让玩家在浏览器环境中即可体验到传统的游戏乐趣。 首先,我们要了解...

    HTML5贪食蛇网页游戏代码源码.zip

    在这个"HTML5贪食蛇网页游戏代码源码.zip"压缩包中,包含了一个基于HTML5实现的经典游戏——贪食蛇。 1. **HTML5 Canvas** - 贪食蛇游戏通常使用HTML5的Canvas元素来绘制游戏场景。Canvas是一个二维绘图API,允许...

    贪食蛇代码.zip

    本文将深入解析一个基于JavaScript实现的贪食蛇游戏,通过分析压缩包中的四个文件——my.css、说明.htm、my.html和my.js,我们将了解其背后的关键技术和编程思想。 首先,my.html是游戏的主页面,它定义了游戏界面...

    微信小程序-贪食蛇

    5. **canvas绘图**:贪食蛇游戏通常需要在canvas元素上进行绘制,包括绘制蛇的身体、食物和边界。开发者需要熟悉canvas API,如`drawImage`、`fillRect`等,来实现动态的图形绘制和更新。 6. **动画效果**:为了...

    JS版贪食蛇

    1. **DOM操作**:在“JS版贪食蛇”中,JavaScript用于创建、修改和操控HTML元素。游戏界面的布局、蛇的位置更新以及食物的生成都涉及到对DOM的操纵。例如,使用`document.createElement()`创建新的HTML元素,`...

    贪食蛇网页版HTML5源码

    在这个“贪食蛇网页版HTML5源码”中,主要涉及以下HTML5相关知识点: 1. **Canvas API**:Canvas是HTML5中的一个核心元素,用于在网页上绘制图形。在贪食蛇游戏中,蛇的身体、食物以及边界都将在Canvas上绘制。...

    HTML5贪食蛇网页游戏代码

    HTML5贪食蛇网页游戏代码是一个利用HTML5技术构建的在线版经典游戏——贪吃蛇。这款游戏通过结合HTML5的Canvas元素、JavaScript编程语言以及可能的一些CSS3特效,为用户提供了在网页上直接玩贪吃蛇的体验。下面将...

    基于html5与canvas的 贪食蛇小游戏.zip

    在这个“基于html5与canvas的贪食蛇小游戏.zip”中,我们可以深入探讨HTML5如何与Canvas元素结合,创建一个经典的游戏——贪食蛇。 1. HTML5 Canvas:Canvas是HTML5中的一个核心特性,它提供了一个二维绘图环境,...

    HTML5创意无按钮风格贪食蛇代码.zip

    这个"HTML5创意无按钮风格贪食蛇代码"项目,利用HTML5、CSS和JavaScript技术,实现了无需传统按钮操作的贪食蛇游戏,为用户带来全新的交互体验。 首先,HTML5是项目的基石,负责构建游戏的基本结构。它引入了新的...

    用JS编写的贪食蛇游戏 代码分享.zip

    《JS实现贪食蛇游戏详解》 贪食蛇游戏,作为一个经典的休闲娱乐游戏,自诞生以来就深受玩家喜爱。在现代网页技术日益发达的今天,使用JavaScript(JS)编写贪食蛇游戏,不仅可以锻炼编程技能,还能让我们更好地理解...

    网页版贪食蛇

    这是一个纯HTml游戏

    基于html5实现的魅族首页贪食蛇游戏特效源码.zip

    【标题】"基于html5实现的魅族首页贪食蛇游戏特效源码.zip"揭示了这个压缩包包含的是一款使用HTML5技术制作的魅族首页上的贪食蛇游戏的源代码。HTML5是现代网页开发的基石,它引入了许多新特性,如Canvas画布、Web ...

    HTML5 canvas简洁版贪食蛇小游戏.zip

    HTML5的canvas元素是Web开发中的一个强大工具,它允许开发者在网页上绘制图形,创建交互式的2D游戏,如本例中的“简洁版贪食蛇小游戏”。这个游戏是利用JavaScript来控制和渲染游戏逻辑,因此它涉及到的主要知识点...

    HTML实现贪食蛇小游戏

    html实现网页小游戏贪食蛇

Global site tag (gtag.js) - Google Analytics