情人节学写html5微信游戏

情人节都在干什么？？？ 当然是写代码！！！

看某书正好以一个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) / 2
        let 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 = objname
            objdiv.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 = mi
            objdiv.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圆点的关键方法！！！剩下还有最后一个动画，效果可以参考代码.

---最后--- 大家今天都是怎么过得？？？！！！