10月29, 2018

用three.js模仿微信小游戏跳一跳 -- 第四章

MVC (Model View Controler)本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器。使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式。比如一批统计数据你可以分别用柱状图、饼图来表示。C存在的目的则是确保M和V的同步,一旦M改变,V应该同步更新。

MVC 基础搭建

  1. 在 src 文件夹下创建 game 文件夹,然后在里面创建一个 game.js、model.js、controller.js、view.js 文件。

在 controller.js 中 创建控制类

在此文件中引入 view.js 和 model.js ,将它们挂载到 controller下面, 用来控制它们的显示和数据的改动,在文件中定义一个初始化页面的方法,方便以后驱动展示这些页面

import gameView from './view'
import gameModel from './model'

class GameController {
  constructor() {
    this.gameView = gameView
    this.gameModel = gameModel
  }

  initPages() {
    const gamePageCallbacks = {

    }
    this.gameView.initGamePage(gamePageCallbacks)
  }
}

export default new GameController()

在 view.js 中创建 视图 类

这个文件就是主要负责视图的展示渲染,首先在 pages 文件夹中创建两个页面,一个是 game-page.js , 一个是 game-over-page.js 用来展示游戏界面和游戏结束界面,并将着两个文件引入进去,初始化这两个页面,传入回调函数方便以后通过这个函数传递给控制层进行一些数据的改变

import GamePage from '../pages/game-page'
import GameOverPage from '../pages/game-over-page'

class GameView {
  constructor() {

  }

  initGamePage(callbacks) {
    this.gamePage = new GamePage(callbacks)
    this.gamePage.init()
  }

  initGameOverPage(callbacks) {
    this.gameOverPage = new GameOverPage(callbacks)
  }
}

export default new GameView()

game-page.js 逻辑代码

export default class GamePage {
  constructor(callbacks) {
    this.callbacks = callbacks
  }

  init() {
    console.log('game page init')
  }
}

在 game.js 中创建 Game 类

import gameController from './controller'

class Game {
  constructor() {
    this.gameController = gameController
  }

  init() {
    this.gameController.initPages()
  }
}

export default new Game()
  1. 编辑 src/main.js 将 game.js 并执行 init 方法 alt

本文链接:http://www.laijianlou.top/post/threejs-04.html

-- EOF --

Comments