如何开发一个简单的html5小游戏

发布网友 发布时间：2022-04-21 05:02

我来回答

共4个回答

懂视网 时间：2022-04-20 06:29

一年多前见过一个多人聊天室应用，是张丹老师写的一个 socket.io 教程 （原链接点不开，贴一个转帖的），觉得socket这个东西很神奇。后来研究生期间的一个项目也用到了.Net的socket，多个客户端之间的通信， 觉得很有意思，也是那一次比较全面地认识和应用了事件委托等等一些概念。最近受群里研究mapbox的热情和@扯淡大叔， @老羽 @F3earth 所有成员的帮助和启发， 突发奇想花了点时间基于mapbox gl js和socket.io做了一个 飞机大战游戏！，虽然功能界面很简陋。而且代码也比较原始，还没有好好重构。但是基本有了个架子，简单记下来分析下。如果对源码感兴趣或者想参与开发和优化工作，请访问git仓库: Jqmap2

整体架构

简单来说，整个游戏的设计思路就是：

服务器从启动开始就监听任何客户端发来了websocket 连接请求，有了连接（connection事件）后，就把客户端初次发来的用户名称、当前飞机的坐标、朝向作为一个client 加入客户端数据池（目前简单处理为clients数组）中。那么至此一个客户端的数据就同步到了服务器端。

以后这个客户端的飞机坐标、朝向等信息也定时发送（socket.send）给服务器端，以便于服务器端同时广播（broadcast）给所有其他客户端。那么其实服务端就说清楚了，也就是负责中转消息，目的还是让所有客户端视野中的玩家飞机状态保持一致。

既然websocket是双向通信，客户端也需要定时发送消息给服务器端，并且更重要的是处理服务器端发来的各种消息（message事件），分辨哪些是欢迎用户上线的消息，普通的玩家位置同步消息，抑或是 A 击败了 B 这样的消息。

这一过程中前端和服务器保持着websocket 连接，并且不断在通信。相比传统的轮询和long poll，这样更加节省流量和性能。总体来说，游戏的逻辑是基于各种消息事件的，connection事件产生一个socket连接，socket连接会有message 事件等等。

后端websocket

废话说了这么多，简单看看一些关键代码如何实现。

// 后端关键流程实现

var app = express(),
 server = require('http').createServer(app),
 io = require('socket.io').listen(server); // 引入socket.io 库
io.on('connection', function(socket) { // 开始监听客户端的websocket连接请求，connection事件产生 socket 对象
 socket.emit('open'); // 向该客户端发送open事件.
 // init client drone obj for each connection !!
 var client = {
 name: false,
 color: getColor(),
 direction: 0,
 coordinates: [0, 0]
 }
 // message from client.
 socket.on('message', function(msg) {
 if (!client.name && msg.name) { // 如果是第一次连接，把用户的名字存储起来，并且广播给所有客户端。
  var obj = { }; // 构建发送给其他客户端的消息
  obj = msg;
  clients.push(client); // 加入后台维持的客户端数组
  socket.broadcast.emit('message', obj); // 广播欢迎语给其他客户端
 } else if ( client.name == msg.name ) { // 客户端发来的飞机状态消息
  // 广播给其他客户端
  socket.broadcast.emit('message', obj);
 }
 }
}

后台处理过程相对简单，基本只需接受某客户端发来的消息，转发给其他客户端即可( 随机敌机位置什么的就不讲了，当然后期要改成所有客户端共享一套敌机信息，这样就可以一起打同一个BOSS了)。但前端需要根据业务需求将服务器传来的消息分别处理

前端socket和飞机模型

前端业务相对复杂， 除了应对websocket 消息之外，需要构建一套飞机的数据模型，包括位置，速度，朝向，血量，武器装备等（可以非常复杂，目前就简单处理）。

var socket;
try {
 socket = io.connect("http://123.206.201.245:3002");
 socket.on('open', function(){ // 当服务端确认连接后，开始发送第一次数据。
 statusBar.innerText = "已经连上服务器..";
 var askName = prompt("来，取个名字", "");
 }
 socket.on("message", function(json) { // 其实收到的是js 对象，这一点很牛逼。因为双向通信过程中传递的是 Binary 形式的数据，不需要再次解析了。
 if (json.type === "welcome" && json.text.name) {
  // .. 显示其他用户登录消息
 } else if (json.type === "defeat") {
  // .. 在前端的敌机数据模型中移除空血槽的飞机
 } else if (drone && json.text.name != drone.name) {
  // .. 传来的其他客户端飞机消息
  featureCol.features.forEach(function(drone) {
  // featureCol 是所有敌机数据集合，根据用户名check是更新还是新增.
  }
 }
 }

其他问题包括：

飞机的数据涉及到随时变更上传服务器，以及渲染两个用处。渲染采用geojson对象 作为 mapbox api中source 的data，那么是否是一接到服务器端消息就去重绘所有飞机位置呢。这边通过setInterval 定时调用source 的 setData()方法，实现重绘。

飞机子弹的轨迹计算，涉及到用户按下空格键的瞬间飞机的位置和朝向，根据设定的子弹飞行时间做一个动画显示

子弹和敌机的碰撞检测，简化处理：设定一个常数作为飞机体积，在子弹飞行过程中实时计算子弹和敌机距离。在地图处于小比例尺下增大检测半径，地图处于大比例尺下相应减小检测半径。

目前可能子弹飞行过程中碰撞检测的计算量偏大，会有卡顿问题，CPU占用较高，整个应用消耗内存100~130Mb左右... 好多小问题不说了。。确实废了一些脑子。

挑一两点分析下，一个是子弹的飞行过程，一个是Robot敌机的随机行为控制

// setPostion is to update Mydrone position.
function setPosition() {
 // direction in Rad. Generally, 1 Rad stands for 100km
 var current_rotate = map.getBearing(); 
 if (!manual && Math.random() > 0.95) { // 这边有意思，在每秒50帧的情况下，不是每一帧都会随机微调飞机的方向。而是5%的概率。
 direction += (Math.random() - 0.5) /5;
 } 
 // 根据飞机朝向和速度更新位置。
 point.coordinates[0] += speed * Math.sin(direction) / 100;
 point.coordinates[1] += speed * Math.cos(direction) / 100;
 // 校正飞机的朝向显示。因为默认情况下mapbox是根据你的视角随时调整图标方向。但实际上飞机图标的朝向必须和飞机运行方向一致，而不是简单的和标注一样。
 current_rotate = (-current_rotate) + direction * (180 / Math.PI);
}

以下是子弹飞行的计算过程.

// start: fire location, target: bullet destination, duration: total animation time
function renderBulvar(start, target, direction, duration) {
 // target is geojson POINT, add Temp point in layer.. 
 var interval = 20, ratio = interval/duration, real_point = start, range = 0.4, count = 0, hitted = false;
 if (target.coordinates) {
 var targetSource = map.getSource('drone-target');
 window.setInterval(function(){
  if (count > duration/interval) { // 到达终点，不计算了
  } else {
  // 子弹每一帧跑一定比例的路程，最终到达指定终点
  real_point.coordinates[0] += Math.sin(direction)*ratio*range;
  real_point.coordinates[1] += Math.cos(direction)*ratio*range;
  targetSource.setData(real_point);
  if (!hitted){
   hitted = testCrash(real_point.coordinates); // 感觉这里的hitted 有问题.
  }
  count += 1;
  }
 }, interval);
 }

到这里其实基本介绍了这个游戏的制作过程，经历了一些不成熟的想法，总共花了近十个小时完成目前的开发。还没有严谨地考虑过代码结构和 函数复杂程序，特别是子弹飞行和碰撞等部分，碰撞到后就终结子弹飞行等等。各位如果感兴趣，愿意完成 To DO list中的事情或者有何建议，请访问git仓库: Jqmap2 。请各位大神多提修改意见！

喜欢的同学请关注、收藏相关专题，会不断更新文章。希望和大家分享！！

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费h5在线视频教程

3. php.cn原创html5视频教程

热心网友 时间：2022-04-20 03:37

创建画布
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

首先我们需要创建一张画布作为游戏的舞台。这里通过JS代码而不是直接在HTML里写一个<canvas>元素目的是要说明代码创建也是很方便的。有了画布后就可以获得它的上下文来进行绘图了。然后我们还设置了画布大小，最后将其添加到页面上。
准备图片
// 背景图片
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";

游戏嘛少不了图片的，所以我们先加载一些图片先。简便起见，这里仅创建简单的图片对象，而不是专门写一个类或者Helper来做图片加载。bgReady这个变量用来标识图片是否已经加载完成从而可以放心地使用了，因为如果在图片加载未完成情况下进行绘制是会报错的。
整个游戏中需要用到的三张图片：背景，英雄及怪物我们都用上面的方法来处理。
游戏对象
// 游戏对象
var hero = {
speed: 256, // 每秒移动的像素
x: 0,
y: 0
};
var monster = {
x: 0,
y: 0
};
var monstersCaught = 0;

现在定义一些对象将在后面用到。我们的英雄有一个speed属性用来控制他每秒移动多少像素。怪物游戏过程中不会移动，所以只有坐标属性就够了。monstersCaught则用来存储怪物被捉住的次数。
处理用户的输入
// 处理按键
var keysDown = {};

addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);

现在开始处理用户的输入(对初次接触游戏开发的前端同学来说，这部分开始可能就需要一些脑力了)。在前端开发中，一般是用户触发了点击事件然后才去执行动画或发起异步请求之类的，但这里我们希望游戏的逻辑能够更加紧凑同时又要及时响应输入。所以我们就把用户的输入先保存下来而不是立即响应。
为此，我们用keysDown这个对象来保存用户按下的键值(keyCode)，如果按下的键值在这个对象里，那么我们就做相应处理。
开始一轮游戏
// 当用户抓住一只怪物后开始新一轮游戏
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;

// 将新的怪物随机放置到界面上
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
};

reset方法用于开始新一轮和游戏，在这个方法里我们将英雄放回画布中心同时将怪物放到一个随机的地方。
更新对象
// 更新游戏对象的属性
var update = function (modifier) {
if (38 in keysDown) { // 用户按的是↑
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) { // 用户按的是↓
hero.y += hero.speed * modifier;
}
if (37 in keysDown) { // 用户按的是←
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) { // 用户按的是→
hero.x += hero.speed * modifier;
}

// 英雄与怪物碰到了么？
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
++monstersCaught;
reset();
}
};

这就是游戏中用于更新画面的update函数，会被规律地重复调用。首先它负责检查用户当前按住的是中方向键，然后将英雄往相应方向移动。
有点费脑力的或许是这个传入的modifier 变量。你可以在main 方法里看到它的来源，但这里还是有必要详细解释一下。它是基于1开始且随时间变化的一个因子。例如1秒过去了，它的值就是1，英雄的速度将会乘以1，也就是每秒移动256像素；如果半秒钟则它的值为0.5，英雄的速度就乘以0.5也就是说这半秒内英雄以正常速度一半的速度移动。理论上说因为这个update 方法被调用的非常快且频繁，所以modifier的值会很小，但有了这一因子后，不管我们的代码跑得快慢，都能够保证英雄的移动速度是恒定的。
现在英雄的移动已经是基于用户的输入了，接下来该检查移动过程中所触发的事件了，也就是英雄与怪物相遇。这就是本游戏的胜利点，monstersCaught +1然后重新开始新一轮。
渲染物体
// 画出所有物体
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}

if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}

if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}

// 计分
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Monsterrs caught: " + monstersCaught, 32, 32);
};

之前的工作都是枯燥的，直到你把所有东西画出来之后。首先当然是把背景图画出来。然后如法炮制将英雄和怪物也画出来。这个过程中的顺序是有讲究的，因为后画的物体会覆盖之前的物体。
这之后我们改变了一下Canvas的绘图上下文的样式并调用fillText来绘制文字，也就是记分板那一部分。本游戏没有其他复杂的动画效果和打斗场面，绘制部分大功告成！
主循环函数
// 游戏主函数
var main = function () {
var now = Date.now();
var delta = now - then;

update(delta / 1000);
render();

then = now;

// 立即调用主函数
requestAnimationFrame(main);
};

上面的主函数控制了整个游戏的流程。先是拿到当前的时间用来计算时间差（距离上次主函数被调用时过了多少毫秒）。得到modifier后除以1000(也就是1秒中的毫秒数)再传入update函数。最后调用render 函数并且将本次的时间保存下来。
关于游戏中循环更新画面的讨论可参见「Onslaught! Arena Case Study」。
关于循环的进一步解释
// requestAnimationFrame 的浏览器兼容性处理
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

如果你不是完全理解上面的代码也没关系，我只是觉得拿出来解释一下总是极好的
为了循环地调用main函数，本游戏之前用的是setInterval。但现今已经有了更好的方法那就是requestAnimationFrame。使用新方法就不得不考虑浏览器兼容性。上面的垫片就是出于这样的考虑，它是Paul Irish 博客原版的一个简化版本。
启动游戏！
// 少年，开始游戏吧！
var then = Date.now();
reset();
main();

总算完成了，这是本游戏最后一段代码了。先是设置一个初始的时间变量then用于首先运行main函数使用。然后调用 reset 函数来开始新一轮游戏（如果你还记得的话，这个函数的作用是将英雄放到画面中间同时将怪物放到随机的地方以方便英雄去捉它）。
到此，相信你已经掌握了开发一个简单H5小游戏需要的基本功了。玩玩这个游戏或者下载代码自己研究研究吧 :)

Feel free to repost but keep the link to this page please!

热心网友 时间：2022-04-20 04:55

首先我们需要创建一张画布作为游戏的舞台。这里通过JS代码而不是直接在HTML里写一个<canvas>元素目的是要说明代码创建也是很方便的。有了画布后就可以获得它的上下文来进行绘图了。然后我们还设置了画布大小，最后将其添加到页面上。 准备图片 // 背景图片 var bgReady = false; var bgImage = new Image(); bgImage.onload = function () { bgReady = true; }; bgImage.src = "images/background.png"; 游戏嘛少不了图片的，所以我们先加载一些图片先。简便起见，这里仅创建简单的图片对象，而不是专门写一个类或者Helper来做图片加载。bgReady这个变量用来标识图片是否已经加载完成从而可以放心地使用了，因为如果在图片加载未完成情况下进行绘制是会报错的。 整个游戏中需要用到的三张图片：背景，英雄及怪物我们都用上面的方法来处理。 游戏对象 // 游戏对象 var hero = { speed: 256, // 每秒移动的像素 x: 0, y: 0 }; var monster = { x: 0, y: 0 };

热心网友 时间：2022-04-20 06:29

创建画布
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

首先我们需要创建一张画布作为游戏的舞台。这里通过JS代码而不是直接在HTML里写一个<canvas>元素目的是要说明代码创建也是很方便的。有了画布后就可以获得它的上下文来进行绘图了。然后我们还设置了画布大小，最后将其添加到页面上。
准备图片
// 背景图片
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";

游戏嘛少不了图片的，所以我们先加载一些图片先。简便起见，这里仅创建简单的图片对象，而不是专门写一个类或者Helper来做图片加载。bgReady这个变量用来标识图片是否已经加载完成从而可以放心地使用了，因为如果在图片加载未完成情况下进行绘制是会报错的。
整个游戏中需要用到的三张图片：背景，英雄及怪物我们都用上面的方法来处理。
游戏对象
// 游戏对象
var hero = {
speed: 256, // 每秒移动的像素
x: 0,
y: 0
};
var monster = {
x: 0,
y: 0
};
var monstersCaught = 0;

现在定义一些对象将在后面用到。我们的英雄有一个speed属性用来控制他每秒移动多少像素。怪物游戏过程中不会移动，所以只有坐标属性就够了。monstersCaught则用来存储怪物被捉住的次数。
处理用户的输入
// 处理按键
var keysDown = {};

addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);

现在开始处理用户的输入(对初次接触游戏开发的前端同学来说，这部分开始可能就需要一些脑力了)。在前端开发中，一般是用户触发了点击事件然后才去执行动画或发起异步请求之类的，但这里我们希望游戏的逻辑能够更加紧凑同时又要及时响应输入。所以我们就把用户的输入先保存下来而不是立即响应。
为此，我们用keysDown这个对象来保存用户按下的键值(keyCode)，如果按下的键值在这个对象里，那么我们就做相应处理。
开始一轮游戏
// 当用户抓住一只怪物后开始新一轮游戏
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;

// 将新的怪物随机放置到界面上
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
};

reset方法用于开始新一轮和游戏，在这个方法里我们将英雄放回画布中心同时将怪物放到一个随机的地方。
更新对象
// 更新游戏对象的属性
var update = function (modifier) {
if (38 in keysDown) { // 用户按的是↑
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) { // 用户按的是↓
hero.y += hero.speed * modifier;
}
if (37 in keysDown) { // 用户按的是←
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) { // 用户按的是→
hero.x += hero.speed * modifier;
}

// 英雄与怪物碰到了么？
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
++monstersCaught;
reset();
}
};

这就是游戏中用于更新画面的update函数，会被规律地重复调用。首先它负责检查用户当前按住的是中方向键，然后将英雄往相应方向移动。
有点费脑力的或许是这个传入的modifier 变量。你可以在main 方法里看到它的来源，但这里还是有必要详细解释一下。它是基于1开始且随时间变化的一个因子。例如1秒过去了，它的值就是1，英雄的速度将会乘以1，也就是每秒移动256像素；如果半秒钟则它的值为0.5，英雄的速度就乘以0.5也就是说这半秒内英雄以正常速度一半的速度移动。理论上说因为这个update 方法被调用的非常快且频繁，所以modifier的值会很小，但有了这一因子后，不管我们的代码跑得快慢，都能够保证英雄的移动速度是恒定的。
现在英雄的移动已经是基于用户的输入了，接下来该检查移动过程中所触发的事件了，也就是英雄与怪物相遇。这就是本游戏的胜利点，monstersCaught +1然后重新开始新一轮。
渲染物体
// 画出所有物体
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}

if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}

if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}

// 计分
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Monsterrs caught: " + monstersCaught, 32, 32);
};

之前的工作都是枯燥的，直到你把所有东西画出来之后。首先当然是把背景图画出来。然后如法炮制将英雄和怪物也画出来。这个过程中的顺序是有讲究的，因为后画的物体会覆盖之前的物体。
这之后我们改变了一下Canvas的绘图上下文的样式并调用fillText来绘制文字，也就是记分板那一部分。本游戏没有其他复杂的动画效果和打斗场面，绘制部分大功告成！
主循环函数
// 游戏主函数
var main = function () {
var now = Date.now();
var delta = now - then;

update(delta / 1000);
render();

then = now;

// 立即调用主函数
requestAnimationFrame(main);
};

上面的主函数控制了整个游戏的流程。先是拿到当前的时间用来计算时间差（距离上次主函数被调用时过了多少毫秒）。得到modifier后除以1000(也就是1秒中的毫秒数)再传入update函数。最后调用render 函数并且将本次的时间保存下来。
关于游戏中循环更新画面的讨论可参见「Onslaught! Arena Case Study」。
关于循环的进一步解释
// requestAnimationFrame 的浏览器兼容性处理
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

如果你不是完全理解上面的代码也没关系，我只是觉得拿出来解释一下总是极好的
为了循环地调用main函数，本游戏之前用的是setInterval。但现今已经有了更好的方法那就是requestAnimationFrame。使用新方法就不得不考虑浏览器兼容性。上面的垫片就是出于这样的考虑，它是Paul Irish 博客原版的一个简化版本。
启动游戏！
// 少年，开始游戏吧！
var then = Date.now();
reset();
main();

总算完成了，这是本游戏最后一段代码了。先是设置一个初始的时间变量then用于首先运行main函数使用。然后调用 reset 函数来开始新一轮游戏（如果你还记得的话，这个函数的作用是将英雄放到画面中间同时将怪物放到随机的地方以方便英雄去捉它）。
到此，相信你已经掌握了开发一个简单H5小游戏需要的基本功了。玩玩这个游戏或者下载代码自己研究研究吧 :)

Feel free to repost but keep the link to this page please!