HTML5 canvas游戏工作原理


HTML5已经不是一个新名词。它看上去很cool,有很多feature,大多数人普遍看好它的发展。对于我来说,最感兴趣的是它的canvas标签,可以结合Javascript来绘制游戏画面。

我们可以在Javascript脚本中获得页面中的canvas对象,以及它的绘图上下文:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")

通常每个游戏会有游戏循环:

var FPS = 30; 
setInterval(function() { 
    update(); 
    draw(); 
}, 1000/FPS);

每次循环的时候会先执行游戏逻辑,计算对象,更新场景。比如说场景里有个对象在做自由落体运动。你就需要不断地计算并更新它的位移,速度。

function update () {
  o.y += o.y_speed;
  o.y_speed += o.y_acceleration;    
}

更新完场景后需要擦除并重新绘制场景。

function draw() {
  context.fillStyle = '#000000'; 
  context.fillRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = '#2222ff'; 
  context.fillRect(o.x - o.width/2, o.y - o.height/2, o.width, o.height);
}

更新和绘制场景的速度可能会影响到FPS。

接下来,我们可以添加事件处理,比如说让游戏响应用户鼠标点击事件:

document.onclick = function(event){ 
  o.x = event.pageX - canvas.offsetLeft;
  o.y = event.pageY - canvas.offsetTop;
  o.y_speed = 0;
}

这样就形成了显示-动作-反馈的closed loop。

这些是最基本的游戏工作原理。当然我们知道要完成一个游戏是有很多工作需要做的,涉及到很多领域。先表过不提。接下去我会谈一下如何使用Selenium和 openCV对HTML5 canvas游戏进行自动化功能测试

优质内容筛选与推荐>>
1、寄存器(CPU工作原理)03 - 零基础入门学习汇编语言08
2、【学习笔记】php函数学习
3、220. Contains Duplicate III
4、c++游戏服务器开发技术概览
5、遍历数组一次求得数组的平均数、标准差、方差


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号