情人節學寫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圓點的關鍵方法！！！剩下還有最後一個動畫，效果能夠參考代碼.

---最後--- 你們今天都是怎麼過得？？？！！！