基于JS編寫(xiě)開(kāi)心消消樂(lè)游戲的示例代碼
更新時(shí)間：2022年06月01日 08:16:28 作者：肥學(xué)
這篇文章主要為大家介紹了如何利用JavaScript實(shí)現(xiàn)開(kāi)心消消樂(lè)小游戲,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
展示
游戲背景
一天晚上，天空中掉下一顆神奇的豌豆種子，正好落在了夢(mèng)之森林的村長(zhǎng)屋附近，種子落地后吸收了池塘的水分，迅速成長(zhǎng)，一夜之間變成參天大藤蔓…… 第二天早上，村民們醒來(lái)后看到巨大的藤蔓都驚呆了，聚在一起議論紛紛。有人說(shuō)他似乎看到村長(zhǎng)的房子在高聳入云的藤蔓上，房子似乎還在上升，有人號(hào)召說(shuō)應(yīng)該爬上去救村長(zhǎng)，玩家需要爬到藤曼頂部救出村長(zhǎng)
游戲規(guī)則
把三個(gè)顏色相同的小動(dòng)物連成一條直線，即可消除。達(dá)到指定的目標(biāo)通關(guān)后。游戲的模板有四種分別是分?jǐn)?shù)過(guò)關(guān)、指定消除、獲得金豆莢、云朵關(guān)卡。
源碼部分
主頁(yè)面js部分調(diào)用了微信分享api
</script>
<div id="share" style="display: none">
<img width="100%" src="bitmap/share.png" style="position: fixed; z-index: 9999; top: 0; left: 0; display: " ontouchstart="document.getElementById('share').style.display='none';">
</div>
<script>
var mebtnopenurl = "http://mp.weixin.qq.com/s?__biz=MzA5MzU2MjU3Mw==&mid=218850712&idx=1&sn=53bfed8c43391843a6268706ccda8eb2&scene=1&key=1936e2bc22c2ceb5b8b45ee0ef26a5cc01639c3411c2cfd0bd74efb6f0a180003056abc9700e348732a0a5c963462d2f&ascene=1&uin=MjgxMTA4MTUwMQ%3D%3D&devicetype=Windows+7&version=61000721&pass_ticket=w4kQ%2FSFhaY2mmOE87ChVgbTRWP%2BctOhqXukbldnl%2FXb4%2BOxgCyIxSdzUjax%2FUmHK";
var tit = "";
var DFW = {
appId: "",
TLImg: "kaixinlian.jpg",
url: "http://www.mycodes.net/166/",
title: "開(kāi)心消消樂(lè)-多多游戲",
desc: "我消，我消，我消...！"
};
var onBridgeReady = function () {
WeixinJSBridge.on('menu:share:appmessage', function (argv) {
WeixinJSBridge.invoke('sendAppMessage', {
"appid": DFW.appId,
"img_url": DFW.TLImg,
"img_width": "120",
"img_height": "120",
"link": DFW.url,
"title": DFW.title + tit,
"desc": DFW.desc
}
);
});
WeixinJSBridge.on('menu:share:timeline', function (argv) {
WeixinJSBridge.invoke('shareTimeline', {
"appid": DFW.appId,
"img_url": DFW.TLImg,
"img_width": "120",
"img_height": "120",
"link": DFW.url,
"title": DFW.title + tit,
"desc": DFW.desc
}
);
});
};
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
function do_share(score) {
document.title = "我獲得了" + score + "分，一起來(lái)消星星吧！";
document.getElementById("share").style.display = "";
window.DFW.title = document.title;
}
function dp_submitScore(level,score) {
//alert("你獲得" + score + "分");
if (score > 5000) {
if (confirm("你獲得了" + score + " 要不要通知下小伙伴們呢？")) {
do_share(score);
}
}
}
</script>
對(duì)關(guān)卡的地圖設(shè)置
level: [{
time: 300,
map: [
[, , , , , , , , ],
[, , , 0, 0, 0, , , ],
[, , 0, 0, 0, 0, 0, , ],
[, 0, 0, 1, 0, 1, 0, 0],
[, 0, 1, 0, 1, 0, 1, 0],
[, 0, 1, 1, 0, 1, 1, 0],
[, , 0, 0, , 0, 0, , ]
]
}, {
time: 300,
map: [
[, , , , , , , , ],
[, , 0, 0, 0, 0, 0, , ],
[, 0, 0, 1, 1, 1, 0, 0],
[, 0, 0, 1, , 1, 0, 0],
[, 0, 0, 1, 1, 1, 0, 0],
[, , 1, 1, 0, 1, 1, , ],
[, 0, 0, 0, 0, 0, 0, 0]
]
}, {
time: 300,
map: [
[, 0, 0, 0, 0, 0, 0, 0],
[, , 0, 0, 1, 0, 0, , ],
[, , , 1, 1, 1, , , ],
[, , , , 4, , , , ],
[, , , 0, 0, 0, , , ],
[, , 0, 0, 1, 0, 0, , ],
[, 0, 1, 1, 1, 1, 1, 0],
[0, 0, 0, 1, 1, 1, 0, 0, 0]
]
}, {
time: 300,
map: [
[, 0, 0, 0, 0, 0, 0, 0],
[, , 0, 0, 0, 0, 0, 0],
[, 0, 1, 0, , 1, 1, 0],
[, 0, 1, , 0, 0, 1, 0],
[, 0, 1, 0, 0, , 1, 0],
[, 0, 1, 1, , 0, 1, 0],
[, 0, 0, 0, 0, 0, 0, , ]
]
}, {
time: 300,
map: [
[0, 1, 0, 0, 0, 0, 0, 1, 1],
[0, 1, 0, 0, 0, 0, 1, 1, 0],
[, 0, 0, 0, 0, 1, 1, 0, 0],
[, , 0, 0, 1, 1, 0, 0, 0],
[, , , 1, 1, 4, 4, 4, 4],
[, , , , 0, 0, 0, 0, 0],
[, , , , , 0, 0, 1, 1],
[, , , , , , 0, 0, 0]
]
}, {
time: 300,
map: [
[, 0, 0, 0, , 0, 0, 0],
[, 0, 0, 0, , 0, 0, 0],
[0, 0, 0, 0, , 0, 0, 0, 0],
[0, 0, 0, 0, , 0, 0, 0, 0],
[1, 1, 1, 1, , 1, 1, 1, 1],
[0, 4, 4, 4, , 4, 4, 4, 0],
[, 1, 1, 1, , 1, 1, 1],
[, 0, 0, 0, , 0, 0, 0]
]
}, {
time: 360,
map: [
[, , , 0, 0, 0, , , ],
[, , 0, 0, 1, 0, 0, , ],
[, , 0, 1, 1, 1, 0, , ],
[, , 0, 5, 5, 5, 0, , ],
[, 0, 0, 1, 1, 1, 0, 0],
[, 0, 0, 2, 2, 2, 0, 0],
[, 1, 1, 0, 0, 0, 1, 1],
[, 0, 0, , 0, , 0, 0]
]
}, {
time: 360,
map: [
[0, 0, 0, 0, , 0, 0, 0, 0],
[, 0, 0, 0, , 0, 0, 0],
[, , 0, 0, 0, 0, 0, , ],
[, 0, 2, 2, 0, 2, 2, 0],
[0, 0, , 0, 0, 0, , 0, 0],
[1, 1, 1, 0, , 0, 1, 1, 1],
[0, 1, 1, 1, 0, 1, 1, 1, 0],
[, 0, 0, 0, , 0, 0, 0]
]
}, {
time: 360,
map: [
[1, 1, 1, 0, 0, 0, 1, 1, 1],
[1, 2, 1, 0, , 0, 1, 2, 1],
[1, 1, 1, , 0, , 1, 1, 1],
[0, 0, , 0, 0, 0, , 0, 0],
[0, , 0, 0, 0, 0, 0, , 0],
[, , 0, 5, 5, 5, 0, , ],
[, 0, 0, 1, 2, 1, 0, 0],
[, 0, 0, 1, 1, 1, 0, 0]
]
}, {
time: 300,
map: [
[, , , 0, 0, 0, , , ],
[, , 0, 1, 1, 1, 0, , ],
[, 0, 0, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, , , 0, , , 0, 0],
[0, 0, 0, 2, 8, 2, 0, 0, 0],
[, 0, 1, 0, 2, 0, 1, 0, 0],
[, 0, 1, 0, 0, 0, 1, 0]
]
}, {
time: 360,
map: [
[, 0, 0, 0, , 0, 0, 0],
[, 0, 0, 1, 0, 1, 0, 0],
[0, 0, 1, 1, 0, 1, 1, 0, 0],
[1, 1, 1, , 0, , 1, 1, 1],
[1, 8, 1, 1, 1, 1, 1, 8, 1],
[, 0, , 1, 2, 1, , 0],
[, 0, 0, 1, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 1, 0, 0, 0]
]
介紹一下游戲中的一些功能
自動(dòng)填充
autoFill: function() {
var a = this.graph,
b, c, k, f, e, l, m, n, p = d.Tile;
k = a.length;
for (b = 0; b < k; b++) for (c = a[b].length; c--;) if (f = a[b][c], f !== h && 0 === f[3] && (e = a[b - 1], e !== h && 0 !== e.length ? (m = (l = e[c - 1]) !== h && 0 === l[1] && l[2] !== h ? !0 : !1, n = (l = e[c]) !== h && 0 === l[1] && l[2] !== h ? !0 : !1, e = (l = e[c + 1]) !== h && 0 === l[1] && l[2] !== h ? !0 : !1) : m = n = e = !0, !0 === m || !0 === n || !0 === e)) {
f[2] = d.random(p.length - 1);
e = a[b];
n = 3;
for (m = h; n--;) if (l = e[c + n], 0 === n) {
m = l;
do l = d.random(p.length - 1);
while (f[2] === l);
f[2] = l
} else if (l === h || l[2] !== f[2]) break;
for (n = 3; n--;) if (l = a[b - n], 0 === n) {
do l = d.random(p.length - 1);
while (f[2] === l || f[2] === m);
f[2] = l
} else if (l === h || (l = l[c]) === h || l[2] !== f[2]) break
}
for (b = a.length; b--;) for (c = a[b].length; c--;) f = a[b][c], f !== h && f[2] !== h && 0 === f[3] && (f[5].sprite(p[f[2]]), f[5].position(f[7], f[8]), f[5].slice(0, 1), f[5].index(0));
this.tile.draw()
},
findNext: function(a) {
var b = this.graph,
c = [],
d = [],
f, e, l, m, n, p, q, r;
for (f = b.length; f--;) for (e = b[f].length, c[f] = [], d[f] = []; e--;) n = b[f][e], c[f][e] = n === h ? h : n[2], d[f][e] = n === h || 0 === n[1] ? h : !0;
if ("object" === typeof a) for (b = a.length; b--;) n = a[b], c[n[0]][n[1]] = -1;
for (f = c.length; f--;) for (e = a = c[f].length; e--;) if (r = 4, n = c[f][e], n !== h && !0 !== d[f][e]) for (; r--;) {
b = h;
n = f;
p = e;
switch (r) {
case 0:
0 < e - 1 && c[f][e - 1] !== h && !0 !== d[f][e - 1] && (q = 1, n = l = f, p = m = e - 1, b = c[f][e], c[f][e] = c[f][e - 1], c[f][e - 1] = b);
break;
case 1:
c[f - 1] !== h && c[f - 1][e] !== h && !0 !== d[f - 1][e] && (q = 0, n = l = f - 1, p = m = e, b = c[f][e], c[f][e] = c[f - 1][e], c[f - 1][e] = b);
break;
case 2:
e + 1 < a && c[f][e + 1] !== h && !0 !== d[f][e + 1] && (q = 1, l = f, m = e + 1, b = c[f][e], c[f][e] = c[f][e + 1], c[f][e + 1] = b);
break;
case 3:
c[f + 1] !== h && c[f + 1][e] !== h && !0 !== d[f + 1][e] && (q = 0, l = f + 1, m = e, b = c[f][e], c[f][e] = c[f + 1][e], c[f + 1][e] = b)
}
if (b !== h) {
if (!0 === this.autoCheck(c)) return {
convert: q,
row: n,
col: p,
reject: [
[f, e],
[l, m]
]
};
switch (r) {
case 0:
b = c[f][e];
c[f][e] = c[f][e - 1];
c[f][e - 1] = b;
break;
case 1:
b = c[f][e];
c[f][e] = c[f - 1][e];
c[f - 1][e] = b;
break;
case 2:
b = c[f][e];
c[f][e] = c[f][e + 1];
c[f][e + 1] = b;
break;
case 3:
b = c[f][e], c[f][e] = c[f + 1][e], c[f + 1][e] = b
}
}
}
return !1
},
到此這篇關(guān)于基于JS編寫(xiě)開(kāi)心消消樂(lè)游戲的示例代碼的文章就介紹到這了,更多相關(guān)JS開(kāi)心消消樂(lè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript正則表達(dá)式和級(jí)聯(lián)效果
正則表達(dá)式（regular expression）是一種字符串匹配的模式，用來(lái)檢查一個(gè)字符串中是否包含指定模式的字符串。下面通過(guò)本文給大家分享JavaScript_正則表達(dá)式和級(jí)聯(lián)效果，感興趣的朋友一起看看吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)紅包雨功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
JavaScript實(shí)現(xiàn)串行請(qǐng)求的示例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)串行請(qǐng)求的示例代碼，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了詳解小程序input框失焦事件在提交事件前的處理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
CSS3 動(dòng)畫(huà)卡頓性能優(yōu)化的完美解決方案
今天小編就為大家分享一篇關(guān)于css3 動(dòng)畫(huà)卡頓性能優(yōu)化的完美解決方案，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2018-09-09
JavaScript動(dòng)態(tài)生成帶刪除行功能的表格
這篇文章主要為大家詳細(xì)介紹了JavaScript動(dòng)態(tài)生成帶刪除行功能的表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
微信小程序使用wxParse解析html的實(shí)現(xiàn)示例
這篇文章主要介紹了微信小程序使用wxParse解析html的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)點(diǎn)名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
使用js獲取地址欄參數(shù)的方法推薦(超級(jí)簡(jiǎn)單)
下面小編就為大家?guī)?lái)一篇使用js獲取地址欄參數(shù)的方法推薦(超級(jí)簡(jiǎn)單)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
話說(shuō)自從學(xué)前端以來(lái)聽(tīng)到過(guò)多次這樣的"笑話",程序員分為會(huì)正則的和不會(huì)正則的,可見(jiàn)正則的重要性,這篇文章主要給大家介紹了關(guān)于js正則表達(dá)式之前瞻后顧與非捕獲分組的相關(guān)資料,需要的朋友可以參考下2021-10-10