3个web小游戏制作只需基础三剑客—html+css+js
3个web小游戏制作只需基础三剑客—html+css+js
新人们找个好玩的来练练手如何？虽然不是专职搞web的做过几个代码简陋，只有几十行然而做出来的感觉甚是开心，也希望各位新入门的开发者可以拿去做个小游戏玩玩看。
三个游戏：翻转拼图，2048网页版，视力大作战。
一：翻转拼图
其中翻转拼图个人认为是最好玩的一个以前做过详细的逻辑和代码分析，链接在下可以学习一下。代码在试玩网页可以查看 http://luyishisi.github.io/game1/
在准备写这个之前至少要有html，css和JavaScript的知识，如果会jQuery最好。
首先贴上一开始想的开发规划：
逐步实现：
- 1：点击按钮实现变色，
- 2：点击按钮实现旁边按钮的变色
- 3：实现变色的重复性，
- 4：设置边界，
- 5：设置成功条件。
试玩页面如下：
http://luyishisi.github.io/game1/
所以，一开始是先画一个按钮，加入JavaScript函数，触发点击事件修改按钮的背景颜色。再次点击则再次修改。当实现这两个的时候，时间已经过去一个多小时，在午饭前一直郁闷于如何让旁边的按钮也变色。一开始的思路是每一个按钮设置id，分别处理，可以想象这是一个很糟糕的思路，于是开始考虑别的方案。开始吃午饭了，一路上我就如何把按钮旁边的颜色变化这个问题，求教大师兄。他提供的解决方案，是运用jQuery的遍历，刚好昨天学了jQuery，这个思路是不错的。后来超哥也提供一个思路，就是用二维数组表示数值，点击按钮修改数租参数，再调用一个函数，刷新所有按钮的值。好就决定是他了，（最终成品版用了avalon.min.js ），上吧，皮卡丘
二：2048网页版
2048这个游戏很知名，手机端网页版pc端都有，今天我们可以稍微自己做一个简易版的玩一下。
编写思路：
- 16个按钮构成界面
- 通过js修改value值
- js捕捉键盘事件抓住方向键触发
- 触发事件修改按钮的value值
- 写运行算法，根据按钮value对应的数值得出新值
- 修改与测试
运行界面：
请不要嘲讽我难看的设计，，希望有妹子可以修正给个美丽的色调。
试玩地址：
http://luyishisi.github.io/game2048/
js代码就不贴了有试玩地址f12你们懂得：
三：视力大作战
前段时间看空间流行一个小游戏,类似与一个表格每点击一次所有的颜色都会变化,找出其中某一个与别的颜色不同的,感觉思路比较清晰就顺手写一个玩一玩.
试玩网址:https://www.urlteam.org/shiligame.html 有地址f12就可以看源码，我不多解析了。
上面的试玩网址有点坏了。。用这个 http://luyishisi.github.io/game_shili/
好吧,我承认这份代码比较low.没有用什么框架,也没有什么很好拓展性,不像是之前用avalon做的那个:
这个代码主要还是想拿来复习一下,,楞是写了两节课,如果换在去年,估计半个小时就基本搞定了..唉.代码还是得经常练,不然又得重新学..
代码的整体思路是:
用div划分出16个块.css处理一下样式,在js中,捕捉每一次点击事件,每次产生一个4096以内的随机数,处理成色彩编码,然后把每一个div的背景色进行修改,然后再产生一个随机数,对16去余数,转换为id编号,将其色彩编码做一个随机小范围的增减,然后刷新背景色..
已经发现的bug有:
1:产生的随机数如果是0则因为没有bu0这个id会导致游戏无法进行,已经修复,出现0则++;
2:产生的随机数如果与上次的相等会导致色彩刷新失败,已经修复,与name_temp比对,相同则++;
3:手机上显示不是很切合,还未解决..
4:不同浏览器可能看到的排版效果不同,未测试.
运行截图:
原创文章，转载请注明： 转载自URl-team
本文链接地址: 3个web小游戏制作只需基础三剑客—html+css+js
No related posts.