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

全國(guó)咨詢/投訴熱線:400-618-4000

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

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

二、游戲代碼實(shí)現(xiàn)
這里為了簡(jiǎn)化游戲邏輯,我們使用第二種思路來實(shí)現(xiàn)游戲,游戲代碼如下:
 
<body>
<div class="xk">
     <canvas  id="mycanvas" width="320px" height="480px"></canvas>
    </div>    
     <script type="text/javascript" >
          var canvas=document.getElementById('mycanvas');  //獲取canvas元素
var ready,canvas;
//獲取對(duì)象是內(nèi)建的 HTML5 對(duì)象,擁有多種繪制及添加圖像的方法。
          var ctx=canvas.getContext('2d');
var BRUSH_SIZE=18;    //畫筆大小
imgup=new Image();//創(chuàng)建image對(duì)象
mgback=new Image();
//加載圖片  imgback.src="http://g.hiphotos.baidu.com/image/pic/item/a044ad345982b2b7c6d85fa437adcbef76099b0e.jpg";  imgup.src="http://d.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4ca2768aa9d12a6059252da60e.jpg";    //圖片的地址 我已經(jīng)上傳在百度上了
 
imgup.onload=function(){
//繪制原始圖像,(0,0)表示圖像的左上角位與canvas畫布的位置
 ctx.drawImage(imgup,0,0);
}
bindEvents();//執(zhí)行綁定事件

function bindEvents(){  //定義綁定事件 ,監(jiān)聽鼠標(biāo)動(dòng)作
canvas.ontouchstart = canvas.onmousedown = function(e) {    ready = true; };//鼠標(biāo)摁下
canvas.ontouchend = canvas.ontouchcancel = canvas.onmouseup = canvas.onmouseout = (function(e) { ready = false; }); //鼠標(biāo)抬摁下
canvas.ontouchmove = canvas.onmousemove = updateCanvas;//相應(yīng)鼠標(biāo)的移動(dòng)事件
}

function updateCanvas(e){
if(!ready) {//鼠標(biāo)未摁下
return;
}
var r = canvas.getBoundingClientRect();//獲取當(dāng)前canvas區(qū)域的坐標(biāo)
var vx = e.clientX - r.left;//獲取鼠標(biāo)在圖片上的橫坐標(biāo)
var vy = e.clientY - r.top;//獲取鼠標(biāo)在圖片上的
var bs = BRUSH_SIZE;
var bsr = bs/2;   

if ( vx < bsr || vy < bsr) { //據(jù)canvas邊緣太近,則指定此時(shí)"擦拭"無效
return;
}
ctx.rect(vx-bsr, vy-bsr, bs, bs);//否則圈定當(dāng)前一塊區(qū)域方便被"替換"為下一幅圖的相同區(qū)域
ctx.drawImage(imgback, vx-bsr, vy-bsr, bs, bs, vx-bsr, vy-bsr, bs, bs); //替換
}
  </script>
</body>
 
三、總結(jié)
在上述游戲代碼中,幾乎沒有難度,基本都是小邏輯,根據(jù)注釋就能看屢清楚整個(gè)思路。但是案例可以非常好的體現(xiàn)出HTML5強(qiáng)大的功能,相信很多同學(xué)對(duì)這個(gè)案例都有興趣。

本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者出處。謝謝!
作者:傳智播客UI培訓(xùn)學(xué)院
首發(fā):http://m.metathetuscanyresort.com/ui 
0 分享到:
和我們?cè)诰€交談!