【译】html5游戏入门

[fakefish]

【译】html5游戏入门

原文链接

简介

如果你想用canvas做个游戏，那么来对地方了。

但是但是你至少知道javascript怎么拼写(╯‵□′)╯︵┻━┻

既然没问题，那先来玩一下或者下载

创建canvas标签

废话不多说，我们必须创建一个canvas标签，简单起见，用一下不喜欢的jQuery

var CANVAS_WIDTH = 480;
var CANVAS_HEIGHT = 320;

var canvasElement = $("<canvas width='" + CANVAS_WIDTH + 
                      "' height='" + CANVAS_HEIGHT + "'></canvas>");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');

游戏循环

为了能够让游戏平滑动画，我们用30帧的频率。

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

现在我们可以先给这两个函数放置play，重要的是setInterval函数会定期照顾他们的。

hello world

现在我们有了这个循环，让我们开始画东西吧~

function draw() {
  canvas.fillStyle = "#000"; // Set color to black
  canvas.fillText("Sup Bro!", 50, 50);
}

注意：确认修改之后刷新一下，万一哪里不对，代码变的少还能看出哪里不对。