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

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

二、游戲代碼實現(xiàn)
這里為了簡化游戲邏輯，我們使用第二種思路來實現(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;
//獲取對象是內(nèi)建的 HTML5 對象，擁有多種繪制及添加圖像的方法。
          var ctx=canvas.getContext('2d');
var BRUSH_SIZE=18;    //畫筆大小
imgup=new Image();//創(chuàng)建image對象
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)聽鼠標動作
canvas.ontouchstart = canvas.onmousedown = function(e) {    ready = true; };//鼠標摁下
canvas.ontouchend = canvas.ontouchcancel = canvas.onmouseup = canvas.onmouseout = (function(e) { ready = false; }); //鼠標抬摁下
canvas.ontouchmove = canvas.onmousemove = updateCanvas;//相應(yīng)鼠標的移動事件
}

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

if ( vx < bsr || vy < bsr) { //據(jù)canvas邊緣太近，則指定此時"擦拭"無效
return;
}
ctx.rect(vx-bsr, vy-bsr, bs, bs);//否則圈定當前一塊區(qū)域方便被"替換"為下一幅圖的相同區(qū)域
ctx.drawImage(imgback, vx-bsr, vy-bsr, bs, bs, vx-bsr, vy-bsr, bs, bs); //替換
}
</script>
</body>

三、總結(jié)
在上述游戲代碼中，幾乎沒有難度，基本都是小邏輯，根據(jù)注釋就能看屢清楚整個思路。但是案例可以非常好的體現(xiàn)出HTML5強大的功能，相信很多同學(xué)對這個案例都有興趣。

本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：http://m.8y3kgpwe.cn/ui

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