基于JS编写开心消消乐游戏的示例代码
目录
- 展示
- 游戏背景
- 游戏规则
- 源码部分
- 对关卡的地图设置
- 介绍一下游戏中的一些功能
展示
游戏背景
一天晚上，天空中掉下一颗神奇的豌豆种子，正好落在了梦之森林的村长屋附近，种子落地后吸收了池塘的水分，迅速成长，一夜之间变成参天大藤蔓…… 第二天早上，村民们醒来后看到巨大的藤蔓都惊呆了，聚在一起议论纷纷。有人说他似乎看到村长的房子在高耸入云的藤蔓上，房子似乎还在上升，有人号召说应该爬上去救村长，玩家需要爬到藤曼顶部救出村长
游戏规则
把三个颜色相同的小动物连成一条直线，即可消除。达到指定的目标通关后。游戏的模板有四种分别是分数过关、指定消除、获得金豆荚、云朵关卡。
源码部分
主页面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开心消消乐内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
基于JS实现的消消乐游戏的示例代码
目录 前言 游戏的准备工作 总结一下 棋盘 渲染画面 动画效果 genCollapse() genDownfall() genEmerge() 整合效果 genLoop() genSwap() 前言 一直对小游戏挺感兴趣的,也尝试着做过一些小游戏,实现游戏是一个不错的提高代码基础水平的方式,因此这次挑战了一个较为困难的小游戏:消消乐. 如果仅仅是从消除方面来制作一个静态的消消乐(只有消除和补充方块的过程,但是没有任何交互和动画)其实并不算太难,只要我们能够想通方块消除(主要是三消)的原理和方块下
-
JavaScript实现消消乐的源代码
JavaScript实现消消乐的源码下载地址:点击下载源代码 index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
-
基于JS编写开心消消乐游戏的示例代码
目录 展示 游戏背景 游戏规则 源码部分 对关卡的地图设置 介绍一下游戏中的一些功能 展示 游戏背景 一天晚上,天空中掉下一颗神奇的豌豆种子,正好落在了梦之森林的村长屋附近,种子落地后吸收了池塘的水分,迅速成长,一夜之间变成参天大藤蔓…… 第二天早上,村民们醒来后看到巨大的藤蔓都惊呆了,聚在一起议论纷纷.有人说他似乎看到村长的房子在高耸入云的藤蔓上,房子似乎还在上升,有人号召说应该爬上去救村长,玩家需要爬到藤曼顶部救出村长 游戏规则 把三个颜色相同的小动物连成一条直线,即可消除.达到指定的目标通
-
基于JS实现二维码名片生成的示例代码
目录 演示 技术栈 源码 css js 演示 技术栈 这里用到了一个二维码生成库qrcode.js下面是简单介绍: //初始化QRCode对象 var qrcode = new QRCode(document.getElementById("qrcode")); //也可以在初始化QRCode对象,传入更多参数 var qrcode = new QRCode(document.getElementById("qrcode"),{ width: 128, height
-
JS实现别踩白块游戏的示例代码
目录 实现思路 核心代码 HTML代码 CSS代码 JS代码 实现思路 1.offsetTop,与style.top 2.我们看到的是白块在向下运动,其实不是,政治运动的是装着白块的盒子,白块只是被装在了盒子里面被带着向下,而向下运动也只是改变top值.同事盒子total的高度也不是无限长的能一直向下运动,所以肯定是运动到某个地方他又回去了. childNodes:由childNodes属性返回的数组中包含着所有类型的节点,所有的属性节点和文本节点也包含在其中.(不能乱用) JS获取元素的lef
-
VUE+Canvas 实现桌面弹球消砖块小游戏的示例代码
大家都玩过弹球消砖块游戏,左右键控制最底端的一个小木板平移,接住掉落的小球,将球弹起后消除画面上方的一堆砖块. 那么用VUE+Canvas如何来实现呢?实现思路很简单,首先来拆分一下要画在画布上的内容: (1)用键盘左右按键控制平移的木板: (2)在画布内四处弹跳的小球: (3)固定在画面上方,并且被球碰撞后就消失的一堆砖块. 将上述三种对象,用requestAnimationFrame()函数平移运动起来,再结合各种碰撞检查,就可以得到最终的结果. 先看看最终的效果: 一.左右平移的木板 最底
-
基于Python编写一个宝石消消乐小游戏
目录 开发工具 环境搭建 原理简介 开发工具 python版本:3.6.4 相关模块: pygame:以及一些python自带的模块. 环境搭建 安装python并添加到环境变量,pip安装需要的相关模块即可. 原理简介 游戏规则: 玩家通过鼠标交换相邻的拼图,若交换后水平/竖直方向存在连续三个相同的拼图,则这些拼图消失,玩家得分,同时生成新的拼图以补充消失的部分,否则,交换失败,玩家不得分.玩家需要在规定时间内获取尽可能高的得分. 实现过程: 首先加载一些必要的游戏素材: 加载背景音乐: py
-
基于Python实现开心消消乐小游戏的示例代码
目录 前言 一.准备 1.1 图片素材 1.2 音频素材 二.代码 2.1 导入模块 2.2 游戏音乐设置 2.3 制作树类 2.4 制作鼠标点击效果 2.5 制作出现元素 2.6 数组 2.7 制作人物画板 三.效果展示(仅部分) 3.1 初始页面 3.2 第一关画面 3.3 失败画面 3.4 第十关画面 穿过云朵升一级是要花6个金币的,有的时候金币真的很重要 前言 嗨喽,大家好呀!这里是魔王~ 一天晚上,天空中掉下一颗神奇的豌豆种子,正好落在了梦之森林的村长屋附近. 种子落地后吸收了池塘的水
-
C/C++百行代码实现热门游戏消消乐功能的示例代码
游戏设计 首先我们需要使用第三方框架,这里我使用的是sfml,不会使用sfml在我的上几篇文章当中-扫雷(上)有详细的开发环境搭建介绍 首先准备图片资源 一张背景图片,一张宝石图片 窗口初始化加载图片 Texture t1; t1.loadFromFile("images/bg2.png"); 当鼠标第一次单击时,记录下位置,第二次单击又记录一下位置,如果两个小方块相邻就交换位置,如果不相邻如图c的位置则,不发生变化 判断行或列如果三张一样的图片相邻,清除一下图片,进行刷新 实列 #i
-
基于Python编写简易版的天天跑酷游戏的示例代码
写出来的效果图就是这样了: 下面就更新一下全部的代码吧 还是老样子先定义 import pygame,sys import random 写一下游戏配置 width = 1200 #窗口宽度 height = 508 #窗口高度 size = width, height score=None #分数 myFont=myFont1=None #字体 surObject=None #障碍物图片
-
基于JS实现Flappy Bird游戏的示例代码
前言 Flappy Bird 是一款无尽的游戏,玩家可以控制一只鸟.玩家必须保护小鸟免于与管道等障碍物相撞.每次小鸟通过管道时,分数都会增加一.当小鸟与管道碰撞或因重力而坠落时,游戏结束.以下部分描述了构建此游戏必须采取的步骤. 游戏可以通过这个链接进入 完整源码地址 实现代码 HTML 部分:在此部分中,创建和加载游戏的元素.选择背景.鸟类.障碍和得分元素的图像.接下来,我们创建并链接 style.css 和 index.js 文件. <!DOCTYPE html> <html>