情人节都在干什么？？？ 当然是写代码！！！
看某书正好以一个html5微信游戏，很适合今天的日子
附上demo：demo 请在手机上查看，pc端请切换手机调试模式，目前没弄完后续完善(图片也懒得弄了，要过年了，懒～)
布局和样式就忽略了，详情可以参考代码或者去我的github查看
动画效果用到了 TweenMax 这个可是个大宝贝儿～
取一段效果来说明吧
function showScene1() {TweenMax.to(heart, 1, {opacity: 1})TweenMax.to(heart, .5, {scaleX: 1.2,scaleY: 1.2,repeat: -1,yoyo: true})TweenMax.to(t0, 1, {top: "40%",opacity: 1,delay: .3})TweenMax.to(t1, 1, {top: "57%",opacity: 1,delay: .5})TweenMax.to(t2, 1, {top: "65%",opacity: 1,delay: 1})TweenMax.to(sbtn, 1, {top: "75%",opacity: 1,delay: 1.4})
}
复制代码这是其中一个动画效果说说他的参数
（target,duration,vars）
------我是翻译线-----
(目标，动画的时间长度（单位：秒），包含多种属性的对象、透明度、位置、延时啥啥啥的具体参考官方api)
我们右上角有一个音乐播放的控制，默认是不播放的
musicoff.onclick = function () {musicon.className = musicon.className ? "" : "hidden"musicoff.className = musicoff.className ? "" : 'hidden'music.play()
}
musicon.onclick = function () {musicon.className = musicon.className ? "" : "hidden"musicoff.className = musicoff.className ? "" : 'hidden'music.pause()
}
复制代码重点是 play() 和 pause() 来控制播放和停止
其余的是来切换类达到视觉效果
制作logo坐标点，书籍是采用flash制作然后转换为坐标点，获取然后复制出来
let p = [[152,139],[160,115],[160,140],[160,166],[160,192],[160,218],[160,243],[160,269],[160,295],[123,160],[94,181],[112,167],[110,149],[133,152],[160,126],[160,152],[160,178],[160,204],[160,229],[160,255],[160,283],[143,145],[103,174],[110,160],[168,139],[198,160],[227,182],[208,167],[211,149],[188,153],[178,146],[217,174],[210,160],[152,166],[123,187],[94,209],[112,194],[133,180],[143,173],[103,201],[168,167],[198,188],[227,209],[208,195],[188,180],[178,173],[217,202],[152,194],[123,215],[94,237],[112,222],[133,208],[143,201],[103,229],[168,195],[198,216],[227,237],[208,223],[188,208],[178,201],[217,230],[152,221],[123,242],[94,264],[112,249],[133,235],[143,228],[103,256],[168,222],[198,243],[227,264],[208,250],[188,235],[178,228],[217,257],[152,250],[123,271],[112,278],[133,264],[143,257],[103,285],[168,251],[198,272],[208,279],[188,264],[178,257],[217,286],[110,203],[110,234],[211,204],[210,235],[110,213],[110,244],[211,214],[210,245],[128,97],[116,102],[103,109],[91,116],[81,125],[72,134],[65,146],[58,156],[52,169],[48,181],[45,194],[43,208],[43,220],[45,234],[49,246],[53,259],[60,271],[68,281],[76,292],[86,301],[98,310],[110,317],[125,322],[137,326],[151,326],[165,326],[178,326],[191,322],[205,318],[219,312],[231,304],[241,295],[251,285],[259,274],[266,261],[271,249],[274,237],[277,223],[277,209],[276,196],[273,184],[270,171],[264,160],[258,148],[251,137],[241,127],[231,118],[142,94],[154,94],[166,94],[179,94],[191,98],[204,102],[217,109]];复制代码我是坐标点，恐怖吧！！！这个数据是用过for循环弄出来的。
for(var i = 0; i < a.numChildren;i++){trace("["+Math.floor(a.getChildAt(i).x)+ "," + Math.floor(a.getChildAt(i).y) +"],")
}
复制代码然后用户每触摸一次生成相应的圆点
function getPosition(ev) {if (drawMode) { //只有在绘图模式下才开始绘制圆点ev = ev || window.event ev.preventDefault()//为了使图案在水平方向上居中，计算出当前屏幕宽度与设计宽度（320像素）之间的差异值，以作为后续的位移基准值let xbias = (window.innerWidth - 320) / 2let touch = ev.touches[0] //获取第一个触点的信息let point = { x: 0,y: 0} //创建一个对象来储存触点坐标point.x = Number(touch.pageX) //记录触点X坐标point.y = Number(touch.pageY) //记录触点Y坐标if (mi < pl) {let objdiv = document.createElement('div') let objname = 's_' + mi //设置name属性 objdiv.id = objnameobjdiv.style.position = 'absolute'objdiv.style.display = 'block'objdiv.style.top = point.y + 'px'objdiv.style.left = point.x + 'px'objdiv.style.background = '#fff'objdiv.style.borderRadius = '50%'objdiv.style.width = '12px'objdiv.style.height = '12px'objdiv.style.zIndex = miobjdiv.innerHTML = ' 'scene2.appendChild(objdiv)TweenMax.to(objdiv, 1, {top: p[mi][1],left: p[mi][0] + xbias}) //创建从触摸点到目标坐标点的位移动画mi++} else {drawMode = false //圆点全部显示完毕后，关闭绘图模式TweenMax.to(lbtn, .8, {opacity: 1,top: '80%'}) //显示结束按钮}}return false
}
复制代码这是生成logo圆点的关键方法！！！剩下还有最后一个动画，效果可以参考代码.
---最后--- 大家今天都是怎么过得？？？！！！
