Html5中Canvas實(shí)現(xiàn)一個(gè)“刮刮樂(lè)”游戲的方法
小編給大家分享一下Html5中Canvas實(shí)現(xiàn)一個(gè)“刮刮樂(lè)”游戲的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)建站專注于平鄉(xiāng)企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開(kāi)發(fā),商城網(wǎng)站建設(shè)。平鄉(xiāng)網(wǎng)站建設(shè)公司,為平鄉(xiāng)等地區(qū)提供建站服務(wù)。全流程按需求定制制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)
之前公司項(xiàng)目有一個(gè)刮獎(jiǎng)小游戲的需求，因此有了本文記錄該“刮刮樂(lè)”游戲的實(shí)現(xiàn)過(guò)程。
話不多說(shuō)，先上Demo 和 項(xiàng)目源碼 .
2. 實(shí)現(xiàn)
我們創(chuàng)建一個(gè) ScrapAward 類(lèi)，通過(guò)傳入 option 和調(diào)用其 restart() 方法實(shí)現(xiàn)重新開(kāi)始。
（1）定義 option 參數(shù)及 ScrapAward 結(jié)構(gòu)
class ScrapAward {
constructor(userOption) {
this.option = {
canvasId: 'canvas', // canvas的id
backgroundImageUrl: '', // 背景圖url
width: 320, // canvas寬度
height: 160, // canvas高度
backgroundSize: '100% 100%',
coverImage: { // 覆蓋圖層背景圖url
url: '',
width: 320,
height: 160,
},
callback: () => {}, // 刮獎(jiǎng)完成的回調(diào)函數(shù)
};
this.ctx = null;
this.init(userOption); // 初始化
}
// 初始化方法
init(userOption) {
}
// 重新開(kāi)始也是一次初始化
restart(userOption) {
if (userOption) {
this.init(userOption);
} else {
this.init({});
}
}
}（2） init 初始化
首先合并用戶的配置 userOption 和默認(rèn) option , 等背景圖片加載完成后調(diào)用 fillCanvas() 方法繪制覆蓋層的圖片后設(shè)置 canvas 的背景圖。
當(dāng)上述行為完成后，我們便監(jiān)聽(tīng)鼠標(biāo)或者touch事件。刮獎(jiǎng)這一行為其實(shí)是canvas對(duì)鼠標(biāo)或者touch的移動(dòng)路徑進(jìn)行繪畫(huà)，只不過(guò)是將繪畫(huà)的路徑變成了透明，這種效果我們通過(guò)設(shè)置 ctx.globalCompositeOperation = 'destination-out'; 即可實(shí)現(xiàn)。
init(userOption) {
// 合并用戶配置
if (Object.assign) {
Object.assign(this.option, userOption);
} else {
extend(this.option, userOption, true);
}
// 定義一系列變量
let that = this,
img = (this.img = new Image()), //背景圖片
imgLoaded = false, //背景圖是否加載完成
canvas = (this.canvas = document.querySelector(`#${this.option.canvasId}`)),
hastouch = 'ontouchstart' in window ? true : false,
tapstart = hastouch ? 'touchstart' : 'mousedown',
tapmove = hastouch ? 'touchmove' : 'mousemove',
tapend = hastouch ? 'touchend' : 'mouseup',
coverImg = (this.coverImg = new Image()),
hasDone = false, // 是否刮獎(jiǎng)完畢
coverImgLoad = false;
that.mousedown = false; //鼠標(biāo)的mousedown事件或者touchmove事件是否開(kāi)啟
// 移除事件監(jiān)聽(tīng)，用于重新開(kāi)始
if (this.canvas) {
this.canvas.removeEventListener(tapstart, eventDown);
this.canvas.removeEventListener(tapend, eventUp);
this.canvas.removeEventListener(tapmove, eventMove);
}
coverImg.src = this.option.coverImage.url;
coverImg.crossOrigin = 'Anonymous'; // 解決一些跨域問(wèn)題
img.src = this.option.backgroundImageUrl;
var w = (img.width = this.option.width),
h = (img.height = this.option.height);
this.canvasOffsetX = canvas.offsetLeft;
this.canvasOffsetY = canvas.offsetTop;
canvas.width = w;
canvas.height = h;
this.ctx = canvas.getContext('2d');
let ctx = this.ctx;
this.img.addEventListener('load', backgroundImageLoaded);
this.option.coverImage.url && this.coverImg.addEventListener('load', coverImageLoaded);
// 背景圖片加載完成后
function backgroundImageLoaded(e) {
imgLoaded = true;
fillCanvas();
canvas.style.background = 'url(' + img.src + ') no-repeat';
canvas.style.backgroundSize = that.option.backgroundSize || 'contain';
}
// 覆蓋圖片加載完成后
function coverImageLoaded(e) {
coverImgLoad = true;
fillCanvas();
canvas.style.background = 'url(' + img.src + ') no-repeat';
canvas.style.backgroundSize = that.option.backgroundSize || 'contain';
}
// 繪制canvas
function fillCanvas() {
if (that.option.coverImage.url && (!imgLoaded || !coverImgLoad)) return;
if (!that.option.coverImage.url) {
ctx.fillStyle = that.option.coverImage.color || 'gray';
ctx.fillRect(0, 0, w, h);
} else {
ctx.drawImage(coverImg, 0, 0, that.option.coverImage.width, that.option.coverImage.height);
}
ctx.globalCompositeOperation = 'destination-out';
canvas.addEventListener(tapstart, eventDown);
canvas.addEventListener(tapend, eventUp);
canvas.addEventListener(tapmove, eventMove);
}
// 點(diǎn)擊開(kāi)始事件
function eventDown(e) {
e.preventDefault();
that.mousedown = true;
}
// 點(diǎn)擊結(jié)束事件
function eventUp(e) {
e.preventDefault();
that.mousedown = false;
}
// 刮獎(jiǎng)事件
function eventMove(e) {
if (hasDone) return; // 刮獎(jiǎng)結(jié)束則return
let ctx = that.ctx;
e.preventDefault();
if (that.mousedown) {
if (e.changedTouches) {
e = e.changedTouches[0];
}
var x = (e.clientX + document.body.scrollLeft || e.pageX) - that.canvasOffsetX || 0,
y = (e.clientY + document.body.scrollTop || e.pageY) - that.canvasOffsetY || 0;
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.fill();
}
}
}（3）刮獎(jiǎng)完畢的實(shí)現(xiàn)
上述代碼實(shí)現(xiàn)刮獎(jiǎng)的效果，但是一般的場(chǎng)景是用戶刮獎(jiǎng)的面積超過(guò)一半時(shí)，覆蓋圖層全部散開(kāi)，此時(shí)為刮獎(jiǎng)完成的狀態(tài)。
如何知道刮獎(jiǎng)的面積超過(guò)一半了呢？ canvas 中的 ctx 對(duì)象提供了一個(gè)方法 getImageData() , 該方法可返回某個(gè)區(qū)域內(nèi)每個(gè)像素點(diǎn)的數(shù)值的組成的數(shù)組，數(shù)組中4個(gè)元素表示一個(gè)像素點(diǎn)的rgba值。
因此我們可以判斷 rgba 中的 a 值透明度，透明度小于 256 的一半（ 128 ）即可視為透明狀態(tài)，計(jì)算透明 a 值的百分比.
判斷 a 值百分比大于 50 , 則調(diào)用 ctx.clearRect(0, 0, w, h); 清除畫(huà)布, 并執(zhí)行成功回調(diào) callback .
function eventMove(e) {
if (hasDone) return; // 刮獎(jiǎng)結(jié)束則return
let ctx = that.ctx;
e.preventDefault();
if (that.mousedown) {
if (e.changedTouches) {
e = e.changedTouches[0];
}
var x = (e.clientX + document.body.scrollLeft || e.pageX) - that.canvasOffsetX || 0,
y = (e.clientY + document.body.scrollTop || e.pageY) - that.canvasOffsetY || 0;
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.fill();
}
handleFilledPercentage(getFilledPercentage());
}
// 計(jì)算已經(jīng)刮過(guò)的區(qū)域占整個(gè)區(qū)域的百分比
function getFilledPercentage() {
let imgData = that.ctx.getImageData(0, 0, w, h);
// imgData.data是個(gè)數(shù)組，存儲(chǔ)著指定區(qū)域每個(gè)像素點(diǎn)的信息，數(shù)組中4個(gè)元素表示一個(gè)像素點(diǎn)的rgba值
let pixels = imgData.data;
let transPixels = [];
for (let i = 0; i < pixels.length; i += 4) {
// 嚴(yán)格上來(lái)說(shuō)，判斷像素點(diǎn)是否透明需要判斷該像素點(diǎn)的a值是否等于0，
// 為了提高計(jì)算效率，這兒設(shè)置當(dāng)a值小于128，也就是半透明狀態(tài)時(shí)就可以了
if (pixels[i + 3] < 128) {
transPixels.push(pixels[i + 3]);
}
}
return ((transPixels.length / (pixels.length / 4)) * 100).toFixed(2) + '%';
}
// 設(shè)置閾值，去除灰色涂層
function handleFilledPercentage(percentage) {
percentage = percentage || 0;
if (parseInt(percentage) > 50) {
// 當(dāng)像素點(diǎn)的個(gè)數(shù)超過(guò) 50% 時(shí)，清空畫(huà)布，顯示底圖
ctx.clearRect(0, 0, w, h);
hasDone = true;
that.option.callback();
}
}3. 使用
將代碼引入 html 后，新建 new scraAward(option) 即可實(shí)現(xiàn)。頁(yè)面結(jié)構(gòu)如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>實(shí)現(xiàn)一個(gè)“刮刮樂(lè)”游戲</title>
<style type="text/css">
.demo {
width: 320px;
margin: 10px auto 20px auto;
min-height: 300px;
}
.msg {
text-align: center;
height: 32px;
line-height: 32px;
font-weight: bold;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="main">
<div class="msg">
刮刮下面圖片看看什么效果哈哈哈，<a href="javascript:void(0)" id="try_again">再來(lái)一次</a>
</div>
<div class="demo">
<canvas id="canvas"></canvas>
</div>
</div>
<script src="./scrapAward-dev.js"></script>
<script>
window.onload = function() {
let scraAward = new ScrapAward({
height: 570,
backgroundImageUrl: './suporka_home.jpg',
coverImage: {
url: './super.jpg',
// color: 'red',
width: 428,
height: 570,
},
callback: () => {
alert('刮獎(jiǎng)結(jié)束');
},
});
document.getElementById('try_again').addEventListener('click', function(e) {
scraAward.restart();
});
};
</script>
</body>
</html>以上是“Html5中Canvas實(shí)現(xiàn)一個(gè)“刮刮樂(lè)”游戲的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享名稱：Html5中Canvas實(shí)現(xiàn)一個(gè)“刮刮樂(lè)”游戲的方法
當(dāng)前URL：http://muchs.cn/article2/jephic.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、面包屑導(dǎo)航、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、微信小程序、網(wǎng)站制作
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 成都網(wǎng)站改版應(yīng)從這4點(diǎn)做起 2016-10-26
- 網(wǎng)站為什么要改版？企業(yè)網(wǎng)站改版有什么好處 2021-10-10
- 網(wǎng)站改版過(guò)程中該做的那些事 2016-12-31
- 網(wǎng)站改版中我們需要注意的地方! 2014-11-13
- 建站知識(shí)----什么是網(wǎng)站改版? 2014-06-18
- 企業(yè)網(wǎng)站改版所必須要注意的問(wèn)題 2023-03-08
- 網(wǎng)站建設(shè)之如何恰當(dāng)?shù)倪M(jìn)行網(wǎng)站改版 2022-11-15
- 成都seo優(yōu)化網(wǎng)站改版后的排名怎么做 2016-11-03
- 網(wǎng)站改版方案很老道，改版要注意好了! 2022-08-20
- 網(wǎng)站改版幾個(gè)注意事項(xiàng)與改版費(fèi)用 2014-03-07
- 網(wǎng)站建設(shè)服務(wù)商網(wǎng)站改版的優(yōu)勢(shì)。 2018-09-29
- 網(wǎng)站降權(quán)了？給網(wǎng)站改版或許有用 2022-12-18