-
2021-02-08 17:33:39
最近合成大西瓜的小游戏比较火，所以我尝试用matterjs做了一个。
Matter.js是用JS写的一个2D物理引擎，作者还在维护，前几天刚更新了一个版本
官网文档 | Github游戏在线体验：http://qn.nklm.cc/web/ball.html
全部代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <title>Ball</title> <style type="text/css"> body{text-align: center;margin:0;} </style> </head> <body></body> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/matter-js@0.16.1/build/matter.min.js"></script> <script type="text/javascript"> let engine = Matter.Engine.create(), world = engine.world, render = Matter.Render.create({ element: document.body, engine: engine, options: { height: 667, width: 375, background: '#fff', wireframes: false } }); let current_score = 0; let current_ball = null; Matter.Engine.run(engine); Matter.Render.run(render); create_borders(); //创建边框 register_event(); //注册事件 init_ball(); //初始化一个球 function register_event() { render.canvas.addEventListener('mousemove', e => {handle_mouse_event(e)}) // 鼠标移动 render.canvas.addEventListener('mouseup', e => {handle_mouse_event(e)}) // 鼠标松开 render.canvas.addEventListener('touchmove', e => {handle_mouse_event(e)}) // 触摸移动 render.canvas.addEventListener('touchend', e => {handle_mouse_event(e)}) // 触摸结束 // 监听物体碰撞事件 Matter.Events.on(engine, 'collisionStart', function(event) { for (let pairs of event.pairs) { let bodyA = pairs.bodyA, bodyB = pairs.bodyB; if (bodyA.level && bodyA.level == bodyB.level) { // 计算两个球中间坐标 const new_x = (bodyA.position.x + bodyB.position.x) / 2, new_y = (bodyA.position.y + bodyB.position.y) / 2; // 删掉两个球 Matter.World.remove(world, [bodyA, bodyB]) // 创建新的球 create_ball(new_x, new_y, bodyA.level + 1) // 更新分数 update_score(bodyA.level + 1) } } }); } function update_score(score) { current_score += score || 0; console.log('score >',current_score); } function handle_mouse_event(e) { e.preventDefault(); if (current_ball) { if (e.type == 'mousemove' || e.type == 'touchmove'){ //移动小球位置，高度固定100 Matter.Body.setPosition(current_ball, { x: e.offsetX || e.touches[0].pageX, y: 100 }) } if (e.type == 'mouseup' || e.type == 'touchend'){ // 取消球的静止状态，让它自由下落 Matter.Body.setStatic(current_ball, false); current_ball = null; setTimeout(function() { // 重新创建一个球 init_ball(); }, 600) } } } // 创建四周边框 function create_borders() { const option = { isStatic: true, render: { fillStyle: "#aaa" } }; const w = render.canvas.width; const h = render.canvas.height; const size = 6; Matter.World.add(world, [ Matter.Bodies.rectangle(w / 2, size / 2, w, size, option), Matter.Bodies.rectangle(w / 2, h - size / 2, w, size, option), Matter.Bodies.rectangle(size / 2, h / 2, size, h, option), Matter.Bodies.rectangle(w - size / 2, h / 2, size, h, option), ]); } // 创建一个静止的球 function init_ball() { current_ball = create_ball() Matter.Body.setStatic(current_ball, true); } // 创建一个球 function create_ball(x, y, level) { x = x || render.canvas.width / 2, y = y || 100, level = level || Matter.Common.choose([1, 2, 3, 4, 5, 6]); // 随机一个等级 const ball = Matter.Bodies.circle(x, y, level * 10, { level: level }); Matter.World.add(world, ball) return ball } </script> </html>更多相关内容 -
合成大西瓜小程序小游戏源码，仅供学习
2021-09-26 15:27:05近日，一款名为【合成大西瓜】的休闲小游戏火爆社交圈。【合成大西瓜】因其玩法简单、充满魔性而频登微博热搜，游戏开发商微伞小游戏在昨日顺势上线了“合成大西瓜”APP。 起初，大家对这种脑残游戏嗤之以鼻，第一... -
合成大西瓜合成大西瓜合成大西瓜
2021-11-18 19:38:52合成大西瓜 -
西瓜：合成大西瓜
2021-02-26 02:44:32西瓜 合成大西瓜简单复刻，代码缺乏优化，性能不好下载后请改成安卓平台 -
【合成大西瓜】合成cqu.rar
2021-02-04 01:34:44这是合成大西瓜python版本。我没玩过原版，所以会有很多不一样的地方（比如水果（重大校徽）大小的差别），但是水果（校徽）种类都是11种这点是一样的。 -
合成大西瓜小游戏全套完整源码，亲测可运行，完美支持移动端和PC端
2021-02-07 22:16:14最近火爆全网的合成大西瓜H5小游戏全套完整源码，亲测完全可运行，同时完美支持移动端和PC端，共一个压缩包文件，解压后将解压出来的文件夹上传到站点根目录，浏览器访问该文件夹即可打开 -
合成大西瓜修改版附源码
2021-05-10 18:37:33合成大西瓜修改版附源码 -
水果合成Unity3d源码功能 仿制“合成大西瓜”
2021-02-03 09:38:54水果合成Unity3d源码功能 仿制“合成大西瓜” 说明：https://blog.csdn.net/qq_33789001/article/details/113599262 -
Qt Quick QML-500行代码实现"合成大西瓜游戏
2021-05-27 22:53:44资源文章介绍地址:https://www.cnblogs.com/lifexy/p/14815614.html,"合成大西瓜"这个游戏玩了一阵还挺有意思的,所以研究了一下小球碰撞原理,自己亲自手写碰撞算法来实现一个合成大西瓜游戏.并支持任意大小布局,你想... -
合成大西瓜cocoscreator源码支持微信小游戏
2021-02-02 10:44:07非常火的一款微信小游戏在微博抖音都很热 开发版本cocoscreator2.4.2安装好引擎打开即可！ -
合成大西瓜
2021-06-27 02:42:01合成大西瓜声明，本项目仅帮助大家学习技术及娱乐，切勿将修改后的网站大规模传播及商用，以避免侵权！最简单的魔改发布『 合成大西瓜 』，配套改图工具，不用改代码，修改配置即可！有帮助的话，求个大大的 star，...展开全文合成大西瓜
声明，本项目仅帮助大家学习技术及娱乐，切勿将修改后的网站大规模传播及商用，以避免侵权！
最简单的魔改发布『 合成大西瓜 』，配套改图工具，不用改代码，修改配置即可！
有帮助的话，求个大大的 star，有疑问请联系微信：liyupi66
作者编程技术公众号『 程序员鱼皮 』，欢迎关注 ❤️
遇到问题可以先阅读本文档最后问题及解决
目录
本地启动
提供两种本地启动方式，serve 和 Docker，小白建议使用第一种。
小白适用
安装 serve 工具：
npm i -g serve
进入 daxigua 目录，运行 serve：
serve
打开浏览器访问 localhost:5000 即可！
已安装 Docker
构建镜像
docker build -t daxigua-server .
启动容器
docker run -d --name play-daxigua -p5000:5000 daxigua-server
快速魔改
按照下列说明修改即可，持续补充
改分数：改 extraSettings.js 文件
改图片：替换 res/raw-assets 目录下指定目录的图片，必须同文件名、后缀、尺寸，成功覆盖可生效，可替换素材文档
无敌模式：改 extraSettings.js 文件
指定第一个水果：改 extraSettings.js 文件
指定下次出现的水果：改 extraSettings.js 文件
大水果合成小水果：改 extraSettings.js 文件
让水果更 Q 弹：改 extraSettings.js 文件，原理参考
水果下落速度减缓：改 extraSettings.js 文件，原理参考
替换音乐：，覆盖 res/raw-assets 目录下相同的音乐，可替换素材文档
替换背景：和改图片原理相同，可替换素材文档
去广告：将广告图片替换为同背景色底图
替换广告链接：改 extraSettings.js 文件
改网站标题：改 extraSettings.js 文件
开启选分弹窗：改 extraSettings.js 文件
点击右上方图标更换水果: 改 extraSettings.js 文件(暂未支持)
上线发布
提供了多种上线发布方式，腾讯云一键部署、Vercel、腾讯云静态网站托管、GitHub Pages 等，小白建议使用 Vercel。
腾讯云一键部署
适用于会 fork 仓库、提交代码的同学。
点击下方按钮，无需任何操作，即可部署我的仓库到腾讯云 ⬇️
如果要替换为一键部署自己的仓库，要先 fork 我的仓库，本地修改后再提交到自己 fork 的仓库，最后把一键部署按钮仓库地址改为自己的仓库即可！
Vercel
适用于零基础的小白。操作简单、域名简短，但国外的服务器，比较慢。
Vercel 是免费网站托管平台，可以帮我们部署网站，并生成可访问的简短网址，还能够和自己购买的域名进行绑定。
先在命令行通过 npm 命令安装 Vercel：
npm install -g vercel
安装完成后，进入 index.html 所在目录(我的是 daxigua)，使用 vercel 命令发布网站：
cd daxigua
vercel --prod
然后会让你输入一些选项，比如项目名称、是否和已有项目关联、是否保存当前配置等。如果要创建多个项目，千万不要和已有项目关联！
发布成功，会得到一个网址，打开就可以看到游戏啦，还可以把网址分享给别人！
腾讯云静态网站托管
国内服务器，访问速度更快，且链接未被微信封杀。
魔改原理
我给 project.js 文件补充了注释，大家可以搜索关键字，如 "改分" 来快速定位，学习修改原理。
问题及解决
无法安装 serve 或者 Vercel？
答：如果报找不到 npm，请先安装 npm。
如果安装中卡住，试着按下键盘(可能假死)，还不行的话先用 npm 安装 cnpm(国内镜像，比较快)：
npm installcnpm -g --registry=https://registry.npm.taobao.org
再用 cnpm 安装： cnpm i -g serve 或 cnpm i -g vercel
Vercel 网址被微信拦截怎么办？
答：可以把网址复制到浏览器打开，也可以申请一个域名，在 Vercel 和服务提供商配置域名解析。
Vercel 基本是海外的服务器，无需备案。
怎么在电脑上浏览网页游戏？
答：在浏览器中，按 F12 打开开发者工具，点击像手机一样的图标即可。
为什么 serve 后，打开网页一片空白？
答：大概率是你在错误的目录下执行了 serve，请务必在 index.html 所在的文件夹下执行 serve。
执行 vercel 命令显示 signUp？
vercel 邮箱验证失败？
答：先确认邮箱是否正确，如果验证失败，大概率是网络原因，请尝试 4G 等网络。或者在其他浏览器中，打开邮箱，点击验证按钮。
怎么使用 vercel 同时上线多个版本？
答：在输入 vercel 后，选择不和已有项目关联(link)，并且使用一个新的项目名(project name)。
想在修改文件后重新搞个新版本，但输入 vercel prod 后，直接覆盖了，而没有让我选择是否和现有项目关联(link)，怎么办？
答：执行 vercel 后，会在本地生成 .vercel 隐藏目录保存之前的发布信息，删掉该目录即可。
导出网址后，我修改了图片，然后游戏中还是原来的图片？
答：网址读取的是远程的文件，只改了本地当然没用！再次执行 vercel 或腾讯云命令，把最新文件传上去。
Mac 能否使用这个教程呢？
答：当然可以！所有命令和 windows 完全一致！只是 cmd 命令行工具改为用 terminal 终端(按 command + 空格，搜索 terminal)
为什么打开网站白屏了？
答：大概率是你修改错误，导致一些文件缺失。。可以试试重新下载代码，再修改，请先确保本地可以运行，再发布！
-
UCAS-daxigua:合成大西瓜魔改版--合成国科大
2021-05-23 11:37:01合成国科大--合成大西瓜魔改版 PC/移动端可以直接访问 玩耍，链接 图片素材在University_png目录中，魔改需要的自取，大小已经调好，直接塞进目录/res/raw_assets/的对应目录中即可，png文件名前两位即为对应目录，... -
合成大西瓜（微信小游戏版源码）
2021-02-06 21:15:05真正的微信小游戏版，并非套H5，自己换肤改代码提审（小游戏有代码检测机制） -
合成大西瓜源码送cocoscreator开发微信小游戏
2021-02-07 09:40:50最近非常火的合成大西瓜源码送大家，合成大西瓜游戏的源代码，建议自行观看，MD文件中有相应注解！ -
合成大西瓜index.html
2021-05-10 18:38:17合成大西瓜index.html -
合成大西瓜ios.zip
2022-01-17 12:16:33使用oc开发。 -
合成大西瓜源码 免费送cocoscreator开发微信小游戏
2021-02-01 09:15:08最近非常火的合成大西瓜源码免费送大家 -
游戏，合成大西瓜.zip
2021-01-30 15:27:29合成大西瓜游戏的源代码，建议自行观看，md文件中注解 -
微信小游戏[合成大西瓜]源码.rar
2021-03-11 14:53:50微信小游戏[合成大西瓜]源码 -
合成大西瓜开发源码，手把手教你运行和部署大西瓜游戏项目
2021-02-03 23:05:39最近合成大西瓜非常火，很多编程爱好者将大西瓜改成了各种版本，非常魔性，哈哈。如果你也想魔改大西瓜，或者想研究一下大西瓜源码怎么玩的，下面的教程手把手教你从合成大西瓜源码运行到部署。展开全文目录
最近合成大西瓜非常火，很多编程爱好者将大西瓜改成了各种版本，非常魔性，哈哈。
如果你也想魔改大西瓜，或者想研究一下项目怎么玩的，下面的教程从下载到游戏项目部署一条龙搞定。
步骤一：下载大西瓜源代码
贴心的我已经将各种版本的代码整理到百度网盘了，大家可以按需下载：
链接: https://pan.baidu.com/s/1fV72Om4hKZGNp8YTn3nx0g 提取密码: vjlf
步骤二：尝试运行大西瓜游戏项目
下载的源码结构如下图
如果你双击打开 index.html 文件可能卡在98%或者99%不动：
按 F12打开 chrome 浏览器的开发者调试模式发现，有大量的报错：
这是因为本地打开是文件是静态的，是 file 协议，并不是 http。所以我们需要在本地跑一个 WEB 服务器。
步骤三：安装 nodejs
如果本地没有安装 nodejs 工具，先装一下 nodejs，主要是要通过 npm 安装 serve
nodejs 下载地址：http://nodejs.cn/download/
不同的系统选择不一样的包。
安装完成打开终端命令行工具，执行 npm -v 命令：
npm -v如果返回版本号表示安装成功。
6.14.10步骤四：安装 serve 工具
注意是 serve 不是 server 哦，别打错了。
npm i -g serve --registry=https://registry.npm.taobao.org返回版本号表示安装成功
+ serve@11.3.2 updated 41 packages in 3.083s步骤五：运行本地大西瓜游戏项目
通过终端命令行cd 进入到上面下载的游戏源码中，直接执行 serve 命令就可以启动服务了，如下图所示：
上面图中有两个地址，第一个是可以在电脑浏览器本地访问的，第二是可以通过手机浏览器远程访问的，你可以拿手机试试哈。
温馨提醒：由于游戏主要适配的手机端，如果你要通过电脑浏览器玩，需要切到手机屏幕模式。
打开 chrome 浏览器，F12打开控制台，我把控制台放右边了，默认是在下边。
步骤六：部署大西瓜游戏项目到远程服务器
在本地运行会有一个限制，关了电脑手机就不能玩了，那女朋友岂不是要生气啦
有没有办法将游戏部署到远程服务器呢？当然有啦。
是不是很贵啊？我下面会介绍一个免费的方式，超级好用。
主角就是 vercel ，可能很多人没有听说话，没关系，简单来说这个系统提供了静态网站项目的托管服务，有付费也有免费的，我们使用免费的就足够了。
1. 注册 vercel 账号
先登录 Github 官网：
这里有个坑需要规避一下，如果你的 Github 账号是绑定的 QQ 邮箱，建议你换成其他邮箱，Vercel 不支持 QQ 邮箱，这个比较坑
然后打开另外一个页面开始注册 vercel 账号
https://vercel.com/ 建议直接使用 Github 账号登录。
注册完了之后就可以进行下一步了。
2. 安装 vercel 命令行工具
我们需要将项目部署到 vercel 系统，通过使用命令行工具比较方便。
在命令行终端中执行命令：
npm install -g vercel --registry=https://registry.npm.taobao.org返回 vercel 版本号就表示安装成功了。
3. 开始部署到 vercel 系统
cd 到源码根目录然后执行： vercel --prod
第一次需要验证邮件，如下图：
验证完之后可以继续执行 vercel --prod
如果图所示项目就发布成功了，远程访问地址是： https://daxigua01.vercel.app/
这个地址是我发布的地址，大家可以点击试玩， 这个地址是可以分享给其他朋友一起玩， 手机浏览器打开效果更加哦。
注意：vercel 的地址已经被微信屏蔽了，大家可以将生成的地址拷贝到手机浏览器中运行。
技术指导
如果对上面的教程有任何欢迎与我交流，搞不定的也可以找我指导😄
-
合成大西瓜改进版合成南华等等
2021-11-18 20:25:06合成大西瓜改进版合成南华等等 -
合成大西瓜cocos源码
2021-03-23 17:17:09自己编译 -
Synthetic-Wegifan:根据网上找到的合成大西瓜的源代码修改而来，以及和沙雕群友整活
2021-03-23 05:43:22Synthetic-Wegifan合成微积分 基于提供的源代码修改而来，用于整活（ 随机采用了11位群友的头像，并随机将其和水果对应，没有任何偏序意义上的含义（代表 Wegifan：风蓝galgame 经验值交流群现任群主（2019〜） 如何... -
魔改一波合成大西瓜！代码已开源~
2021-01-31 09:23:14合成大西瓜。展开全文
周末了，总是忍不住想放飞下自己。于是就试玩了一会大西瓜合成的小游戏，结果愣是停不下来，有点上头啊。
这小游戏很有特点啊，界面第一次打开的时候只有 loading，竟然没有广告，良心了。说白了，这款小游戏就是俄罗斯方块、2048、水果忍者的结合体（可不只是题主说的 2048 的翻版），通过控制水果的下落，两个相同的水果碰撞到一块的时候就会合成更大的水果，同时迸发出溅射的效果。
第一次合成大西瓜的时候界面效果简直亮瞎了我的双眼。不过说句实在话，可能有戏还不太完善，我第一把就卡死了，可能得分太高了吧！
六天前就有朋友在安利这款小游戏，第一次看到的时候我想，这破游戏有什么好玩的，不就是合成个大西瓜嘛，对此不屑一顾。
直到昨天我看到鱼皮老弟分享了一篇《魔改大西瓜》的文章，就忍不住也想自己魔改下，毕竟吃瓜群众玩合成大西瓜，吃瓜程序员当然要玩源码，这才是正确的姿势嘛。
整个代码目录并不复杂，是基于 cocos2d 游戏引擎开发的。
- index.html，游戏的主页面
- project.js，核心代码，游戏逻辑都在这里面
- settings.js，配置文件
- res 目录，存放图片和音频等资源
我以为直接双击 index.html 就可以在本地运行，结果卡在了 99% 的 loading 上。
原因也很简单，双击网页文件的访问协议是 file，而不是 HTTP，导致一些资源无法加载。解决方案是本地搭建一个 Web 服务器，怎么搭呢？
第一步，安装 Node.js，可以通过下面的路径下载安装包。
http://nodejs.cn/download/
安装完成后通过
npm -v查看是否安装成功。npm 是 Node.js 的模块管理器，功能及其强大。第二步，安装 Vue CLI，一个基于 Vue.js 进行快速开发的完整系统，提供了一个运行时依赖。文档见一下路径：
https://cli.vuejs.org/zh/guide/
安装完成后通过
vue --version查看是否安装成功。第三步，安装 serve 服务，可通过
npm i serve -g命令进行安装，如果 npm 安装比较慢的话，可以通过cnpm来安装。cnpm 是淘宝提供的一个 npm 的镜像，国内访问的速度更快。如果出现
Error: EACCES: permission denied表示没有权限，需要在命令前面加上sudo，我在《Shell，牛逼》 这篇内容里有解释。安装完成后通过
serve -v查看是否安装成功。第四步，进入到合成大西瓜的源码包下，执行
serve启动本地 Web 服务。
第五步，在浏览器地址栏键入本地或者网络可以访问的地址就可以启动 Web 服务器了。趁机玩了一把，舒服了。
我也知道，最近娱乐圈八卦多，西瓜多，吃到撑爆，确实给这款小游戏的传播带来了一定的契机。但站在程序员的角度来看，这款游戏好玩才是它火起来的本质，这是我从作者的源码得出来的结论。
如果你恰好也是程序员，想从源码里学点东西，可以点击下面的链接：
好了，祝各位周末愉快，玩得开心！
-
Unity3D合成大西瓜
2021-02-21 22:11:54Unity3D合成大西瓜 1.FruitType using UnityEngine; public enum FruitType { One = 0, Two = 1, Three = 2, Four = 3, Five = 4, Six = 5, Seven = 6, Eight = 7, Nine = 8, Ten = 9, Eleven = 10, } ... -
魔改和上线你的合成大西瓜，最全教程！
2021-03-13 07:14:05本文是从 0 到 1 的教程，让小白也能够魔改和上线发布属于你的合成大西瓜！最近，一款名为『 合成大西瓜 』的游戏突然火了！看来真的是大家吃瓜吃太多了，这个小游戏深抓人心！ 当然，游戏本身非常有趣，玩法简单，... -
为了女朋友！熬夜撸了一个“合成大西瓜”！(附源码)
2021-02-07 18:49:18本项目主要用作 cocos creator 练手使用，所有...游戏目标是合成最高级的水果：大西瓜！当堆积的水果超过顶部红线时则游戏结束 整理出需要实现的核心逻辑 生成水果 水果下落与碰撞 水果消除动画效果及升级逻辑.. -
（已更新）合成大西瓜小程序小游戏源码，仅供学习
2022-05-09 20:42:41近日，一款名为【合成大西瓜】的休闲小游戏火爆社交圈。【合成大西瓜】因其玩法简单、充满魔性而频登微博热搜，游戏开发商微伞小游戏在昨日顺势上线了“合成大西瓜”APP。 起初，大家对这种脑残游戏嗤之以鼻，第一... -
合成大西瓜游戏开发
2022-02-23 15:49:10最近，一款名叫《合成大西瓜》的小游戏火遍朋友圈，让我又想起来前些年的跳一跳，游戏简单又魔性，又是一个消磨时间的利器虽然游戏规则简单，但稍有不慎，就会出现以下让人抓狂的场景。咨#18904084502# ...
