登录  /  注册
首页 > web前端 > js教程 > 正文

搭建简单的游戏管理系统

php中世界最好的语言
发布: 2018-05-24 13:52:37
原创
3946人浏览过

这次给大家带来搭建简单的游戏管理系统,搭建简单游戏管理系统的注意事项有哪些,下面就是实战案例,一起来看一下。

一. 分析&布局设计

当前我们项目的界面是这样的:
当前项目界面

简单来说,看不出一点管理系统的样子,到Axure中文网找了一下,管理类网站的原型应该是下面这个样子的:
管理系统原型

照着撸一个呗,管理系统界面一般由顶部导航&状态栏、左侧导航栏、右侧内容区域三个部分组成,也就是这样的:
基础页面布局

我们网站内容较少所以顶部无需导航栏,也就是顶部只需保留左侧标题和右侧状态部分,接着再填充一下界面,顶部左侧加入系统名称和logo,顶部右侧加入用户名,左侧导航栏填充入导航项,右侧内容栏根据左侧选中的导航项显示对应的内容:
填充后页面界面

填充完布局之后好像变得能看了一些,那我们就根据效果图来完成这个界面。

二. 技术选型

借助框架能够快速实现整体样式,选用最通用的样式框架Bootstrap3来协助完成界面,但是如果想要引入Bootstrap3控件的话需要引入jQuery,这是我们不想要的。

这时候我们可以考虑使用和Angular项目的相性最佳的angular-ui-bootstrap来取代Bootstrap3的控件,angular-ui-bootstrap是AngularUI团队在Bootstrap基础上用AngularJS实现的一组UI控件,在达到和Bootstrap控件相同效果的情况下还无需引入jQuery简直棒。

于是我们简单选定了Bootstrap + angular-ui-bootstrap组合来加速界面开发。

三. 开发

3.1 安装

3.1.1 angular-ui-bootstrap安装

参考angular-ui-bootstrap文档-Dependencies,了解到其版本的选择与Angular的版本有对应关系,不过我们用的是AngularJS1.6.10版本所以可以直接安装最新的angular-ui-bootstrap:

yarn add angular-ui-bootstrap --save
登录后复制

由于上面的文档还提到angular-ui-bootstrap需要Angular-animate、Angular-touch、Bootstrap CSS,直接安装yarn安装顺便更新一下angular到1.7.0:

yarn add angular --save
yarn add angular-animate --save
yarn add angular-touch --save
yarn add bootstrap@3 --save
登录后复制

在app.js中加入引用并为'pokemon-app'模块加入依赖(暂时不加入Bootstrap3样式):

import ngAnimate from 'angular-animate';
import ngTouch from 'angular-touch';
import uibootstrap from 'angular-ui-bootstrap';
...
angular.module('pokemon-app', [
    ...
    ngAnimate,
    ngTouch,
    ngUIBootstrap
    ...
])
登录后复制

在index.tpl.html中加入一段文档中的测试代码:

<h4>Single toggle</h4>
<pre class="brush:php;toolbar:false">{{singleModel}}
登录后复制

接着在app.js中的AppController中加入:

$scope.singleModel = 1;
登录后复制

结果如下:
angular-ui-bootstrap测试

中间多出了一个button并且可以通过点击修改数字,这表示angular-ui-bootstrap已经安装成功了~

3.1.2 Bootstrap3配置

接下来我们为项目加入Bootstrap.css,CSS可以通过Webpack打包然后在项目入口文件app.js中加载,这里我们要用到css-loader、style-loader、file-loader(加载字体,如果没有这个loader字体会加载失败):

yarn add css-loader style-loader file-loader --save-dev
登录后复制

修改webpack.config.js的module如下:

  module: {
    rules: [{
      test: /\.html$/,
      loader: 'raw-loader'
    }, {        // 负责css模块加载
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }, {
      test: /\.(woff|woff2|eot|ttf|svg)$/,
      use: ['file-loader']
    }]
  },
登录后复制

app.js中引入

import 'bootstrap/dist/css/bootstrap.min.css';
登录后复制

现在查看自动重载之后的页面,你会发现熟悉的Bootstrap页面样式终于出现了:
Bootstrap测试

3.2 界面开发

首先去掉上面添加的angular-ui-bootstrap测试代码,然后开始界面开发:

3.2.1 顶部状态栏

顶部栏使用navbar样式编写,去掉原来的h1标签然后左边填充icon和系统名右边填充用户名,编写代码如下(图源来自神奇宝贝百科,承诺不用于商业用途):

<nav>
  <p>
    </p>
<p>
      <a>
        <img  alt="搭建简单的游戏管理系统" >
      </a>
      <a>口袋妖怪管理系统v0.0.1</a>
    </p>
    <p>
      </p>
<ul>
        <li><a>Nodreame</a></li>
      </ul>
    
  
</nav>
登录后复制

效果如下:
完成顶部栏

为了防止链接丢失导致图片加载失败,把图片下载下来放在本地assert/img文件夹下,命名为spriteball-common.png。按照Webpack模块化规则,图片也应该作为一个模块来加载,于是参考文档url-loader,在webpack.config.js文件的module中加入:

{
  test: /\.(png|svg|jpg|gif)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192,
        fallback: 'file-loader'
      }
    }
  ]
}
登录后复制

用url-loader作为小于8192byte图片的加载器,如果符合条件图片链接将会转为一个DataURL,如果超过改限制,将会默认使用file-loader作为图片的加载器,修改后重新编译通过.

现在继续修改index.tpl.html中图片位置的a标签,加入id="icon"并屏蔽原来图片:

<a>
  <!-- <img width="20"    style="max-width:90%" src="http://s1.52poke.wiki/wiki/5/5e/Bag_%E7%B2%BE%E7%81%B5%E7%90%83_Sprite.png" alt=""> -->
  <!-- <img src="../assert/img/spriteball-common.png" alt=""> -->
</a>
登录后复制

在app.js中引入图片,并通过DOM操作把图片插入页面:

import icon from '../assert/img/spriteball-common.png'
...
  function AppController ($scope) {
    // $scope.singleModel = 1;
    var sysIcon = new Image();
    sysIcon.src = icon;
    sysIcon.width = 20;
    sysIcon.height = 20;
    document.getElementById('icon').appendChild(sysIcon);
  }
登录后复制

重新编译,在浏览器元素检测中看到图片已成功插入页面并以DataURL形式被引用:
DataURL

顶部栏基本编写完成~

3.2.2 左侧导航栏 & 右侧内容区域

顶部栏完成之后,左右将分成两部分,这里的页面布局划分Bootstrap3似乎没有提供响应的样式,不过在Bootstrap的官网样例中我们找到了类似的Dashboard,他提供了一个现成的dashboard.css我们可以直接用起来,将dashboard.css放到assert/css文件夹下,并在app.js中引用:

import '../assert/css/dashboard.css'
登录后复制

然后开始跟随Demo简单布局:

<p>
  </p><p>
    </p><p>sidebar</p>
    <p>main</p>
  
登录后复制

很简单就完成了页面布局划分(这里左侧导航栏在小于768px时将自动隐藏):
图片描述

然后继续编写左侧导航栏:

<p>
  </p>
登录后复制

左侧导航栏

简单的左侧导航栏已经基本完成,并且点击能够看到内容切换,现在我们将被部分遮蔽的内容移动到右侧内容区域:

<p>
  </p>

登录后复制

简单移动完成页面:
基础页面完成

基础页面完成之后,看看内容样式还是比较丑,跟随dashboard例子和Bootstrap修改其样式,对图鉴页(原来的口袋妖怪详情页)进行修改:

pm-list.html

图鉴

<p>   </p>
登录后复制
                                                                                                                                                              
NO.名称数量重量总计操作
{{pokemon.no}}{{pokemon.name}}{{pokemon.weight}}{{pokemon.weight * pokemon.count}}
pm-detail.html
<p>
  <a>
    <span></span>返回图鉴列表
  </a>
</p>
<h2><b>{{pokemon.name}}</b></h2>
<img  alt="搭建简单的游戏管理系统" ><p><b>编号: </b>no.{{pokemon.no}}</p>
<p><b>体重: </b>{{pokemon.weight}}</p>
<p><b>属性: </b>{{pokemon.property}}</p>
<p><b>种类: </b>{{pokemon.type}}</p>
<p>
  <b>特性: </b>
  </p>
登录后复制
        
  • 普通特性: {{pokemon.character.common}}
  •     
  • 隐藏特性: {{pokemon.character.conceal}}
  •   

  其他形象:
  

    搭建简单的游戏管理系统     

{{form.name}}

     

上面代码中,pm-list修改了标题和表格样式,pm-detail修改了返回样式并稍微修缮了布局,修改结果如下:
图鉴界面
详情界面

其他界面也进行类似的修改,结果如下:
修改后效果展示

至此基本网站布局已完成。

3.3 操作体验升级

现在网站布局和样式得到了优化,但是一些细节暂时还没处理好,列出一些比较直观能看到的不足:

  • 左侧导航栏交互缺乏选中感

  • 删除按钮没有二次确认容易导致误删

现在我们就来完善这些细节。

3.3.1 左侧导航栏交互

dashboard.css已经帮我们写好了选中左侧导航栏某项之后变蓝底白字的样式,只需要简单在选中项的

  • 元素上加上class="active"就行,但是如果用DOM操作来做这个交互就很繁琐,所以考虑通过监听页面当前url来改变
  • 元素的class,监听页面url当然是使用AngularJS的&dollar;location服务,该服务中有一个广播&dollar;locationChangeSuccess,在每次url改变之后都会广播事件,这里我们用它来修改全局对象nowUrl,我们在app.js中加入run:
      .run(['$rootScope', '$location', function ($rootScope, $location) {
        $rootScope.$on('$locationChangeSuccess', function () {
          $rootScope.nowUrl = $location.url();
          console.log('nowUrl:', $rootScope.nowUrl);
          // console.log('$route,routes.null.redirectTo:', $route.routes.null.redirectTo);
        });
      }])
    登录后复制

    监听页面切换的日志结果如下:
    获取nowUrl

    ke'yi看到获取到的nowUrl都是http://localhost:8080/#!后面的部分,那么了解到这点之后我们就可以尝试在index.tpl.html中借助ng-class指令来完成"根据当前url选中对应导航项"的操作了,修改index.tpl.html中

      元素部分如下:
    登录后复制

    左侧导航栏选中效果展示

    3.3.2 删除二次确认

    为了达到二次确认删除的效果,我们可以使用angular-ui-bootstrap提供的模态框Modal,参考Modal.
    首先我们在src目录下新建文件夹common来存放通用的html模板,新建文件deleteDialog.tpl.html作为模态框的模板文件:

    <p>
      </p>

    {{modalTitle}}

      {{modalBody}}

             

    登录后复制

    接下来就可以编写触发模态框的逻辑了,模仿文档修改pokemon.js中PMListController如下:

    PMListController.$inject = ['$scope', '$uibModal'];
    function PMListController ($scope, $uibModal) {
      $scope.pokemons = pokemons;
      console.log($scope.pokemons);
      $scope.remove = function (index) {
        console.log('index:', index);
        var modalInstance = $uibModal.open({
          animation: true,
          ariaLabelledBy: 'modal-title',
          ariaDescribedBy: 'modal-body',
          template: delDiage,
          controller: 'DeleteInstanceController',
          resolve: {
            pokemon: function () {
              return $scope.pokemons[index];
            }
          }
        });
        modalInstance.result.then(function (content) {
          console.log('Delete!', content);
          $scope.pokemons.splice(index, 1);   
        }, function (content) {
          console.log('Cancel!', content);
        });
      };
    }
    登录后复制

    上面我们做了两处修改:

    1. 为PMListController加入了依赖$uibModal,用以调用模态框;
    2. 修改remove方法,使用$uibModal.open()创建模态框实例,并用实例编写模态框关闭的promise,关闭时选择close或cancel将触发不同事件。
    登录后复制

    完成了模态框触发逻辑编写之后,我们开始编写模态框的逻辑:

    DeleteInstanceController.$inject = ['$scope', '$uibModalInstance', 'pokemon'];
    function DeleteInstanceController ($scope, $uibModalInstance, pokemon) {
      // console.log('thisIndex:', thisIndex);
      console.log('pokemon:', pokemon);
      $scope.modalTitle = '删除';
      $scope.modalBody  = '是否删除' + pokemon.name + '的数据';
      $scope.ok = function () {
        console.log('delete!');
        $uibModalInstance.close(pokemon);
      };
      $scope.cancel = function () {
        console.log('cancel!');
        $uibModalInstance.dismiss('cancel');
      };
    }
    登录后复制

    这里加入了$uibModalInstance和pokemon依赖,$uibModalInstance代表当前模态框对象,pokemon是$uibModal.open()配置中resolve传递过来的数据。在该controller中完成模态框的内容编写以及两个button触发的事件。接下来我们把这个controller加入module:

    export default angular.module('pokemon-app.pokemon', [ngRoute])
        .config(['$routeProvider', function ($routeProvider) {
          $routeProvider
            .when('/pokemons', {
              template: pmlist,
              controller: 'PMListController'
            })
            .when ('/pokemon/:no', {
              template: pmdetail,
              controller: 'PMDetailController'
            })
        }])
        .controller('PMListController', PMListController)
        .controller('PMDetailController', PMDetailController)
        .controller('DeleteInstanceController', DeleteInstanceController)
        .name;
    登录后复制

    倒数第二行就是新加入module的controller,pm-list.html不用作任何修改,保存等待自动编译重载。
    模态框效果展示

    至此,系统的操作体验升级已经基本完成,为了系统体验同步,我们需要把模态框的效果也应用到其他的界面上。

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    JS中的JSON和Math使用案例分析

    react实现选中li高亮步骤详解

  • 以上就是搭建简单的游戏管理系统的详细内容,更多请关注php中文网其它相关文章!

    智能AI问答
    PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号