HTML5彈弓射球是一款非常有趣的互動游戲，它基于HTML5和JavaScript開發，可以在網頁上直接運行。下面是它的源代碼，我們可以學習其中的算法和技術，進一步了解HTML5游戲開發的奧秘。

<!-- 定義游戲畫布 -->
<canvas id="canvas" width="480" height="320"></canvas>
<!-- 加載游戲背景 -->
<img src="bg.jpg" id="bg">
<!-- 加載彈弓和彈弓繃帶 -->
<img src="launcher.png" id="launcher">
<img src="band.png" id="band">
<!-- 加載彈球 -->
<img src="ball.png" id="ball">
<script>
// 定義全局變量和常量
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var BG_WIDTH = 980;
var LAUNCHER_X = 50;
var LAUNCHER_Y = 200;
var BAND_X = 28;
var BAND_Y = 225;
var BALL_X = 180;
var BALL_Y = 230;
var BALL_VX = 0;
var BALL_VY = 0;
var GRAVITY = 0.8;
var FRICTION = 0.98;
var isDragging = false;
// 加載游戲背景圖片
var bg = document.getElementById("bg");
var bgX = 0;
function drawBackground() {
ctx.drawImage(bg, bgX, 0, BG_WIDTH, canvas.height);
ctx.drawImage(bg, bgX + BG_WIDTH, 0, BG_WIDTH, canvas.height);
bgX -= 4;
if (bgX< -BG_WIDTH) {
bgX = 0;
}
}
// 加載彈球、彈弓和彈弓繃帶圖片
var launcher = document.getElementById("launcher");
var band = document.getElementById("band");
var ball = document.getElementById("ball");
function drawLauncher() {
ctx.drawImage(launcher, LAUNCHER_X, LAUNCHER_Y);
ctx.drawImage(band, BAND_X, BAND_Y);
ctx.drawImage(ball, BALL_X, BALL_Y);
}
// 更新彈球位置
function updateBall() {
BALL_X += BALL_VX;
BALL_Y += BALL_VY;
BALL_VY += GRAVITY;
BALL_VX *= FRICTION;
BALL_VY *= FRICTION;
if (BALL_Y >= canvas.height - ball.height) {
BALL_Y = canvas.height - ball.height;
BALL_VY = -BALL_VY * FRICTION;
}
}
// 監聽鼠標事件
function onMouseDown(e) {
var mouseX = e.clientX - canvas.getBoundingClientRect().left;
var mouseY = e.clientY - canvas.getBoundingClientRect().top;
if (BALL_X < mouseX < BALL_X + ball.width
&& BALL_Y < mouseY < BALL_Y + ball.height) {
isDragging = true;
}
}
function onMouseUp() {
isDragging = false;
BALL_VX = -(LAUNCHER_X - BALL_X) / 10;
BALL_VY = -(LAUNCHER_Y - BALL_Y) / 10;
}
function onMouseMove(e) {
if (isDragging) {
BALL_X = e.clientX - canvas.getBoundingClientRect().left - ball.width/2;
BALL_Y = e.clientY - canvas.getBoundingClientRect().top - ball.height/2;
}
}
// 主循環
function loop() {
drawBackground();
drawLauncher();
updateBall();
requestAnimationFrame(loop);
}
// 綁定事件
canvas.addEventListener("mousedown", onMouseDown);
canvas.addEventListener("mouseup", onMouseUp);
canvas.addEventListener("mousemove", onMouseMove);
// 啟動主循環
loop();
</script>

以上代碼實現了彈弓射球游戲的基本功能，其中主循環使用requestAnimationFrame()函數實現，可以保證游戲畫面的流暢性和性能。同時，該游戲還使用了鼠標事件監聽器，實現了拖拽和放置小球的功能。我們可以根據自己的需求和創意，自行變換游戲元素和圖片，設計出更加有趣、富有挑戰性的游戲。