目录
引入three.js
- 新建项目(game.js、game.json、project.config.json)
game.json:(设置竖屏)
{
"deviceOrientation": "portrait"
}
- 下载weapp-adapter包,编译npm run build 得到dist/weapp-adapter.js
- 在game.js加载lib/three.js、weapp-adater.js
game.js
/* 小游戏入口文件*/
import adapter from './libs/weapp-adapter.js'//操作BOM、DOM结点
import * as THREE from './libs/three.js'//引入three
MVP基础项目搭建
game.js
/* 小游戏入口文件*/
import adapter from './libs/weapp-adapter.js'//操作BOM、DOM结点
import main from './src/main.js'
main.init()//初始化
main.js
import * as THREE from '../libs/three.js'//引入three
window.THREE = THREE//在window下加载three
class Main{//声明main类
constructor (){
}
init (){
}
}
export default new Main()
截图
MVC框架pages页面搭建
- Src/pages/game-page.js
export default class GamePage{
constructor(callbacks){
this.callbacks = callbacks
}
init(){
console.log('game page init')
}
restart(){
console.log('game page restart')
}
}
2.src/pages/game-over-page.js
export default class GamePage{
constructor(callbacks){
this.callbacks = callbacks
}
init(){
console.log('gameover page init')
}
show(){
console.log('gameover page show')
}
}
3.src/game/view.js
import GamePage from '../pages/game-page'
import GameOverPage from '../pages/game-over-page'
class GameView{
constructor (){
}
showGameOverPage(){
this.gameOverPage.show()
}
restartGame(){
this.gamePage.restart()
}
initGameOverPage(callbacks){
this.gameOverPage = new GameOverPage(callbacks)
this.gameOverPage.init()
}
initGamePage(callbacks){
this.gamePage = new GamePage(callbacks)
this.gamePage.init()
}
}
export default new GameView()
4.src/game/controller.js
import gameView from './view'
import gameModel from './model'
class GameController{
constructor (){//初始化构造
this.gameView = gameView
this.gameModel = gameModel
}
showGameOverPage = () => {
this.gameView.showGameOverPage()
}
restratGame = () => {
this.gameView.restratGame()
}
initPages(){
const gamePageCallbacks = {
showGameOverPage: this.showGameOverPage
}
const gameOverPageCallbacks = {
gameRestart: this.restratGame
}
this.gameView.initGamePage(gamePageCallbacks)
this.gameView.initGameOverPage(gameOverPageCallbacks)
}
}
export default new GameController()
5.src/game/game.js
//游戏入口文件
import gameController from './controller'
class Game{
constructor(){
this.gameController = gameController
}
init (){
this.gameController.initPages()
}
}
export default new Game()
6.src/utils/event.js
class Event {//维护callback
constructor (sender){
this._sender = sender
this._listeners = []
}
attach (callback){
this._listeners.push(callback)
}
notify(args){//遍历回调
for (let i = 0; i < this._listeners.length; i++) {
this._listeners[i](sender,args)
}
}
}
export default Event