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

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

UI培訓之美女撕衣服游戲詳解（一）

更新時間:2016年05月17日15時44分 來源:傳智播客UI培訓學院 瀏覽次數:

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

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

 

思路二：當鼠標在圖片二擦除(移動)時，將圖片一上的對應位置畫到圖片二上，這樣也就實現了擦除的效果。 如將鼠標在圖片位置1上移動時，將圖片上位置3畫到位置1的地方。  

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