基于HTML5的跨平台游戏设计与实现

本文通过HTML5（后文简写为H5）小游戏开发的基本过程与方法，说明H5和java script（后文简写为JS）在跨平台方面的简单和便捷性。文中基于H5 + JS技术的游戏可以在PC，平板，智能手机端多平台运行。通过H5的新增的canvas标签实现游戏显示，通过JS操作canvas标签上下文可以实现游戏的绘制。游戏通过对鼠标位置或触摸位置的追踪实现对玩家对象的控制，敌人AI策略由JS编写实现，游戏代码在开源IDE vscode上编写，在chrome浏览器进行游戏运行和测试，最后，通过在不同平台的浏览器上运行测试，修改兼容性以达到一次编写，到处运行的跨平台效果。

一、开发工具

工欲善其事，必先利其器。如今已经是2019年，曾经的网页三剑客（Dreamweaver、Adobe Flash、Adobe Fireworks）已英雄迟暮。本次H5游戏开发属于轻量级项目，采用微软最新开源的代码编辑器Visual Studio Code（后文简写为vscode）。轻量，智能，开箱即用，扩展方便。

游戏的运行工具我们使用对前端新技术支持最好的Chrome浏览器。

二、游戏项目结构

Index.html用于承载游戏画面主体，载入游戏交互控制逻辑game.js和pressKey.js文件。

Game.js实现具体的游戏逻辑，包括绘制，AI，规则的处理。

PressKey.js实现玩家交互的控制逻辑。

三、页面布局调整和信息定义

打开vscode编辑器，新建一个index.html文件，输入!号再按下tab一个H5模块就建立好了。用于承载游戏主体。由于浏览器有一些默认的css属性，所以我们需要重置一下css：* {margin: 0;border: 0;padding: 0;overflow: hidden;}，并且给屏幕背景设置为黑色有点透明的状态：body{ background-color: rgba(0,0,0,0.8);}。H5提供了强大的自适应多平台的标签标记：<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=0.5, maximum-scale=1.0, minimum-scale=0.5">，以此设置在不同设别的像素清晰度。

向html文件的<body>标签插入<canvas id="game" onresize="View.resize"></canvas>标签，作为游戏的绘制画板。

现在，我们在vscode安装一个open in browser的插件，就可以直接在新建的index.html上右键选择打开默认浏览器。一个黑漆漆的游戏窗口展示到浏览器。

四、JS代码实现游戏逻辑

（一）实体实现

游戏的架构一般是ECS（Entity实体，Component组件，System系统）模式，并且再辅以OOP（面向对象模式），可以很方便的构建出游戏世界。

创建一个Entity类，作为游戏对象的基础类，设置size属性为对象大小，name属性为对象名字，用来区分不同实体对象。position:{x,y}属性为对象在窗口的坐标位置，velocity:{x:0,y:1}为向量决定该元素的移动距离和方位。现在我们还需要设置一个类方法update()来通过游戏的每帧都执行不断让position加上 velocity进行对象在游戏世界里拟真物理运动。运动和属性设置完毕，我们还需要设置类方法render()将对象绘制到游戏窗口上，向玩家展示游戏内容。

基础类实现后，就可以通过class Player extends Entity{}继承实体，将name分别设置“Player ”，“Enemy”，“Bullet”，“Particle”，完成游戏中玩家，敌人，子弹，粒子等对象的实现。这样，基本的游戏对象准备完毕。剩下的工作就是在游戏循环逻辑里不断的操作这些游戏对象，让游戏可以玩起来。

（二）游戏画面自适应屏幕

首页上一页 1 2 3 下一页尾页 1/3/3

基于HTML5的跨平台游戏设计与实现(一)