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游戏进行自动化功能测试。