导读：相信大家经常会在微信中看到一些趣味个性的微信h5小游戏，并且还会忍不住好奇，它们到底是如何制作的呢？其实，微信h5小游戏的制作步骤非常简单，只需要下面几步就能轻松完成。

利用微信游戏进行H5游戏营销，重要的就是要以用户为核心，制作出用户喜爱的游戏。根据分析可知，《砸金蛋》活动是很多人都喜欢玩的游戏，而且用户参与门槛低，以下就为大家介绍《砸金蛋》的制作方法：

1．注册并登录活动聚的微信游戏制作平台，注意该平台中的游戏一定要简单好玩，而且游戏管理系统也要完善，能够实现数据分析、兑奖、用户管理等功能，可以先手机模拟测试效果之后再进行选择。

2．通过游戏分类或搜索，找到《砸金蛋》微信h5游戏模板，或者使用其他与相关游戏，比如《扭扭蛋》、《刮一刮》《摇一摇》等，再根据用户喜好或需求进行选择。

3．点击创建，然后根据游戏界面需求，先简单设计一些图片素材，然后替换到界面中，让游戏真正变成自己的游戏，同时设置游戏规则，补充游戏奖品，尽量完善每一个设置栏目，充分发挥出h5小游戏的各个作用。

4．确定游戏制作完毕之后，在适当的时间对游戏进行发布操作，并将游戏二维码及链接发布到公众号或其他平台中，这样游戏营销活动就算正式开始了。注意，前期的推广力度一定要强，毕竟微信活动的时效性是比较短的。

5．活动过程中，要保持微信公众平台客服或其他联系方式的畅通，保证能够及时为有需要的用户解决问题，同时为中奖用户进行兑奖安排，让活动顺利进行。

6．活动结束之后，可以总结性地对平台中给出的传播数据以及用户数据进行整理、分析，这些数据可以再手机端，小程序、也可以再pc端车看，在其他微信营销方案中也能发挥重要的作用。

请点击输入图片描述

请点击输入图片描述

活动聚的平台上还有更多微信吸粉的h5游戏模板，心动就赶紧行动吧

！doctype html html head meta charset=' utf-8 '/meta name=' viewport ' content=' width=device-width，Initial-scale=1.0'/titleHTML5手机震动/title脚本类型=' text/JavaScript ' var color=new array(' # fff '，' # ff0 '，' # f00 '，' # 000 '，' # 00f '，' # 0ff ')；if(窗口。DeviceMotionEvent){ var speed=25；var x=y=z=LasTx=LasTy=LasTz=0；window . addeventlistener(' device motion '，function(){ var acceleration=event . accelerationincluding gravity；x=加速度. x；y=加速度. y；if(Math.abs(x-lastX)速度|| Math.abs(y-lastY)速度){ document . body . style . background color=color[math . round(math . random()* 10)% 6]；} LasTx=x；lastY=y；}，false)；}/脚本/头身摇动手机更改屏幕颜色。/body /html主要是手机的DeviceMotionEvent事件

第二步，微信晃一下手势

与第一步相比，增加了晃动手势，改变了晃动事件。在摇动后添加您想要的方法，无论您想要进入下一页还是触发控制器事件。

“% @”页面内容类型=' text/html；字符集=UTF-8 '语言=' Java ' % html头元http-equiv=' Content-Type '内容=' text/html；字符集=UTF-8 '元字符集='UTF-8 '元名称='视口'内容='宽度=设备宽度，初始比例=1.0,最大比例=1.0 '标题摇一摇/title link rel='样式表href='插件/柳良宝/shake/css/shake.css' rel='外部nofollow' link rel='样式表href='插件/柳良宝/shake/css/myDialog.css' rel='外部' nofollow '脚本类型=' text/JavaScript ' src=' http :插件/柳良宝/SHAKE/js/jquery。量滴js /脚本脚本类型=' text/JavaScript var last _ update=0；var last _ time=0；var x；var y；var z；var last _ x；var last _ y；var last _ z；var sound=new Hall({ URLs :['/shake/sound/shake _ sound。MP3 ']}).load()；var find sound=new Hall({ URLs :['/shake/sound/shake _ match。MP3 ']}).load()；var curTimevar isShakeble=true函数init() { if (window .DeviceMotionEvent){ window。addeventlistener(' devicemotion '，deviceMotionHandler，false)；} else { $('#cantshake ').show()；} }函数deviceMotionHandler(事件数据){ Curtime=new Date().getTime()；var DiffTime=Curtime-last _ update；if(diffTime 100){ var加速度=事件数据。加速度，包括重力；last _ update=curTimex=加速度。x；y=加速度。y；z=加速度。z；var速度=数学。ABS(x y z-last _ x-last _ y-last _ z)/DiffTime * 10000；if(speed SHAKE _ THreshold Curtime-last _ time 1100 $(' # loading ').attr(' class ')==' loading ' is hakkable){ shake()；} last _ x=xlast _ y=ylast _ z=z} }函数shake(){ last _ time=Curtime；$("#正在加载")。attr('class '，' loading loading-show ')；$(' #震动').animate({ top: '10%' }，700，function () { $('#shakeup ').animate({ top: '25%' }，700，function () { $('#loading ').attr('class '，' loading ')；找到声音。play()；//在此为摇动之后的事件，这里为调用ControllergoShakeResult方法窗户。位置。href='摇动控制器。做什么？goShakeResultphoneNumber=$ { phoneNumber } hdid=$ { hdid } OpenID=$ { OpenID } '；})})$(' #安定')。animate({ top: '40%' }，700，function(){ $(' # shadow ')).animate({ top: '25%' }，700，function(){ })；})声音。play()；} //各种初始化$(文档)。ready(function(){ howler。IOs自动启用=false快速点击。附上(文件。身体)；init()；})/script/head body table id=' container ' t body tr TD class=' container ' col span=' 2 ' div id=' shake ' img src=' http : plug/Liu Liang Bao/shake/images/inner。png ' class=' inner ' img src=' http : plug/刘良宝/shake。png ' class=' shake _ up ' id=' shake up ' img src=' http :插件/刘良宝您今天还可以摇输入id='shakeCount '名称='shakeCount '值='${leftcount} '次TD/tr/tr正确姿势：握紧手机，用力摇动3秒，苦练18年的麒麟臂终于派上用场了td /tr /tbody /table /body /html有时候真的可以换一种方法去实现自己想要的功能。附图：演示本来实现的效果是：