微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

3个Web入门小游戏,制作只需基础三剑客

2016-08-30 20:35 前端大全

(点击上方公众号,可快速关注)

作者:伯乐在线专栏作者 - 陆熠十四

链接:http://web.jobbole.com/87642/


新人们找个好玩的来练练手如何?虽然我不是专职搞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端都有,今天我们可以稍微自己做一个简易版的玩一下。


编写思路:


  1. 16个按钮构成界面

  2. 通过js修改value值

  3. js捕捉键盘事件抓住方向键触发

  4. 触发事件修改按钮的value值

  5. 写运行算法,根据按钮value对应的数值得出新值

  6. 修改与测试


运行界面:


请不要嘲讽我难看的设计,希望有妹子可以修正给个美丽的色调。



试玩地址:


http://luyishisi.github.io/game2048/


js代码就不贴了有试玩地址f12你们懂得:


三:视力大作战


前段时间看空间流行一个小游戏,类似与一个表格每点击一次所有的颜色都会变化,找出其中某一个与别的颜色不同的,感觉思路比较清晰就顺手写一个玩一玩.


试玩网址:https://www.urlteam.org/shiligame.html  有地址f12就可以看源码,我不多解析了。


好吧,我承认这份代码比较low.没有用什么框架,也没有什么很好拓展性,不像是之前用avalon做的那个:


这个代码主要还是想拿来复习一下,,楞是写了两节课,如果换在去年,估计半个小时就基本搞定了..唉.代码还是得经常练,不然又得重新学..


代码的整体思路是:


用div划分出16个块.css处理一下样式,在js中,捕捉每一次点击事件,每次产生一个4096以内的随机数,处理成色彩编码,然后把每一个div的背景色进行修改,然后再产生一个随机数,对16去余数,转换为id编号,将其色彩编码做一个随机小范围的增减,然后刷新背景色..


已经发现的bug有:


1:产生的随机数如果是0则因为没有bu0这个id会导致游戏无法进行,已经修复,出现0则++;


2:产生的随机数如果与上次的相等会导致色彩刷新失败,已经修复,与name_temp比对,相同则++;


3:手机上显示不是很切合,还未解决..


4:不同浏览器可能看到的排版效果不同,未测试.


运行截图:



后记:


朋友们,所有人的技术都是一步步积累而来,而制作小游戏,小项目就是让积累的过程更快乐。


本文是将我自己博客中的几篇文章总结汇总而来,各位可以回链参观一下,也有不少自制小项目玩玩。



专栏作者简介 ( 点击 → 加入专栏作者 


陆熠十四:少年程序猿,从事数据采集挖掘方面:个人博客,www.urlteam.org。主要技能树:python,爬虫,linux,web前端,ACM,骑行。


------------------ 推荐 ------------------


范品社推出了十几款程序员、电影、美剧和物理题材的极客T恤单件 ¥59.9、两件减¥12、四件减¥28,详见网店商品页介绍。


网店地址:https://fanpinshe.taobao.com/

淘口令:复制以下红色内容,然后打开手淘即可购买

范品社,使用¥极客T恤¥抢先预览(长按复制整段文案,打开手机淘宝即可进入活动内容)

 
前端大全 更多文章 怎么找工作,怎么找到工作,怎么找到满意工作? HTTP,HTTP2.0,SPDY,HTTPS你应该知道的一些事 Vue.js——60分钟组件快速入门(上篇) Vue.js——60分钟组件快速入门(下篇) 我花了十万,找到了IT从业者缓解压力,避免脱发的办法…
猜您喜欢 给那些刚入行的 iOS/Android 开发新手们的一些建议 【第2章第200回】格式化手机号,银行号jQuery插件 快播涉嫌传播淫秽案庭审精彩语录整理 平安金融科技移动技术周报(第二十二期) “压倒服务器的最后一个用户”-- 如何寻找极限点?