隨著Html5技術的越來越成熟，越來越多的游戲采用Html5寫成，以取代傳統的Flash游戲。下面我們來看一段用Html5寫的游戲代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Html5游戲</title>
<script src="game.js"></script>
</head>
<body>
<canvas id="gameCanvas" width="480" height="320"></canvas>
</body>
</html>這段代碼的結構很簡單，主要包括了Html5基本元素和一個指向游戲邏輯的JavaScript文件。其中，游戲畫布是通過<canvas>元素來創建的，并且設置了固定的寬度和高度。
下面是JavaScript游戲文件的代碼：
var canvas = document.getElementById("gameCanvas");
var context = canvas.getContext("2d");
var x = 50;
var y = 50;
var speed = 5;
function drawPlayer() {
context.fillRect(x, y, 20, 20);
}
function updatePlayer() {
if (leftArrowPressed()) {
x -= speed;
}
if (rightArrowPressed()) {
x += speed;
}
if (upArrowPressed()) {
y -= speed;
}
if (downArrowPressed()) {
y += speed;
}
}
function gameLoop() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
updatePlayer();
}
setInterval(gameLoop, 20);這段代碼定義了一個游戲循環，以維護游戲畫面，包括繪制和更新玩家。游戲畫布的上下文通過getContext("2d")方法獲取，以便在畫布上進行繪畫操作。玩家的位置和速度都是變量，而且更新方法中使用了一些條件判斷，根據玩家輸入的方向來移動玩家。
最后，在setInterval方法中，以每20毫秒的間隔調用gameLoop方法來循環繪制和更新玩家，以實現游戲的運行。
上一篇文字在圖片上面的css