HTML5游戲開(kāi)發(fā)是現(xiàn)在非常流行的一種開(kāi)發(fā)方式，它不僅可以在PC端運(yùn)行，還可以在移動(dòng)端進(jìn)行游戲的開(kāi)發(fā)，而且無(wú)需安裝插件就可以游玩。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Game</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="game"></canvas>
<script>
// 在這里編寫游戲代碼
</script>
</body>
</html>為了讓游戲能在頁(yè)面中展示，我們需要在HTML文件中添加一個(gè)canvas標(biāo)簽，并給它一個(gè)ID。接著在JavaScript中編寫游戲邏輯。
// 獲取canvas元素
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
// 繪制一個(gè)矩形
ctx.fillStyle = '#0095DD';
ctx.fillRect(0, 0, canvas.width, canvas.height);以上代碼可以在canvas上繪制一個(gè)藍(lán)色的矩形，fillStyle代表填充顏色，fillRect代表繪制矩形，前兩個(gè)參數(shù)為矩形的起點(diǎn)坐標(biāo)，后兩個(gè)參數(shù)代表矩形的寬和高。
// 創(chuàng)建一個(gè)小球
let x = canvas.width/2;
let y = canvas.height-30;
let dx = 2;
let dy = -2;
const ballRadius = 10;
// 繪制小球
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = '#0095DD';
ctx.fill();
ctx.closePath();
}
// 移動(dòng)小球
function moveBall() {
// 檢測(cè)小球是否碰到四周的邊界
if(x + dx >canvas.width-ballRadius || x + dx< ballRadius) {
dx = -dx;
}
if(y + dy >canvas.height-ballRadius || y + dy< ballRadius) {
dy = -dy;
}
x += dx;
y += dy;
}
// 添加游戲循環(huán)
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
moveBall();
requestAnimationFrame(gameLoop);
}
gameLoop();以上代碼是一個(gè)小球的運(yùn)動(dòng)，先創(chuàng)建一個(gè)小球?qū)ο螅⒍x它的初始位置和速度。接著在畫布上繪制這個(gè)小球，然后通過(guò)移動(dòng)小球的坐標(biāo)，實(shí)現(xiàn)小球的運(yùn)動(dòng)。由于程序是在瀏覽器中運(yùn)行的，因此需要使用requestAnimationFrame函數(shù)來(lái)進(jìn)行游戲的不斷循環(huán)。
除了以上代碼，HTML5游戲還可以添加鍵盤事件、碰撞檢測(cè)、音效等元素，讓游戲玩起來(lái)更有趣。
上一篇oo css 的概念解讀
下一篇html5的第五章的代碼