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; }
更新完场景后需要擦除并重新绘制场景。