HTML5泡泡龍是一款經典的游戲，它的代碼也非常有趣。以下是HTML5泡泡龍的代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5泡泡龍</title>
<style>
canvas {
border: 1px solid #000;
width: 804px;
height: 604px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var bubbles = [];
var selectedBubble = null;
var colors = ["#f00", "#0f0", "#00f", "#ff0", "#f0f", "#0ff"];
function Bubble(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
}
Bubble.prototype.drawBubble = function() {
context.beginPath();
context.arc(this.x, this.y, 30, 0, Math.PI * 2, true);
context.fillStyle = this.color;
context.fill();
context.closePath();
};
for (var row = 0; row < 6; row++) {
for (var col = 0; col < 10; col++) {
var colorIndex = Math.floor(Math.random() * colors.length);
var bubble = new Bubble(col * 80 + 40, row * 80 + 40, colors[colorIndex]);
bubbles.push(bubble);
}
}
function handleMouseDown(e) {
var mouseX = e.clientX - canvas.offsetLeft;
var mouseY = e.clientY - canvas.offsetTop;
for (var i = 0; i < bubbles.length; i++) {
var bubble = bubbles[i];
var distance = Math.sqrt(Math.pow(mouseX - bubble.x, 2) + Math.pow(mouseY - bubble.y, 2));
if (distance < 30) {
selectedBubble = bubble;
break;
}
}
}
function handleMouseMove(e) {
if (selectedBubble) {
selectedBubble.x = e.clientX - canvas.offsetLeft;
selectedBubble.y = e.clientY - canvas.offsetTop;
drawBubbles();
}
}
function handleMouseUp(e) {
if (selectedBubble) {
var nearestBubble = null;
var smallestDistance = Infinity;
for (var i = 0; i < bubbles.length; i++) {
var bubble = bubbles[i];
var distance = Math.sqrt(Math.pow(selectedBubble.x - bubble.x, 2) + Math.pow(selectedBubble.y - bubble.y, 2));
if (distance < 60 && distance < smallestDistance && selectedBubble.color == bubble.color) {
nearestBubble = bubble;
smallestDistance = distance;
}
}
if (nearestBubble) {
bubbles.splice(bubbles.indexOf(selectedBubble), 1);
selectedBubble = null;
}
}
}
function drawBubbles() {
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < bubbles.length; i++) {
var bubble = bubbles[i];
bubble.drawBubble();
}
}
canvas.addEventListener("mousedown", handleMouseDown, false);
canvas.addEventListener("mousemove", handleMouseMove, false);
canvas.addEventListener("mouseup", handleMouseUp, false);
drawBubbles();
</script>
</body>
</html>這個示例代碼演示了如何使用HTML5畫布元素(canvas)創建泡泡龍游戲。它使用Bubble類來表示每個泡泡，使用selectedBubble變量來存儲當前選中的泡泡。還使用handleMouseDown、handleMouseMove和handleMouseUp函數來處理鼠標事件，允許玩家選擇并拖動泡泡，以及將相同顏色的泡泡連接在一起。
上一篇html5注冊彈出框代碼
下一篇react css 行內