首頁 > 軟體

基於JS編寫開心消消樂遊戲的範例程式碼

2022-06-01 10:00:11

展示

遊戲背景

一天晚上,天空中掉下一顆神奇的豌豆種子,正好落在了夢之森林的村長屋附近,種子落地後吸收了池塘的水分,迅速成長,一夜之間變成參天大藤蔓…… 第二天早上,村民們醒來後看到巨大的藤蔓都驚呆了,聚在一起議論紛紛。有人說他似乎看到村長的房子在高聳入雲的藤蔓上,房子似乎還在上升,有人號召說應該爬上去救村長,玩家需要爬到藤曼頂部救出村長

遊戲規則

把三個顏色相同的小動物連成一條直線,即可消除。達到指定的目標通關後。遊戲的模板有四種分別是分數過關、指定消除、獲得金豆莢、雲朵關卡。

原始碼部分

主頁面js部分呼叫了微信分享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(&#39;share&#39;).style.display=&#39;none&#39;;">
	</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: "開心消消樂-多多遊戲",
		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 + "分,一起來消星星吧!";

		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>

對關卡的地圖設定

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]
				]

介紹一下游戲中的一些功能

自動填充

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
				},

到此這篇關於基於JS編寫開心消消樂遊戲的範例程式碼的文章就介紹到這了,更多相關JS開心消消樂內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com