寿司快卖,创建一个运行在电脑,手机及Pad上的多屏游戏

本节开始,我们将设计一个养成类游戏。游戏主题是创建一家寿司店,你是主厨,当客户点餐后,你根据菜单配置寿司。我们会先把游戏设计成页面游戏,然后通过不断的调试,将游戏移植到手机以及各类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>

完成上面代码后,基本场景的设置工作就可以完成了,运行程序,浏览器中会出现类似开头画面,在后续开发中,我们可以基于现在完成的框架代码上继续对游戏进行下一步的设计。

原文发布于微信公众号 - Coding迪斯尼(gh_c9f933e7765d)

原文发表时间:2018-10-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏无原型不设计

简单易用的交互设计工具:摩客串串Chinco

今天给大家介绍一款简单实用的原型交互演示设计工具—摩客串串Chinco。 ? 为什么要介绍这款产品呢? Chinco是继国产原型设计软件Mockplus之...

3107
来自专栏Material Design组件

Human Interface Guidelines —— 状态栏(Status Bars)

2886
来自专栏IMWeb前端团队

全响应式web前端开发

本文作者:IMWeb Terrance 原文出处:IMWeb社区 未经同意,禁止转载 ? Responsive web design (RWD) i...

2977
来自专栏Nian糕的私人厨房

Vue2.0 数据抓取及Swiper组件开发

本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点...

1104
来自专栏花叔的专栏

解读小程序最新开发能力,官方只说了部分

微信7月11日发布了一大堆小程序新特性,而官方发文只提了其中几个点,今天为大家详细解读一下,主要涵盖以下内容:(注.这不是热更新,这是需要更新微信到1.4.0版...

3857
来自专栏拂晓风起

HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画

6375
来自专栏数据小魔方

Xcelsius(水晶易表)系列15——动态交互地图的案例

今天接着上一篇继续跟大家分享关于水晶易表动态交互地图的案例操作。 之前曾说过,数据地图作为一种特殊的统计图,在水晶易表中具有与其他普通统计图一样的钻取、动态可见...

3528
来自专栏V站

WordPress丨极简风清新响应式开源主题丨FLY主题

很高兴带来一款动漫风格的WordPress主题,FLY主题,是博客+CMS杂志式的设计风格,在博客与CMS之间,你不但可以选择其中一个,并且还可以同时拥有俩种风...

2.6K4
来自专栏HTML5学堂

聊一聊“@font-face”

在@font-face处理兼容中出现了一个#iefix这个东东?到底是神马东西呢? 案例: ? 首先先了解关于@font-face的基本知识 1、@font-...

3095
来自专栏无原型不设计

UI设计规范:单选按钮 vs 复选框,没那么简单

无论是网页设计,还是移动app设计,都经常用到单选按钮和复选框这两个组件。这两个组件看似意义明确,很好区分,但在实际设计中却很容易用错,带来不好的用户体验。 ...

2963

扫码关注云+社区

领取腾讯云代金券