鄭方方打怪升級日記 — 初識HTML5與CSS3

任務名稱:響應式砸蛋頁面

任務背景

前輩:方方啊,最近項目也沒什麼事情,你看這個砸蛋頁面不是很好看,要不你作一個響應式砸蛋頁面吧?

系統:鄭方方接下前輩的任務 - 鄭方方自動解析任務步驟

任務:響應式砸蛋頁面

• HTML5與CSS3入門 - 閱讀《HTML5祕籍》（0/1）

• 響應式佈局（0/1）

• 製做Canvas層（0/1）

• 搭配Javascript（0/1）

• 搭配PHP控制器 （0/1）

• 完成任務（0/1）

人物背景介紹:鄭方方

1. 主職:小白PHP碼畜;副職:Acer

2. 技能:吃飯、睡覺

3. 特徵:單身狗

學習正文和代碼

響應式佈局 Begin

由於我不是前端,因此使用Bootstrap的visible-xs和hidden-xs,對於一些特殊的要求就是用 @media 來進行調節.
我使用的是不知道從哪裏介紹的幾種尺寸範圍,以下:

• @media (min-width: 970.1px) and (max-width: 1170px)

• @media (min-width: 700.1px) and (max-width: 970px)

• @media (min-width: 600px) and (max-width: 700px)

• @media (min-width: 400px) and (max-width: 599.99px)

• @media (max-width: 399.99px)

對於頁面佈局,我藉助了 http://www.ibootstrap.cn/ 這個網站,以後再把代碼下載下來本身進行修改.

Tip:垂直居中（主要是用於蛋一直在頁面中間）

position: absolute;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;

響應式佈局（1/1）Over

製做Canvas層 Begin

製做Canvas層時我把動畫分爲三個

1. EggCanvas - 蛋（無其餘CSS3效果）

2. HammerCanvas - 錘子（animation、rotate）:錘子砸下去後錘子會復位

3. BoomCanvas - 爆炸特效（animation、transform、opacity）:Ajax查詢後爆炸變大並消失

Tip:爲了讓這些效果能兼容更多瀏覽器,我要這幾個效果就會像下面代碼,好比個人錘子效果

.AniHammer {
animation: AniHammer 0.5s;
-moz-animation: AniHammer 0.5s; /* Firefox */
-webkit-animation: AniHammer 0.5s; /* Safari and Chrome */
-o-animation: AniHammer 0.5s; /* Opera */
}

@keyframes AniHammer {
    /*25% {*/
        /*transform: rotate(45deg);*/
    /*}*/
    50% {
        transform: rotate(-135deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@-moz-keyframes AniHammer /* Firefox */
    {
    /*25% {*/
        /*-moz-transform: rotate(45deg);*/
    /*}*/
    50% {
        -moz-transform: rotate(-135deg);
    }
    100% {
        -moz-transform: rotate(0deg);
    }
}

@-webkit-keyframes AniHammer /* Safari and Chrome */
    {
    /*25% {*/
        /*-webkit-transform: rotate(45deg);*/
    /*}*/
    50% {
        -webkit-transform: rotate(-135deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}

@-o-keyframes AniHammer /* Opera */
{
    /*25% {*/
        /*-o-transform: rotate(45deg);*/
    /*}*/
    50% {
        -o-transform: rotate(-135deg);
    }
    100% {
        -o-transform: rotate(0deg);
    }
}

這一段樣式就是在0.5秒內，把動畫效果分兩步,第一步旋轉到-135度,第二步就是旋轉回0度.其中的-o-,-webkit-,-moz-就是爲了兼容.

搭配Javascript Begin

我不知道剛接觸的人會怎麼想Javascript 和 CSS3 的關係,我最開始的時候還覺得JS能控制CSS3的動畫行爲呢,如今我感受JS只能經過控制元素的Class的attr( )或者removeclass( ),來完成咱們想要的CSS3的一系列動畫行爲. (可能我如今還理解不夠深,有誰理解的,麻煩給我科普科普)

移動端和PC端分別對應兩個事件:Touch事件和Click事件,Touch事件以下:

var EggTouch = function (){console.log('Hi')};
document.getElementById("LuckEgg").addEventListener('touchstart', EggTouch, false);

可是Canvas層產生的圖片,瞭解過的人都知道須要用JS去生成圖像

// 1.加載蛋的圖片
var EggCanvas = document.getElementById("LuckEgg");
var EggContext = EggCanvas.getContext("2d");
var EggImg = new Image();

EggImg.src = "./egg.png";

// 特別注意 - 要圖片加載完纔會出現圖片
EggImg.onload = function () {

    // 還要在這裏判斷屏幕大小 --- 用於肯定生成的蛋的位置和大小
    EggContext.drawImage(EggImg, 30, 20, 240, 120);
};

Tip:

1. 每一次JS控制帶有自動執行的動畫效果的元素,使其display:block,就會自動執行動畫效果;

2. 使用setTimeout( )來完成某些效果,好比個人Boom效果爆炸持續時間是0.5秒,那麼我就要在Boom後0.5秒再去執行其餘函數.,這樣就能獲得咱們想要的效果.

製做Canvas層（1/1）Over
搭配Javascript（1/1）Over

搭配PHP控制器 Begin

若是大家跟我同樣同時使用了Touch和Click這兩個事件,那麼可能會出如今瀏覽器測試的時候,鼠標點擊模擬手機狀態下的touch行爲,就會有兩次POST傳到後臺,這就可能出現客戶投訴說:我砸蛋砸了一次,怎麼次數就沒了.之類的話語.因此在後臺我會用redis作一個很簡單的鎖,防止上面的狀況的發生.

/** 防止touch 和 click 同時觸發 */
        self::$lock .= $user['uid'];
        self::$luckValue = \Common\Common\MyRedis::getInstance()->get(self::$lock);
        if (self::$luckValue && time() - self::$luckValue <= 1) {
            exit;
        } else {
            \Common\Common\MyRedis::getInstance()->set(self::$lock, time(), 2);
        }

搭配PHP控制器 (1/1)

完成任務（1/1）

到此,任務也就作完了,其中一些好比什麼字體大小,怎麼查數據庫,怎麼控制JS的一些業務細節我就很少說了.畢竟我也只是第一次寫博客,文中有什麼錯誤,或者思路有問題,還但願各位看客能指點指點.