壽司快賣,建立一個執行在電腦，手機及Pad上的多屏遊戲
阿新 • • 發佈：2018-11-13
本節開始，我們將設計一個養成類遊戲。遊戲主題是建立一家壽司店，你是主廚，當客戶點餐後，你根據選單配置壽司。我們會先把遊戲設計成頁面遊戲，然後通過不斷的除錯，將遊戲移植到手機以及各類Pad上。
該遊戲設計的一個難點是自動適配螢幕，執行在瀏覽器上時，一般對應著電腦的大螢幕，當執行在手機或者Pad上時，螢幕會變小，因此我們在遊戲程式碼設計時必須要考慮到這一點。
上圖就是我們要設計的遊戲介面效果，這次遊戲設計我們將使用MVC模式，將資料，介面分離開來，同時使用CSS提供的相應功能，我們可以實現遊戲介面對執行裝置螢幕的自適應調整。按照老樣子，我們先搭建遊戲的基本框架。首先我們先建立一個VUE專案，這次我們需要使用到一個庫叫SouundJS，用來產生聲音特效，現在專案根目錄中的index.html將所需要使用的庫引入：
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <script type="text/javascript" src="./static/tweenjs-0.5.1.min.js"></script> <script type="text/javascript" src="./static/easeljs-0.7.1.min.js"></script> <script type="text/javascript" src="./static/movieclip-0.7.1.min.js"></script> <script type="text/javascript" src="./static/preloadjs-0.4.1.min.js"></script> <script type="text/javascript" src="./static/soundjs-0.52.js"> </script> <script type="text/javascript"> window.createjs = createjs window.assetsLib = lib </script> <title>ShusiShop</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
遊戲的主介面將根據螢幕的大小動態調整，當螢幕足夠大時，我們將介面所有的元件從左往右全部顯示出來，如果是在手機等小螢幕上，那麼我們會把主介面放在正中間，其他附帶元件放置在下方，或者需要時在彈出來。接下來我們先構造主介面佈局，在src/component/目錄下建立一個gamecontainer.vue檔案，然後新增如下內容：
<template> <div> <game-scene></game-scene> </div> </template> <script> import GameScene from './GameSceneComponent' export default { components: { GameScene } } </script> <style scoped> </style>
上面的GameContainer元件負責載入實現遊戲主邏輯的GameSceneComponent元件，起到一個過度作用，在App.vue中做修改，將上面的元件引入：
<template>
<div id="app">
<game-container></game-container>
</div>
</template>
<script>
import GameContainer from './components/gamecontainer'
export default {
name: 'app',
components: {
GameContainer
}
}
</script>
接著我們在本地目錄建立一個gamescenecomponent.vue文字負責遊戲主邏輯設計，首先是介面設定程式碼：
<template>
<div id="game">
<div id="status-bar">$23,000</div>
<div id="customer-view">
<canvas id="canvas" width ="100" height="100">
</canvas>
</div>
<div id="dishes"></div>
<div id="sushi-area">
<div id="ingredients">
<div class="ingredient" data-type="reice">10</div>
<div class="ingredient" data-type="salmon-roe">10</div>
<div class="ingredient" data-type="seaweed">10</div>
<div class="ingredient" data-type="egg">10</div>
<div id="phone"></div>
</div>
<div id="sushi-board">
<a id="delete-sushi-btn">Delete</a>
<div id="others"></div>
<div id="rices"></div>
<div id="seaweeds"><div>
</div>
</div>
<div id="recipes">
<h1>Sushi Recipes</h1>
<p><img src="./static/images/recipe.png"></p>
</div>
<div id="help">
<h2>About this game</h2>
<h2>How to play</h2>
<p>Select ingredients based on the recipes</p>
<p>Click on customer to serve the dish to him.</p>
</div>
</div>
</template>
上面程式碼先完成了介面的元件佈局，接下來我們新增CSS程式碼，它涉及到螢幕的適配功能：
<style scoped>
#game {
width: 100%;
float: left;
}
#recipes {
float: right;
width: 100%;
background: #ACACAC;
}
#status-bar {
background: #D8D8D8;
border-bottom: 1px solid #979797;
width: 100%;
height: 25px;
line-height: 25px;
text-align: center;
}
#customer-view {
width: 100%;
height: 300px;
}
#sushi-area {
background: #9D7335;
width: 100%;
height: 250px;
}
#sushi-board {
background: #913030;
border: 1px solid #979797;
width: 50%;
height: 90%;
float: right;
}
#ingredients {
width: 50%;
height: 100%;
float: left;
padding: 10px;
overflow: auto;
}
.ingredient {
width: 33%;
height: 33%;
background: #D8D8D8;
border: 1px solid #979797;
float: left;
}
#phone {
width: 100%;
height: 20%;
background: #D8D8D8;
float: left;
}
/*為手機螢幕做調節*/
@media screen and (max-width: 500px) {
#ingredients {
width: 70%;
}
#sushi-board {
width: 30%;
}
}
/*手機橫屏時做相應調節*/
@media screen and (max-device-width: 550px) and (orientation: landscape) {
#status-bar {
float: left;
width: auto;
padding-left: 3px;
padding-right: 3px;
border-right: 1px solid #979797;
}
#customer-view {
height: 100px;
}
#sushi-area {
height: 200px
}
}
/*為Pad類裝置做調節*/
@media screen and (min-width: 800px) {
#game {
width: 60%;
}
#recipes {
width: 40%;
}
}
</style>
上面程式碼中注意@media這樣的指令，它指導程式根據執行裝置的螢幕大小收縮相應頁面元件的大小和佈置方式。完成了介面佈置和適配工作後，我們可以進入到元件邏輯的開發中，首先對元件進行初始化工作，新增程式碼如下：
<script>
export default {
data () {
return {
canvas: null
}
},
mounted () {
this.init()
},
methods: {
init () {
this.initCustomerView()
this.initDOMElements()
this.initResizeHandler()
},
resizeCanvas () {
var customerView = document.getElementById('customer-view')
this.canvas = document.getElementById('canvas')
this.canvas.width = customerView.offsetWidth
this.canvas.height = customerView.offsetHeight
},
repositionCustomer () {
// todo
},
initResizeHandler () {
window.onresize = function () {
this.resizeCanvas()
this.repositionCustomer()
}.bind(this)
this.repositionCustomer()
},
initDOMElements () {
// ToDo
},
initCustomerView () {
// ToDo
}
}
}
</script>
完成上面程式碼後，基本場景的設定工作就可以完成了，執行程式，瀏覽器中會出現類似開頭畫面，在後續開發中，我們可以基於現在完成的框架程式碼上繼續對遊戲進行下一步的設計。
更多技術資訊，包括作業系統，編譯器，面試演算法，機器學習，人工智慧，請關照我的公眾號：