開心消消樂是一個非常受歡迎的休閑游戲，而HTML5技術允許我們創建一個在線版本。以下是一些示例代碼讓我們開始吧！

// 設置游戲畫布
var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;
// 創建游戲中的方塊
var square = {
width: 50,
height: 50,
color: "#F00", // 紅色方塊
x: 0,
y: 0
};
// 將方塊畫在畫布上
function drawSquare() {
var ctx = canvas.getContext("2d");
ctx.fillStyle = square.color; 
ctx.fillRect(square.x, square.y, square.width, square.height);
}
// 創建游戲中的方塊數組
var squares = [];
for (var i = 0; i< 10; i++) {
squares.push({
x: i * 50,
y: 0,
color: "#" + Math.floor(Math.random() * 16777215).toString(16), // 隨機顏色方塊
width: square.width,
height: square.height
});
}
// 畫出所有方塊
function drawSquares() {
for (var i = 0; i< squares.length; i++) {
var sq = squares[i];
ctx.fillStyle = sq.color;
ctx.fillRect(sq.x, sq.y, sq.width, sq.height);
}
}
// 點擊方塊時刪除它
canvas.addEventListener("click", function(event) {
var x = event.clientX - canvas.offsetLeft;
var y = event.clientY - canvas.offsetTop;
for (var i = 0; i< squares.length; i++) {
var sq = squares[i];
if (x >= sq.x && x< sq.x + sq.width &&
y >= sq.y && y< sq.y + sq.height) {
squares.splice(i, 1);
break;
}
}
}, false);
// 游戲主循環
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除整個畫布
drawSquares(); // 畫出方塊
requestAnimationFrame(gameLoop); // 不斷重繪
}
var ctx = canvas.getContext("2d");
gameLoop(); // 啟動游戲

上述代碼只是一個簡單的例子，當然實際的游戲會更加復雜。但它演示了如何使用HTML5畫布元素、JavaScript、CSS等實現一個可玩的開心消消樂游戲。