怎样把微信小游戏转换成微信小程序? 40C

快纪念日了,于是找了个拼图微信小游戏把里面图片改了改想哄妹子开心,结果微信小游戏发布不了,只能发小程序,小游戏和小程序的哪点不同?怎么样才能把微信小游戏改成小程序呢?这些小游戏的代码都要放在小程序的哪些文件下?。。。ps我是菜鸟小白经朋友介绍找到了这里。。。
谢谢各位大神
图片说明

button.js里的代码:

export default class Button {
constructor(src, x, y, width, height) {
this.img = new Image()
this.img.src = src
this.x = x
this.y = y
this.height = height
this.width = width
}

render(ctx) {
ctx.drawImage(this.img, this.x, this.y, this.width, this.height)
}

isTapped(x, y) {
if (x > this.x && x < (this.x + this.width) && y > this.y && y < (this.y + this.height)) {
return true
}
return false
}
}

eventUtil.js里的代码:

const __ = {
x: Symbol('x'),
y: Symbol('y'),
onTap: Symbol('onTap'),
onSwipe: Symbol('onSwipe'),
}
const SWIPEGAP = 40
const TYPE_TAP = 'tap'
const TYPE_SWIPE = 'swipe'

export default class EventUtil {
constructor(onTap = function () {}, onSwipe = function () {}) {
this[__.x] = 0;
this[__.y] = 0;
this[__.onTap] = onTap;
this[__.onSwipe] = onSwipe;
this.initEvent()
}

initEvent() {
    canvas.addEventListener('touchstart', ((e) => {
        e.preventDefault()

        this[__.x] = e.changedTouches[0].clientX
        this[__.y] = e.changedTouches[0].clientY
    }).bind(this))

    canvas.addEventListener('touchend', ((e) => {
        e.preventDefault()

        let deltaX = e.changedTouches[0].clientX - this[__.x]
        let deltaY = e.changedTouches[0].clientY - this[__.y]

        if (deltaX * deltaX + deltaY * deltaY < SWIPEGAP * SWIPEGAP) {
            return this.fireEvent(TYPE_TAP)
        }
        if (Math.abs(deltaX) > Math.abs(deltaY)) {
            if (deltaX > 0) {
                return this.fireEvent(TYPE_SWIPE, 'right')
            } else {
                return this.fireEvent(TYPE_SWIPE, 'left')
            }
        } else {
            if (deltaY > 0) {
                return this.fireEvent(TYPE_SWIPE, 'down')
            } else {
                return this.fireEvent(TYPE_SWIPE, 'up')
            }
        }

    }).bind(this))
}
fireEvent(type, direction) {
    var event = {}
    event.x = this[__.x]
    event.y = this[__.y]
    if (direction) {
        event.direction = direction
    }
    switch (type) {
        case TYPE_TAP:
            return this[__.onTap](event)
        case TYPE_SWIPE:
            return this[__.onSwipe](event)
        default:
            break;
    }
}

}

Symbol.js里的代码:

let Symbol = window.Symbol
let idCounter = 0

if (!Symbol) {
Symbol = function Symbol(key) {
return __${key}_${Math.floor(Math.random() * 1e9)}_${++idCounter}__
}

Symbol.iterator = Symbol('Symbol.iterator')
}

window.Symbol = Symbol

main.js里的代码:
import EventUtil from './base/eventUtil'
import BackGround from './runtime/background'
import GameInfo from './runtime/gameinfo'
import DataBus from './databus'

let ctx = canvas.getContext('2d')
let databus = new DataBus()

/**

  • 游戏主函数
    */
    export default class Main {
    constructor() {
    this.bg = new BackGround(ctx)
    this.gameInfo = new GameInfo()

    let eventUtil = new EventUtil(((e) => {
    this.gameInfo.tap(e)
    }).bind(this), ((e) => {
    this.movePieces(e.direction);
    }).bind(this))

    databus.reset()

    window.requestAnimationFrame(
    this.loop.bind(this),
    databus.pieces.forEach((item, position) => {
    item.render(ctx);
    })
    )
    }

    /**

    • 移动方块的方法
    • @param {any} direction 移动方向
    • @returns
    • @memberof Main */ movePieces(direction) { let targetPiece switch (direction) { case 'up': targetPiece = databus.emptyPosition + databus.stage break; case 'down': targetPiece = databus.emptyPosition - databus.stage break; case 'left': targetPiece = databus.emptyPosition + 1 if (Math.floor(targetPiece / databus.stage) !== Math.floor(databus.emptyPosition / databus.stage)) { // 如果两个商不相等,说明左右滑动出现了换行现象,不能执行 return; } break; case 'right': targetPiece = databus.emptyPosition - 1 if (Math.floor(targetPiece / databus.stage) !== Math.floor(databus.emptyPosition / databus.stage)) { return; } break; default: break; } databus.pieces.forEach((item) => { if (item.position === targetPiece) { item.move(databus.emptyPosition) databus.emptyPosition = targetPiece } }) }

    checkGameOver() {
    if (databus.gameOver || databus.pieces.length === 0) {
    return
    }
    for (let i = 0; i < databus.pieces.length; i++) {
    let piece = databus.pieces[i]
    if (piece.index !== piece.position) {
    return false
    }
    }
    databus.gameOver = true
    databus.finalTime = databus.getCurrentTime()
    }
    /**

    • canvas重绘函数
    • 每一帧重新绘制所有的需要展示的元素 */ render() { ctx.clearRect(0, 0, canvas.width, canvas.height)

    this.bg.render(ctx)
    databus.pieces.forEach((item) => {
    item.render(ctx);
    })
    this.gameInfo.render(ctx)
    }

    // 游戏逻辑更新主函数
    update() {
    // 统计是否有动画正在播放
    let isAniPlaying = false
    databus.pieces.forEach((item) => {
    item.update();
    if (item.ani !== 1) {
    isAniPlaying = true
    }
    })

    // 如果没有动画正在播放,查看游戏是否结束
    if (!isAniPlaying) {
    this.checkGameOver()
    }
    }

    // 实现游戏帧循环
    loop() {
    this.update()
    this.render()

    window.requestAnimationFrame(
    this.loop.bind(this),
    canvas
    )
    }
    }

简介:

一个微信小程序游戏,滑动进行方块拼接

源码目录介绍

./js
├── base                                   // 定义游戏开发基础类
│   ├── button.js                          // 游戏内可点击图片类
│   └── eventUtil.js                       // 处理点击事件的类
├── libs
│   ├── bezier.js                          // 用于进行淡入淡出动画的类库 https://github.com/gre/bezier-easing
│   ├── symbol.js                          // ES6 Symbol简易兼容
│   └── weapp-adapter.js                   // 小游戏适配器
├── models
│   └── piece.js                           // 拼图方块类
├── runtime
│   ├── background.js                      // 背景类
│   ├── gameInfo.js                        // 游戏菜单、按钮和分数
│   ├── gameMap.js                         // 用于提供游戏的随机地图
│   └── music.js                           // 全局音效管理器
├── databus.js                             // 管控游戏状态
└── main.js                                // 游戏入口主函数

0

1个回答

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
关于“H5小游戏源代码如何转换微信小游戏发布”
关于“H5小游戏源代码如何转换微信小游戏发布” 基于 HTML5 的游戏引擎会通过以下方式去创建画布、音频,获取屏幕宽高 let canvas = document.createElement(‘canvas’) let audio = document.createElement(‘audio’) console.log(window.innerWidth) console.log(w...
h5游戏间接转换为微信小游戏
h5小游戏不能直接转换为微信小游戏,但是,已有h5小游戏是可以间接转换为微信小游戏的。 首先,Egret、Cocos、Laya 为了适配小游戏或多或少都修改了一些底层的业务逻辑,所以需要 HTML5 游戏先升级到对应引擎的最新版,然后按照小游戏的要求修改部分业务逻辑即可发布为微信小游戏。 以 Egret 为例,需要开发者最低将引擎版本升级到 5.1.x 版本,然后根据小游戏的资源、代码标准稍作修改...
h5小游戏嵌入到微信小游戏中(以egret为例)
H5小游戏源代码不能转换为微信小游戏发布,但是可以把现有的h5小游戏嵌入到微信小游戏中,这里使用egret举例。使用egret创建一个空的微信小游戏,在main.ts中资源加载完成后执行Webview。 示例代码: let view= new WebView(“http://……../index.html“);//服务器上h5小游戏的index.html view.x = 0; view....
【小程序】解决微信小程序/小游戏使用JSZip未定义
例如使用jszip库时, this._zip = new JSZip(zipData); 导出生成微信小程序。编译,会提示ReferenceError: JSZip is not defined。 话不多说,解决方案如下: 方案1,最简单的办法就是在 jszip.min.js 的尾部追加这段代码就可以了(推荐) ;if(!window.JSZip){window.JSZip = mod...
微信小程序和微信小游戏的区别
本人小程序(小游戏)开发新手,看了几天文档,才大概搞明白微信小程序和微信小游戏的区别。 首先大家口中所说的“小程序”这个概念有两个意思:         一种是“小程序平台下的全部类型的项目”,这样的话,就是不区分小程序项目和小游戏项目的概念,是大家一般口中所说的那一种。比如,有人说:你今天玩的那个小程序是哪一个,这时所说的可能小程序也可能是小游戏。         一种是“小程序项目”,这...
时间戳转换成(2018.07.25 12:30)格式
1.在外部util.js中封装一个转换时间戳的格式的方法 /* * 时间戳转换为yyyy-MM-dd hh:mm:ss 格式 formatDate() * inputTime 时间戳 */ function formatDate(inputTime) { var date = new Date(inputTime); var y = date.getFullYear(...
微信小程序小游戏教程-从入门开始(视频+代码)(前端+后端)
微信小程序小游戏教程(视频+代码)(前端+后端) 多家淘宝店购买整理的资源,几乎包含了所有领域。
超级玛丽奔跑跳跃微信小游戏源代码
超级玛丽奔跑跳跃微信小游戏源代码,超级玛丽奔跑跳跃微信小游戏源代码,超级玛丽奔跑跳跃微信小游戏源代码。
微信小程序与小游戏的api能否互相调用的总结
最近一直疑惑,小游戏项目能调用小程序的api吗? 再反过来,小程序项目能调用小游戏里的api吗?   对于这个问题,刚开始的想法是: 小程序相当于前端html(以下称html),小游戏相当于h5游戏(以下称h5)开始。 然后,h5是可以调用所有前端html的的api的,因为h5是包含html的,所以h5可以调用所有html的api。 但是(小程序和小游戏)与(上面的关系)有点相似,但是...
微信小程序带参数跳转到小游戏
小游戏的默认路径是 pages/index/index wx.navigateToMiniProgram({ appId: 'wxef98a1fd370dd5ac', path:'pages/index/index?channcelCode=qiuqiu&amp;amp;amp;amp;amp;goto=220', envVersion: 'develop', extraData:...
微信小程序日期转换为时间戳
var time = '2019-05-20 00:00:00'; var repTime = time.replace(/-/g, '/');//用正则主要是把“2019-05-20 00:00:00”转换成“2019/05/0 00:00:00”兼容ios console.log("返回时间:" + repTime); var timeTamp = Date.parse(repTime)...
微信小程序(游戏)----拼图游戏(设计思路)
设计思路 1、将一张海报等分成 N*N 的矩阵 方法一:利用两个组件循环完成,view组件和image组件,view组件作为盒子规定大小—-超出部分不显示,image组件展示完整的海报—-进行定位。循环该组合拼接成一张完整的海报。 方法二:利用一个组件循环完成,view组件配合背景图,单纯的循环定位view组件,就能完成海报。 优点:方法一可以将大多数公用的WXSS提出到W...
自动客服功能的微信小程序
(欢迎转载。本文源地址:http://blog.csdn.net/speeds3/article/details/77326122)微信小程序最近比较火爆,所以抽空做了个客服机器人的小程序,来回答之前坦克游戏中的常见问题。当然这个小程序也很容易修改为其他类型的自动客服,需要做的仅仅是在olami平台加上相应的问题和答案。微信扫描二维码体验小程序整个小程序界面包含2个部分,一部分用于显示回答,一部分为
利用python实现微信小程序游戏跳一跳详细教程
利用python实现微信小程序游戏跳一跳详细教程 1 先安装python 然后再安装pip pip901 解压压缩包,打开命令行,执行python setup.py install 安装完pip后,在我们python安装路径下,有一个scripts文件夹,我们需要配置一下pip的环境变量设置好环境变量 最后安装 PIL http://www.lfd.uci.edu/~gohlk
微信小程序(小游戏)的示例
在这里给大家介绍微信小程序(小游戏)的示例. 1. 首先当然是需要下载官方开发工具. 2. 接着我们需要创建一个项目 在这里需要需要点击体验小游戏.即可生成一个demo 3. 已结生成了项目,我们可以看一下效果.是打飞机的游戏
微信小程序-小游戏文档入口
有木有像我一样笨的小朋友找不到微信小程序-小游戏文档入口.这里我贴给大家.刚发布的百度不好找呀. https://mp.weixin.qq.com/debug/wxagame/dev/index.html 这就是小程序中小游戏的开发文档试试吧.
微信小程序和小游戏视频教程 源码 前端和后端都有
这是我在淘宝买的好几家,微信小程序和威信小游戏的源码和教程,花了几十块大洋。几乎涵盖了所有行业,而且还有小程序运营的教程,文档里是共享连接和密码,里面有几千个文件,需要分批保存。现在是需要1分,下载的人多了,就需要5积分了哦
『教程』微信小游戏开发(教程+Demo+跳坑)canvas
社区里有一群canvas爱好者,比jsh5css,安静的小智,jeffer等同学他们在canvas方面都有着自己的学习心得和见解。但是极乐叔发现在小程序开发学习过程中还是有很多小伙伴折戟在canvas上,为此我们在社区首页教程内专门开了一个canvas学习栏目,但是觉得仍然不够,canvas在全网的知识还是太少,所以今天集中一下全网的资料,方便以后遇到问题的同学,能够从中找到可能的参考。 假
微信小程序(小游戏)横屏的问题
在目前的微信小程序(小游戏)的API中小程序目前尚不支持横屏小游戏是可以完美横屏的我们需要在game.json中将默认的配置deviceOrientation修改为landscape即可 代码如下:{ "deviceOrientation": "landscape" }这样就可以在小游戏中完美支持横屏
微信小程序---将html代码转化为wxxml代码
本人php新手,月薪4K。因为目前刚刚入职,可能没什么工作量,都是修修改改功能,所以自己学习小程序开发,想做一个新闻类的小程序,但是html跟wxml的代码又有所不同,所以查了一下资料,有些还是写的不全的,所以我总结了一下; 到https://github.com/icindy/wxParse下载,将wxParse文件夹放置到小程序根目录,即跟pages同级目录 然后在要转化的代码文件,我...
微信小游戏 - Canvas/WebGL Demo 移植
这是个人关于微信小游戏系列文章的第一篇,在这系列文章里会描述 —— 如何把一些 Canvas/WebGL Demo 移植到小游戏环境并支持双端运行; 对小游戏在 Android 平台的运行时架构进行分析; 通过对移植的 Canvas/WebGL Demo 在小游戏和 Chrome for Android 浏览器上做 Benchmarking,对 H5 游戏 vs 小游戏的渲染性能进行对比和分...
微信小程序、微信小游戏源码分享~
这几个月收集了,各个行业都有,分享给大家,仅供学习参考 ~ 加QQ群:687477934,在群文件里面,自取!
在微信小游戏中使用three.js显示3D图形
年前,微信发布了一个重磅消息:微信小程序的小游戏功能,千呼万唤始出来! 笔者之前从未接触过微信小程序和WebGL的开发,但是却一直有留意相关技术的发展,大概听说原来微信小程序是不支持WebGL 3D技术的。这次借着微信大力推广小游戏,看了一下API文档,发现小游戏是可以使用WebGL进行开发的。而最近正好又有点时间,就随便搞搞,试试小游戏的效果。因为小游戏“跳一跳”是用three.js制作的,所
微信小程序小游戏-贪吃蛇demo
微信小程序小游戏-贪吃蛇demo
微信小游戏canvas抗锯齿
let sysInfo = wx.getSystemInfoSync(),width =sysInfo.windowWidth,height =sysInfo.windowHeight; canvas.style.width = width + &quot;px&quot;; canvas.style.height = height + &quot;px&quot;; canvas.height = height * windo...
微信HTML5小游戏之推箱子
我的个人博客网站上线啦!所有文章都搬到新地址了,点击围观吧! 经典的推箱子是一个来自日本的古老游戏,目的是在训练你的逻辑思考能力。在一个狭小的仓库中,要求把木箱放到指定的位置,稍不小心就会出现箱子无法移动或者通道被堵住的情况,所以需要巧妙的利用有限的空间和通道,合理安排移动的次序和位置,才能顺利的完成任务。推箱子游戏是一种老少皆宜的益智游戏,既可以开发青少年学生的智力,又可以防止老年痴呆症,全家...
微信小游戏斗地主小游戏源码
【完整微信小游戏斗地主小游戏源码】非demo 【完整微信小游戏斗地主小游戏源码】非demo 【完整微信小游戏斗地主小游戏源码】非demo
微信小程序踩坑——Android真机调试问题
如果api请求在URL中拼接了字符串/汉字,那么需要对拼接字符串进行encodeURIComponent() 编译。否则Android真机上自动编译字符串可能编译出空格,导致API请求失败。 而ios/微信开发者工具上是不会出现这个问题的,不知道的话简直狗生疑惑、、、 eg: url: ‘http://haha.zhengjingwangzhan.com?query=‘+enc...
微信小游戏源码 小程序 完美运行
完美运行微信小程序源码,大家可以下载学习,检测无问题!!!
微信小程序(游戏)----拖拽拼图(图片分块和打乱顺序)
效果图 图片分块 创建二维数组 typeArr 和一维有序数组 pointsArr; 计算每个块区view的定位坐标(x,y)和view的背景坐标(px,py)、以及每个view的顺序 count; 填充数组 pointsArr 的对应值 count 进行记数。 initTypeArr(){ let arr = [],count = 0; for(let i = 0;...
微信小程序用户拒绝再次授权
直接上代码吧: wx.login({ success: function () { wx.getUserInfo({ success: function (res) { console.log('授权成功!') that.setData({ userInfo: res.userIn...
如何获得开发微信小程序小游戏的APPID?
这个ID和以前开发非商城类的是不一样的,如果以前申请了,这次就只能重新申请,并且在选择服务类目的时候,选游戏,不要选错了。
微信小程序之小游戏源码
包含了多个微信小游戏的源码,适合正在研究小程序小游戏的同学!
微信小程序--游戏demo
一、微信工具demo目录结构 二、demo地址  
微信小程序狼人杀小游戏
微信小程序狼人杀小游戏,导入可以直接使用,导入选择小程序导入
微信小程序 小游戏跳一跳源码
微信小游戏 开发的跳一跳源码。采用cocos写的 微信小游戏 开发的跳一跳源码。采用cocos写的
【微信 小程序/小游戏】微信小程序/小游戏 相关政策 和 踩坑总结
1 小游戏提交时需要比小程序更多的资料微信官方运营规范:https://developers.weixin.qq.com/miniprogram/product/#%E4%B8%89%E3%80%81%E5%B0%8F%E6%B8%B8%E6%88%8F%E7%89%B9%E5%88%AB%E8%A7%84%E8%8C%83...
JavaScript 微信小游戏
 微信小游戏 微信小程序包结构 app-config.json app-service.js page-frame.html 其他一堆放在各文件夹中的.html文件 和源码包内位置和内容相同的图片等资源文件 微信小游戏解包工具 https://bbs.pediy.com/thread-225289.htm js写的解包,需要nodejs run https://www.52po...
flappybird的微信小程序源代码
微信小程序的一个游戏,可直接导入包内使用,很方便初学者使用
微信小程序,对象转换成数组
 有问题可以扫码加我微信,有偿解决问题。承接小程序开发。 微信小程序开发交流qq群   173683895  、 526474645 ; 正文: 对象转数组:   var jiu = res.data.k4.f3 var nArr = []; for (var i in jiu){ nArr.push(jiu[i]); ...