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

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

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

二、游戲代碼實(shí)現(xiàn)
這里為了簡(jiǎn)化游戲邏輯，我們使用第二種思路來(lái)實(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;    //畫(huà)筆大小
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畫(huà)布的位置
ctx.drawImage(imgup,0,0);
}
bindEvents();//執(zhí)行綁定事件

function bindEvents(){ //定義綁定事件，監(jiān)聽(tīng)鼠標(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í)"擦拭"無(wú)效
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é)
在上述游戲代碼中，幾乎沒(méi)有難度，基本都是小邏輯，根據(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://xamj520.com/ui

上一篇：UI培訓(xùn)之美女撕衣服游戲詳解（一） 下一篇：UI培訓(xùn)之Jquery Mobile 學(xué)習(xí)筆記(一)