HTML5 美女撕衣服游戲詳解
目前HTML5已經(jīng)代表了移動互聯(lián)網(wǎng)發(fā)展的趨勢,蘋果、微軟、黑莓之外,谷歌的Youtube已部分使用HTML5;Chrome瀏覽器宣布全面支持HTML5;Facebook則不遺余力地為HTML5進行著病毒式傳播,越來越多的行業(yè)巨頭正不斷向HTML5示好,可見HTML5的大好前景。
今天通過一個簡單的HTML5的撕衣服游戲,來簡單學習的HTML5中canvas API的使用, 這個案例比較簡單、好玩,主要是覺得也許能作為web前端高級班上課的案例。所以最近就發(fā)揮了一下創(chuàng)意。
游戲截圖:
一、游戲設(shè)計思路
上述游戲是如何實現(xiàn)的呢?相信通過下面的素材,你一眼就能看出原理了。
看到素材之后的,我們常用的設(shè)計思路有兩種:
思路一:上下兩個圖層,擦掉上面的圖層,擦掉的變透明,顯示下面圖層的圖片。
思路二:當鼠標在圖片二擦除(移動)時,將圖片一上的對應(yīng)位置畫到圖片二上,這樣也就實現(xiàn)了擦除的效果。 如將鼠標在圖片位置1上移動時,將圖片上位置3畫到位置1的地方。
本文版權(quán)歸傳智播客UI培訓(xùn)學院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處。謝謝!
作者:傳智播客UI培訓(xùn)學院
首發(fā):http://m.8y3kgpwe.cn/ui