游戏开发教程实战:仅仅100行代码教你玩翻四种对弈游戏!
栏目: JavaScript · 发布时间: 7年前
内容简介:游戏开发教程实战:仅仅100行代码教你玩翻四种对弈游戏!
本文是一个非常具有挑战性的编程,因为100行代码,约莫10000个字符左右,将实现围棋、五子棋、四子棋和翻转棋四种双人对弈游戏。请注意,这四个对弈游戏不是初级编程者的习作,而是有着棋盘、立体棋子、事件、走棋规则判断、输赢判断的完整对弈游戏,并且可以离线存储到 iPad、Android平板中,试想一下,把这种游戏下载到平板中,就可以在火车,旅游景区,等没有信号的地方进行对弈,是不是扩展了平板电脑的功能,是不是一种很惬意的事情。而且,关键是,这个程序没有图片,不需要去应用商店付费下载,仅仅是用 HTML5技术写的 100行代码而已,绝对是目前最迷您精悍的双人对弈游戏源码。(编者注:由于网页代码的宽度有限制,所以作者的源代码经过了一些换行处理,特此说明。)
目标
要做一个完整的双人对弈游戏,至少要做如下事情,第一步:绘制棋盘。不同的棋类游戏棋盘不同,这一点需要进行动态处理;第二步:绘制棋子。需要说明的是,围棋,五子棋等这些棋子都是圆的啊,请不要为了图片苦恼,在 HTML5时代,我们用代码就可以实现立体圆形棋子;第三步:判断落子事件。当然是要定位手指的点击位置,这四种棋中,有的是落在框里面的,有的却是落在纵横交错的棋盘十字线上,需要动态处理;第四步:判断落子规则。下棋都有规则,不要因为代码少,就将规则打折扣,否则程序不成熟,会变成小朋友的玩具了;第五步:判断输赢。最后,我们要判断输赢。也就是要数子,这个事情必须由程序来完成,因为下棋总得需要一个裁判嘛;第六步:就是平板电脑时代,我们得实现离线应用。这个太重要了,否则,要是在台式电脑上,接根网线玩的游戏,已经遍地都是了,您写得再牛,有什么用?就是要移动,在没有信号的地方,才有市场,现在平板,智能手机这么多,在没有网络信号的地方,掏出移动设备来下棋,才是一件很牛的事情。
绘制棋盘
前面说了围棋、五子棋、四子棋和翻转棋的棋盘并不相同,围棋是纵横 18个格,其他三种棋则是 8个格。所以绘制棋盘是需要有参数。这是个小问题,大问题是,选择什么方法来绘制棋盘?
HTML5框架下,有至少 3种方法:第一种,用 Canvas画线;第二种,用 DIV,CSS3里面增加了行列属性;第三种,用 table标签。
用哪一种速度最快,代码少呢?答案是:第三种。多少有点失望啊,HTML5不是万能的。详细代码如下:
喜欢 JAVA 的小伙伴,在学习Java阶段的,在学习有困难或者想获取相关学习资料
JAVA学习交流 616959444
上面代码中,最重要的是标黑体的第 6行代码,这里 面有两个诀窍,第一个就是 table的定义,第二个就是使用了 Array数组。为什么要使用数组,而不是定义一个字符串呢?答案是优化,就是 Array数组的 push方法的速度要远远快于 String字符串的加 +运算。共计 16行代码,一个棋盘就画好了,当然这其中不仅仅是画线,还有棋子处理,事件定义等方法的调用,后面将陆续谈到。
绘制棋子
绘制完棋盘,我们来绘制棋子。我们挑选的这四种棋,虽然棋盘不同,但是棋子都是相同的,都是黑白棋子。这在以前,做在线对弈,除了 Flash能实现美观效果外,其他的必须先请美工做几副小图片,HTML5时代,美工的人力和沟通成本就节省了。
我们至少有两种方法绘制棋子,第一种是:canvas类,第二种就是 css的圆角属性。用哪种速度又快代码又少呢?答案是第二种,圆角。代码如下:
上面代码中,我们看到,我们将每一个棋子定义了一个 DIV,使用了 CSS3的 shadow,gradient属性,并且可以根据棋盘的大小自动计算棋子的大小,另外,如果用户不喜欢黑白颜色,甚至可以定义成红黄颜色,女生和小朋友估计会喜欢。这 5行代码是画一个棋子的方法,做一个简单的循环,就可以画出多个棋子,方法如下。
处理事件
绘制完棋盘和棋子,我们来分析一下用户的动作。用户的动作无非就是两种,一种是点击棋盘 table,另外一种就是点击棋子 DIV。难点在点击 table这里,我们要获知用户点击 table的位置。
传统思路可能是这样,使用 event方法,获得 x,y的坐标,然后与 table的左上角做减法,然后再跟单元格 cell做除法。听起来都麻烦。
如果您仔细阅读了前面的代码,就应该发现,其实在画棋盘是,我们向 array数组中 push了一个 evt方法,很明显,这个 evt方法要返回一个字符串变量的,那么他的内容是什么呢?答案揭晓:
原理是一个 DIV。对了,这个添加事件的方法非常特殊,实际上是在每个棋盘的交叉的地方画了一个 DIV,然后给 DIV添加事件。
需要说明的是,DIV一定要先定义,即 document.write输出出来,然后才能执行 onclick的定义,否则会返回 DIV未定义的错误。寥寥 10行代码,把事件问题搞定了。
落子规则
前面说了,用户点击事件有两种,点击棋盘 table事件我们采用额外增加 DIV的方法巧妙解决了,第二种点击棋子的方法又该如何呢?
先要说明的是,点击棋子其实是一种错误的事件,点击棋盘可以落子,点击棋子是什么意思?黑白棋点击棋子是无意义的,我们必须要进行判断,不能在有子的地方落子,这是规则之一。所以必须要定义一个方法,判断是不是点击的地方是不是有棋子。代码如下:
想不到吧,其实只要一行代码就可以就可以做是否有子的判断,怎么判断的,诀窍就在于判断 DIV的颜色,棋子要么黑,返回 0,要么白,返回 1,但是空白地方是没有颜色的,返回 null。这里要特别注意返回值,后面判断输赢的时候还要用,所以不能简单通过 true或者 false的的返回值来判断是否有子,而是要判断出有什么颜色的子。
对于五子棋和围棋,这一条规则够用了,但是对于翻转棋和四子棋,还有第二条规则:不能在四周空白的地方落子,就是说必须是相连的。也就是说,不仅仅要判断点击的地方是不是有棋子,还要判断其四周是不是有棋子,这个,不是可以有,而是,必须有。需要做一个小循环啊,代码如下:
喜欢JAVA的小伙伴,在学习Java阶段的,在学习有困难或者想获取相关学习资料
JAVA学习交流 616959444
循环中,反复调用 isMan方法判断是否有棋子,所以如果 isMan写得不够简练,快速,不知道要耗费多少时间啊。数一数,总共 19行代码就处理了落子规则。
到这里,我们绘制了棋盘,棋子,获得了点击时间,判断了落子规则,才用了 40行左右的代码,其实程序基本上可用了,但是我们不能满足啊,还得让他更加智能一些,我们还需要一个裁判断输赢。
判断输赢
要判断输赢,我们必须要知道下棋的规则:
五子棋是各个方向的五子相连算赢,四子棋是各个方向四个子相连算赢,翻转棋数棋子的个数,围棋则要麻烦些,不仅仅数棋子个数,还要数围住的区域。
逻辑上好像很复杂啊,似乎也是计算最多的地方,有点人工智能的意思。没错,如果前面的基础打得不好,这里的确要耗费很多代码,但是因为我们前面定义了 DIV用颜色判断是否存在棋子的 iaMan方法,这里再使用一个小技巧,就可以轻松搞定这个输赢判断。先看看五子棋和四子棋的输赢判断代码,然后对照代码来分析。
共计 9行代码就搞定,看懂没?首先定义了一个 Javascript多维数组 rs=[,,,],这种定义多维数组的方法,挑出来重点说明一下,因为搜索引擎上都是搜不到的,我讲课时差不多遇到的学生也都不清楚,他们大多采用 new Array,然后加循环的蜗牛方法。
第二步:从落子的地方开始循环,注意,不是循环整个棋盘,为的就是节省时间啊。循环设计纵横交叉四个方向,有棋子的地方,就向这个四维数组 push棋子的颜色。
第三步:把数组 join起来就 ok啦,如果有 4个或 5个 1相连,自然就是白棋胜,否则就是黑棋胜。
写道这里,就有点意思啦,注意我们处理的数据的方法,我称之为“块数据”的处理方法,就是充分利用 array数组,保存一块一块的数据,无论写入,读取,还是统计分析,都是针对这一块数据进行,这样既可以提高内聚度,便于提炼出可以重用的方法,就可以大大的加快执行速度。
处理相连都不在话下,数子就更简单了,使用块数据处理方法,3行搞定。
棋子初始化
环环相扣地写到这里,还有最后一个关于棋子的问题需要处理。那就是,下五子棋是从空白棋盘开始,其他三种棋却一开始都是有子的。其实给一个空白棋盘也行,但是其他三种棋因为一般的前几步走法都是固定的,我们为了提高智能化程度,不得不在浪费四行代码,毕竟,我们的目标是一个市场化的产品,而不是一个初学者不考虑用户体验的程序。
其实就是调用了一下 moreMan方法,注意也是块数据引用,传输了一个数组,用下划线分割横向和纵向坐标。
做成离线应用
本文开头就说过,台式电脑的双人或多人对弈程序早已多如牛毛烂大街了,只有移动应用才能有市场,我们的目标就是奔着这个来的,所以最后必须做成离线应用。
如何实现 HTML5的离线应用,搜索引擎很快能找到结果,其实只要三个关键步骤。
第一步;在 Web服务器的配置文件中声明一下。Tomcat和 Apache的声明方式不相同,需要注意;
第二步:定义 manifest文件,文件格式需要注意;
第三步:在 HTML的文件中调用一下 manifest文件。
根据这三个步骤,读者可以自行搜索细节,这里就不赘述了,我只讲搜索引擎搜不到的。
另外需要说明的是,iPad和 Android平板上浏览器实现全屏的方法也不一样,针对 iPad用户,我们还必须定义一行能够实现全屏的代码。
效果图、在线演示、开放源代码
本文的在线演示网址是:http://demo.zuidaima.com/html/1839614057712640/index.html,效果图如下图所示:
图 1.效果图
好了,感谢各位的认真阅读!其实这只是小编和团队做出来跟大家分享的,小编以及身后的团队是做Java开发教学的!
喜欢JAVA的小伙伴,在学习Java阶段的,在学习有困难或者想获取相关学习资料
JAVA学习交流 616959444
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 大厂面试!我和面试官之间关于Redis的一场对弈!
- Java 测试驱动开发--“井字游戏” 游戏实战
- 游戏安全:某某游戏的反外挂检测
- 游戏制作之路(4)Unity添加游戏对象
- 游戏制作之路(34)游戏开始菜单的实现
- 游戏制作之路(18)隐藏游戏里的鼠标
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
移动社交时代的互动搜索营销(全彩)
萧秋水、秋叶、南方锈才 / 电子工业出版社 / 2014-8-1 / 55.00元
《移动社交时代的互动搜索营销(全彩)》跳出搜索引擎的局限,告诉读者如何利用互联网找到客户的思维。《移动社交时代的互动搜索营销(全彩)》只谈如何有效利用搜索引擎(包括移动端搜索)、电商网站、新媒体,不传播所谓的一夜暴红、一夜暴富的神话。《移动社交时代的互动搜索营销(全彩)》作者利用其丰富的实战经验,结合大量国内不同行业的实际应用案例,生动地告诉读者,怎样正确地利用搜索引擎,以很小的投资获得巨大的回报......一起来看看 《移动社交时代的互动搜索营销(全彩)》 这本书的介绍吧!
Base64 编码/解码
Base64 编码/解码
HSV CMYK 转换工具
HSV CMYK互换工具