基于JS编写开心消消乐游戏的示例代码
作者:肥学
这篇文章主要为大家介绍了如何利用JavaScript实现开心消消乐小游戏,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
展示
游戏背景
一天晚上,天空中掉下一颗神奇的豌豆种子,正好落在了梦之森林的村长屋附近,种子落地后吸收了池塘的水分,迅速成长,一夜之间变成参天大藤蔓…… 第二天早上,村民们醒来后看到巨大的藤蔓都惊呆了,聚在一起议论纷纷。有人说他似乎看到村长的房子在高耸入云的藤蔓上,房子似乎还在上升,有人号召说应该爬上去救村长,玩家需要爬到藤曼顶部救出村长
游戏规则
把三个颜色相同的小动物连成一条直线,即可消除。达到指定的目标通关后。游戏的模板有四种分别是分数过关、指定消除、获得金豆荚、云朵关卡。
源码部分
主页面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('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: "开心消消乐-多多游戏", 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开心消消乐内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!