教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

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

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

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

上述游戲是如何實(shí)現(xiàn)的呢？相信通過下面的素材，你一眼就能看出原理了。
 
  
 
 
看到素材之后的，我們常用的設(shè)計(jì)思路有兩種：
思路一：上下兩個(gè)圖層，擦掉上面的圖層，擦掉的變透明，顯示下面圖層的圖片。

 

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

 
 
 
本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：http://metathetuscanyresort.com/ui  
0 分享到：
和我們在線交談！