HTML5 是一種用來構(gòu)建 Web 頁面的語言。它不僅僅是一種標(biāo)記語言，而是一種具有豐富多樣的功能和特性的語言。其中之一就是可以用 HTML5 來創(chuàng)建有趣的投籃游戲。
下面是一個(gè)簡單的 HTML5 投籃游戲代碼，演示基本的投籃機(jī)制：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 投籃游戲</title>
</head>
<body>
<h1>HTML5 投籃游戲</h1>
<canvas id="myCanvas" width="480" height="320"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
x += dx;
y += dy;
if(y + dy < ballRadius) {
dy = -dy;
}
if(y + dy > canvas.height-ballRadius) {
alert("游戲結(jié)束！");
document.location.reload();
}
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
dx = -dx;
}
}
setInterval(draw, 10);
</script>
</body>
</html>在這段代碼中，我們使用了 HTML5 的 Canvas 元素來創(chuàng)建游戲的畫布。我們利用 Canvas 的 getContext() 方法獲取繪圖上下文，并使用它來繪制小球。
我們還使用了 JavaScript 中的 setInterval() 方法來重復(fù)調(diào)用 draw() 函數(shù)，從而實(shí)現(xiàn)小球的上下彈動(dòng)。當(dāng)小球到達(dá)底部或撞到左右邊界時(shí)，游戲結(jié)束并重新加載頁面。
這只是一個(gè)簡單的投籃游戲的例子，還有許多其他的功能和特性可以添加到游戲中，例如計(jì)分和障礙物。HTML5 的強(qiáng)大功能和靈活性為游戲開發(fā)者提供了許多創(chuàng)意空間。