微信小程序跳一跳html版复原(three.js+tween.js)

一、浏览器运行

效果

需要安装Tomcat后以类似 http://localhost:8080/zjgame/zjgame.html的方式访问,否则本地图片无法加载。
注:本项目基于Three.js,是对微信小游戏跳一跳的html版改写,只供研究学习使用。

GitHub:https://github.com/zj19941113/You_Jump_I_Jump ,只供个人研究学习使用。
Three.js+tween.js 基础(一):https://blog.csdn.net/ffcjjhv/article/details/86632320
配置腾讯云服务器 通过域名访问自己的网页tomcat:https://blog.csdn.net/ffcjjhv/article/details/85140212

二、在桌面运行 electron打包

在这里插入图片描述
跳一跳桌面应用程序Jump_Jump-win32-x64,链接:https://pan.baidu.com/s/13iZylPrwSYAUITwhaUZwIg ,提取码:ho62 ,下载解压后可直接玩耍~

1、安装 node.js

#下载:https://nodejs.org/en/
cmd输入node -vnpm -v查看是否安装成功
在这里插入图片描述

2、安装 electron

命令行下载淘宝镜像命令工具 cnpm

npm install cnpm -g --registry=http://registry.npm.taobao.org

用 cnpm 命令安装 electron

cnpm install electron -g

cmd输入electron -v查看是否安装成功
在这里插入图片描述

3、运行

下载:https://github.com/zj19941113/You_Jump_I_Jump ,并解压,将zjgame.html重命名为index.html
复制粘贴下面的 package.jsonmain.js文件,最终目录如图
在这里插入图片描述
在package.json中:

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

在main.js中

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

在项目目录下运行

electron .

在这里插入图片描述

4、electron-packager打包为.exe

(1)全局安装electron-packager
npm install electron-packager -g
(2)运行打包命令
electron-packager . YOU_JUMP_I_JUMP --win --out outApp --arch=x64 --app-version 1.0.0 --electron-version 5.0.0 --overwrite --ignore=node_modules

在这里插入图片描述
outApp\YOU_JUMP_I_JUMP-win32-x64\文件夹下生成可执行文件YOU_JUMP_I_JUMP.exe
在这里插入图片描述

5、源码加密

YOU_JUMP_I_JUMP-win32-x64\resources\app里有写的源码。写的代码完全暴露在用户电脑上是非常不安全的,可以通过electron 自带的加密功能解决这个问题。
在这里插入图片描述

(1)全局安装 asar
npm install asar -g
(2)使用asar指令进行加密

resources目录下使用asar指令进行加密

asar pack ./app app.asar

在这里插入图片描述
将原来的app文件夹删除,这样生成的app.asar就加密了之前的源代码
双击YOU_JUMP_I_JUMP.exe运行

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值