HTML5游戲開發是目前非常流行的一項技術,它允許開發者使用HTML、CSS和JavaScript來創建有趣的游戲應用程序。下面是一些HTML5游戲開發的簡單代碼示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>游戲標題</title>
<style>
/* 游戲界面樣式 */
#game {
width: 500px;
height: 400px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="game">
<canvas id="canvas"></canvas>
</div>
<script>
// 游戲邏輯
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 2;
var dy = -2;
function drawBall() {
context.beginPath();
context.arc(x, y, 10, 0, Math.PI * 2);
context.fillStyle = "#0095DD";
context.fill();
context.closePath();
}
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
x += dx;
y += dy;
if (x + dx >canvas.width - 10 || x + dx< 10) {
dx = -dx;
}
if (y + dy >canvas.height - 10 || y + dy< 10) {
dy = -dy;
}
}
setInterval(draw, 10); // 每10ms執行draw()函數
</script>
</body>
</html>
上述代碼創建了一個簡單的游戲界面,并在其中使用canvas元素來繪制一個小球,每10毫秒移動一次,反彈off游戲界面的邊緣。
當然,HTML5游戲開發涉及到的技術還有很多,如動畫、聲音、移動觸控等,開發者可以在該基礎上繼續探索,創建出更加有趣的游戲應用程序。