寿司快卖,创建一个运行在电脑，手机及Pad上的多屏游戏
2018-10-10 本文已影响10人
望月从良
本节开始，我们将设计一个养成类游戏。游戏主题是创建一家寿司店，你是主厨，当客户点餐后，你根据菜单配置寿司。我们会先把游戏设计成页面游戏，然后通过不断的调试，将游戏移植到手机以及各类Pad上。
该游戏设计的一个难点是自动适配屏幕，运行在浏览器上时，一般对应着电脑的大屏幕，当运行在手机或者Pad上时，屏幕会变小，因此我们在游戏代码设计时必须要考虑到这一点。
屏幕快照 2018-10-05 下午6.16.38.png
上图就是我们要设计的游戏界面效果，这次游戏设计我们将使用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>
完成上面代码后，基本场景的设置工作就可以完成了，运行程序，浏览器中会出现类似开头画面，在后续开发中，我们可以基于现在完成的框架代码上继续对游戏进行下一步的设计。
更多技术信息，包括操作系统，编译器，面试算法，机器学习，人工智能，请关照我的公众号：
