简单的HTML5 canvas游戏工作原理

时间：2023-03-09 17:48:08
简单的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游戏进行自动化功能测试。

相关文章