首頁(yè)電商視覺(jué)設(shè)計(jì)技術(shù)文章正文

UI培訓(xùn)之美女撕衣服游戲詳解（一）

更新時(shí)間:2016年05月17日15時(shí)44分來(lái)源:傳智播客UI培訓(xùn)學(xué)院瀏覽次數(shù):

HTML5 美女撕衣服游戲詳解

目前HTML5已經(jīng)代表了移動(dòng)互聯(lián)網(wǎng)發(fā)展的趨勢(shì)，蘋(píng)果、微軟、黑莓之外，谷歌的Youtube已部分使用HTML5；Chrome瀏覽器宣布全面支持HTML5；Facebook則不遺余力地為HTML5進(jìn)行著病毒式傳播，越來(lái)越多的行業(yè)巨頭正不斷向HTML5示好，可見(jiàn)HTML5的大好前景。
今天通過(guò)一個(gè)簡(jiǎn)單的HTML5的撕衣服游戲，來(lái)簡(jiǎn)單學(xué)習(xí)的HTML5中canvas API的使用，這個(gè)案例比較簡(jiǎn)單、好玩，主要是覺(jué)得也許能作為web前端高級(jí)班上課的案例。所以最近就發(fā)揮了一下創(chuàng)意。

游戲截圖：

一、游戲設(shè)計(jì)思路

上述游戲是如何實(shí)現(xiàn)的呢？相信通過(guò)下面的素材，你一眼就能看出原理了。

看到素材之后的，我們常用的設(shè)計(jì)思路有兩種：
思路一：上下兩個(gè)圖層，擦掉上面的圖層，擦掉的變透明，顯示下面圖層的圖片。

思路二：當(dāng)鼠標(biāo)在圖片二擦除(移動(dòng))時(shí)，將圖片一上的對(duì)應(yīng)位置畫(huà)到圖片二上，這樣也就實(shí)現(xiàn)了擦除的效果。如將鼠標(biāo)在圖片位置1上移動(dòng)時(shí)，將圖片上位置3畫(huà)到位置1的地方。