基于JS编写开心消消乐游戏的示例代码

2024-04-02 19:04:59 417人浏览八月长安

摘要

目录展示游戏背景游戏规则源码部分对关卡的地图设置介绍一下游戏中的一些功能展示游戏背景一天晚上，天空中掉下一颗神奇的豌豆种子，正好落在了梦之森林的村长屋附近，种子落地后吸收了池塘

展示

游戏背景

一天晚上，天空中掉下一颗神奇的豌豆种子，正好落在了梦之森林的村长屋附近，种子落地后吸收了池塘的水分，迅速成长，一夜之间变成参天大藤蔓…… 第二天早上，村民们醒来后看到巨大的藤蔓都惊呆了，聚在一起议论纷纷。有人说他似乎看到村长的房子在高耸入云的藤蔓上，房子似乎还在上升，有人号召说应该爬上去救村长，玩家需要爬到藤曼顶部救出村长

游戏规则

把三个颜色相同的小动物连成一条直线，即可消除。达到指定的目标通关后。游戏的模板有四种分别是分数过关、指定消除、获得金豆荚、云朵关卡。

源码部分

主页面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开心消消乐内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 基于JS编写开心消消乐游戏的示例代码

本文链接: https://www.lsjlt.com/news/150284.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

基于JS编写开心消消乐游戏的示例代码

目录展示游戏背景游戏规则源码部分对关卡的地图设置介绍一下游戏中的一些功能展示游戏背景一天晚上，天空中掉下一颗神奇的豌豆种子，正好落在了梦之森林的村长屋附近，种子落地后吸收了池塘...

99+

2024-04-02
基于Python实现开心消消乐小游戏的示例代码

目录前言一、准备1.1 图片素材 1.2 音频素材二、代码2.1 导入模块2.2 游戏音乐设置2.3 制作树类2.4 制作鼠标点击效果2.5 制作出现元素2.6 数组2.7...

99+

2024-04-02
基于JS实现的消消乐游戏的示例代码

目录前言游戏的准备工作总结一下棋盘渲染画面动画效果genCollapse()genDownfall()genEmerge()整合效果genLoop()genSwap()前言一直对小...

99+

2024-04-02
python代码写开心消消乐

♥️作者：小刘在C站 ♥️个人主页：小刘主页 ♥️每天分享云计算网络运维课堂笔记，努力不一定有回报，但一定会有收获加油！一起努力，共赴美好人生！ ♥️夕阳下，是最美的绽放，树高千尺，落叶归根人生不易，人间真情目录一.pyth...

99+

2023-09-05

pygame python 开发语言
基于JS怎么实现消消乐游戏

这篇文章主要讲解了“基于JS怎么实现消消乐游戏”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“基于JS怎么实现消消乐游戏”吧！游戏的准备工作首先我们思考游戏的机制：游戏有一个“棋盘”，是一个...

99+

2023-06-30
基于Python编写一个宝石消消乐小游戏

目录开发工具环境搭建原理简介开发工具 python版本：3.6.4 相关模块： pygame；以及一些python自带的模块。环境搭建安装python并添加到环境变量，pip安装...

99+

2024-04-02
基于Vue3制作简单的消消乐游戏

目录游戏介绍核心思路核心代码htmljs游戏开始/循环删除下落添加生成矩阵/数据点击换位置游戏介绍先看一下好吧，我知道界面有点丑 →_→ 核心思路游戏步骤...

99+

2024-04-02
C语言实现消消乐游戏的代码分享

C和C++游戏趣味编程》一书各个章节的案例代码，每章案例逐步利用学到的语法知识。本章我们将编写十字消除游戏，用户点击空白方块，沿其上下左右方向寻找第一个彩色方块，如果有两个或两个以...

99+

2023-02-15

C语言实现消消乐游戏 C语言消消乐游戏 C语言消消乐 C语言游戏
基于JS实现Flappy Bird游戏的示例代码

前言 Flappy Bird 是一款无尽的游戏，玩家可以控制一只鸟。玩家必须保护小鸟免于与管道等障碍物相撞。每次小鸟通过管道时，分数都会增加一。当小鸟与管道碰撞或因重力而坠落时，游戏...

99+

2024-04-02
基于JS实现接粽子小游戏的示例代码

目录游戏设计游戏实现添加粽子元素粽子掉落难度选择开始游戏总结端午节马上就到了，听说你们公司没发粽子大礼包？没关系，这里用 JS 实现了一个简单的接粽子小游戏，能接到多少粽子，完全看你...

99+

2024-04-02
基于JS实现飞机大战游戏的示例代码

目录演示技术栈源码定义敌方战机定义我方战机碰撞检测演示技术栈今天没有什么特别要讲的，要不我们提前介绍下次要做的技术吧。你不说话就是同意了。我们开始了。下图是正则表达式的一些总...

99+

2024-04-02
基于Python编写简易版的天天跑酷游戏的示例代码

写出来的效果图就是这样了: 下面就更新一下全部的代码吧还是老样子先定义 import pygame,sys import random 写一下游戏配置 width = 1200...

99+

2024-04-02
基于JS实现蜘蛛侠动作游戏的示例代码

目录代码结构代码展示HTMLJS项目运行游戏截图整个游戏源码是由html、js、 css、图片等代码完成的，无后端数据保存功能。代码结构 js文件夹是游戏事件控制文件...

99+

2024-04-02
基于Python实现24点游戏的示例代码

目录1.前言2.思路3.代码1.前言 24数大家之前玩过没有？规则：一副扑克牌抽走大王，小王，K，Q，J（有的规则里面会抽走10，本文一律不抽走），之后在牌堆里随机抽取四张牌，将这...

99+

2022-12-08

Python 24点游戏 Python 24点 Python 游戏
基于Python实现围棋游戏的示例代码

目录1.导入模块2.初始化棋盘3. 开始游戏4.放弃当前回合落子5.悔棋判断6.重新开始7.右侧太极图的设置8.落子设置9.吃子规则判定设置10.其他11.程序入口12.效果图文件自...

99+

2024-04-02
基于Unity实现3D版2048游戏的示例代码

分享三个无聊的时候用Unity写的小游戏包含 2048 2D版本和3D版本 Voodoo的小游戏 Sticky block 开源仓库: https://gitee.com/wel...

99+

2023-02-02

Unity实现2048游戏 Unity 2048游戏 Unity 2048 Unity 游戏
基于C++实现掷双骰游戏的示例代码

在最流行的博彩游戏中有一种名为“掷双骰”(craps)的骰子游戏，这种游戏在世界各地的娱乐场所和大街小巷非常受欢迎。游戏的规则很简单：玩家掷两个骰子。每个骰...

99+

2024-04-02
基于Python实现格斗小游戏的示例代码

目录前言一、简易版本格斗二、炼狱角斗场格斗前言格斗游戏，曾经是街机厅里最火爆的游戏之一，甚至可以把“之一”去掉，那个年代的格斗游戏就是街机游戏的王。如今...

99+

2023-03-02

Python实现格斗游戏 Python格斗游戏 Python游戏
基于Java实现连连看游戏的示例代码

目录前言主要需求主要设计功能截图代码实现总结前言连连看游戏顾名思义就是找出具有关联关系的事物并进行相应处理，经历了从桌面游戏、在线游戏再到社交游戏三个过程，形式多种多样。游戏的核心...

99+

2024-04-02
基于Python实现成语填空游戏的示例代码

目录前言一、环境准备二、代码展示三、效果展示前言成语填空想必大家都是十分熟悉的了，特别是有在上小学的家长肯定都有十分深刻的印象。在我们的认知里看图猜成语不就是一些小儿科的东西吗？...

99+

2023-02-17

Python成语填空游戏 Python填空游戏 Python游戏