h5小游戏制作

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了h5小游戏制作相关的知识,希望对你有一定的参考价值。

编译环境 sublime text3 

        很久以前看了一个“看看你有色”的游戏,学习这个游戏的制作我让学会了框架的服用,游戏逻辑代码,游戏设计代码分离式编程,于是我便根据这个游戏改写了一个寻找包包的游戏,功能设计思路来自12306买票试图,失物寻领中如果失物属于你你需要五次从不同包包中找的你的包方可领取

修订规则:1:30s内连续找对五次你的包包

              2: 不满5次或时间用完则提示你该物品不属于你。

              3:寻包次数不得高于5次即停止

技术分享

游戏在网页上完成通过JQuary框架编写自适应布局

 

 

技术分享

此段为游戏修改规则两种之一便执行gameOver()函数

技术分享

游戏结束时显示所需标签隐藏所需标签

技术分享

对于目标图片随机位置算法,此处有个问题没有解决,对于给定绝对地址可以找到图片放入<span>对于随机图片不可插入,解决办法预加载图片没有完成,于是我从JQuary函数库寻找函数算法,由于时间紧张没有完成,接下来时间有空我会修复这个问题

技术分享

 

原本思想是除去目标图片target别的图片随机插入格子中结果如上所述不识别只能达到如下效果

技术分享

心得体会:通过这次双人结对编程让我感到两个人的确比一个人效率高多了通过逻辑代码UI代码分配可以在很短时间内完成任务让我感受到人多就是效率。

最后人丑就不贴照了QAQ希望老师网开一面Orz

以上是关于h5小游戏制作的主要内容,如果未能解决你的问题,请参考以下文章

从零开始制作H5人脸融合小游戏

凡科互动,3分钟就能制作一个H5游戏

怎么做H5微信小游戏?需要学习或准备些啥?

如何制作用户喜欢的H5

H5及H5页面是什么意思?如何制作H5页面?

如何制作一个简单的小游戏?