妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 11845|回复: 1

【妙味课堂】我用 JavaScript 写游戏之 -- 雷东升作品集

[复制链接]
无为 发表于 2014-3-13 15:56:38 | 显示全部楼层 |阅读模式

有人总是对于javascript是否能开发游戏,能开发哪些游戏充满好奇心,妙味课堂的雷东升同学或许能给你一些答案。在实体学员中,雷东升无疑是属于刻苦型学员,我们课上所提到的每一个设想,他都努力去用代码变为现实。我们说,这个知识点可以用来做一个扫雷,于是他实现了;我们说下一个知识点可以实现贪吃蛇,雷东升版贪吃蛇很快交到了我们手上。


他是我们眼中的妙味好学员,他是学员眼中的模范好榜样。还能有什么比分享他的作品更说明他的勤奋与努力呢?这里摘取了他在学习过程中实现的几个小游戏,大家不妨也写着试试:



1,消方块

表示之前没怎么玩过这游戏,相信大家很容易就能超越我的成绩。

消方块

消方块


--> 在线预览请猛戳此处 <--

游戏介绍:经典的消方块游戏,使用面向过程的方法实现。游戏开始后,通过定时器在8列ul的尾部动态添加li元素,颜色随机生成。通过监听点击事件,用递归方法找出与被点击方块颜色相同并能连成一片的方块,然后将其存入数组,之后再统一删除DOM中的li节点。在底部的li被删除后,上面的li元素自动下落,填补空缺位置。游戏中的元素全部用CSS样式实现,不包含任何图片。



2,贪吃蛇

经典的贪吃蛇游戏,不用多说什么。截图中是我的成绩,求超越!有木有!?(Ps:我是有多无聊)

贪吃蛇

贪吃蛇


--> 在线预览请猛戳此处 <--

游戏介绍:使用面向过程的方法实现。通过方向键控制蛇的移动,吃到“果子”后身体会自动变长。其实在游戏中并不存在运动元素,整个地图是一个大table,而蛇是一个由td元素组成的数组对象,通过设置数组中各个td的背景色来生成“蛇”。在方向键onmousedown的时候,通过在数组头部添加td、在尾部删除td来模拟运动效果。



3,拼图

再熟悉不过的经典游戏了,仿佛又回到了童年那犯二无极限的年代。

拼图1

拼图1

游戏开始时会显示几秒钟原图

拼图2

拼图2

打乱之后,你有信心还原么?

--> 在线预览请猛戳此处 <--

游戏介绍:使用面向过程的方法实现。整个地图是一个4*4的table,通过控制td的background-position来让每个cell显示不同的图像。鼠标点击时,如果td旁边有背景为空的td,则将两个td的背景图互换,借此造成运动错觉。游戏中的图片没有从外部引入,而是用DATA URI技术存入了HTML中。



4,扫雷

XP是一个让人欢喜让人忧的系统,对于开发者的我们真是恨死了ie6,但是它自带的经典游戏却让人爱不释手。

扫雷1

扫雷1

运气还算不错哦

扫雷2

扫雷2

好吧。。

--> 在线预览请猛戳此处 <--

游戏介绍:使用面向过程的方法实现,在游戏初始化时,随机产生50颗地雷,然后在每个方块的上面放一个遮罩。当用户点击时,遮罩层的opacity变成0,将下面方块中的内容显示出来。如果翻开的是地雷,则游戏失败;如果为空,则会以递归的方式翻开周围的方块。



5,符文连连看

东升啊,你这图片能不能换换啊,放些美女也比放这头疼的符号强啊。

连连看1

连连看1

表示还没开始我就眼花了...

连接看2 -- 寻路算法

连接看2 -- 寻路算法

寻路成功会有连线提示

--> 在线预览请猛戳此处 <--

游戏介绍:使用面向过程的方法实现。游戏中最难的是寻路算法,也就是如何判断两个相同图标之间的路是畅通的(所谓畅通,是指从一个图标出发,在“两折”之内可以抵达目标元素)。编程中首先实现了“直线”连通,然后将“一折”问题分解成“直线”问题,再将“两折”问题分解成“一折”问题,最后完美解决。



6,俄罗斯方块

这绝对是小时候跟小伙伴打架的导火索,至今想想我还不自觉地会摸一下鼻子。。。

俄罗斯方块

俄罗斯方块

大家忽略这糟糕的配色吧,表示毫无审美观的我也无能为力

--> 在线预览请猛戳此处 <--

游戏介绍:使用面向过程的方法实现。整个地图是一个table,通过给不同的td元素添加背景色来产生方块形状。每种形状
都是一个有td元素组成的数组,通过控制数组来实现下落以及变形。地图中的方块并没有真正的运动,而是通过改变td元素的背景色实现。




雷东升同学目前已经结业,正在找工作中,有意向的公司可以直接与之联系,联系方式: QQ 416255215
回复

使用道具 举报

Adon 发表于 2014-3-14 13:28:07 | 显示全部楼层
东升啊,你这图片能不能换换啊,放些美女也比放这头疼的符号强啊。


针对这一句,我想说的是,为了能尽量把游戏写成一个单一的html文件,我是尽量的避免图片啊。。。甚至拼图那个游戏,都是用DATA URI做的!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2017-9-25 05:05 , Processed in 0.286400 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表