🌟 Score: 0 🌟
🎉🎊🔥💥
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(-5deg); }
50% { transform: rotate(5deg); }
}
@keyframes disappear {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes grow {
0% { transform: scale(1); }
100% { transform: scale(1.2); }
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400" style="border: 2px solid #000;"></canvas>
<div id="score" style="text-align: center; font-size: 24px; margin-top: 10px; font-family: sans-serif;">🌟 Score: 0 🌟</div>
<div id="emojiReaction" style="text-align: center; font-size: 24px; margin-top: 10px; display: none;">🎉🎊🔥💥</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreEl = document.getElementById('score');
const emojiReaction = document.getElementById('emojiReaction');
let ballX = canvas.width / 2;
let ballY = canvas.height - 30;
let ballDX = 2;
let ballDY = -2;
let ballRadius = 10;
let paddleHeight = 10;
let paddleWidth = 75;
let paddleX = (canvas.width - paddleWidth) / 2;
let rightPressed = false;
let leftPressed = false;
let brickRowCount = 3;
let brickColumnCount = 5;
let brickWidth = 70;
let brickHeight = 20;
let brickPadding = 10;
let brickOffsetTop = 30;
let brickOffsetLeft = 35;
let score = 0;
const bricks = [];
for (let c = 0; c < brickColumnCount; c++) {
bricks[c] = [];
for (let r = 0; r < brickRowCount; r++) {
bricks[c][r] = { x: 0, y: 0, status: 1 };
}
}
document.addEventListener('touchstart', (e) => {
if (e.touches[0].clientX < canvas.width / 2) {
leftPressed = true;
} else {
rightPressed = true;
}
});
document.addEventListener('touchend', () => {
rightPressed = false;
leftPressed = false;
});
function drawBall() {
ctx.beginPath();
ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawBricks() {
for (let c = 0; c < brickColumnCount; c++) {
for (let r = 0; r < brickRowCount; r++) {
if (bricks[c][r].status == 1) {
const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
bricks[c][r].x = brickX;
bricks[c][r].y = brickY;
ctx.beginPath();
ctx.rect(brickX, brickY, brickWidth, brickHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
}
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBricks();
drawBall();
drawPaddle();
collisionDetection();
if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
ballDX = -ballDX;
}
if (ballY + ballDY < ballRadius) {
ballDY = -ballDY;
} else if (ballY + ballDY > canvas.height - ballRadius) {
if (ballX > paddleX && ballX < paddleX + paddleWidth) {
ballDY = -ballDY;
score++;
scoreEl.innerHTML = `🌟 Score: ${score} 🌟`;
emojiReaction.style.display = 'block';
emojiReaction.style.animation = 'bounce 0.5s, disappear 2s 0.5s forwards';
} else {
document.showToast("再読み込みしてください");
}
}
if (rightPressed && paddleX < canvas.width - paddleWidth) {
paddleX += 7;
} else if (leftPressed && paddleX > 0) {
paddleX -= 7;
}
ballX += ballDX;
ballY += ballDY;
requestAnimationFrame(draw);
}
function collisionDetection() {
for (let c = 0; c < brickColumnCount; c++) {
for (let r = 0; r < brickRowCount; r++) {
const b = bricks[c][r];
if (b.status == 1) {
if (ballX > b.x && ballX < b.x + brickWidth && ballY > b.y && ballY < b.y + brickHeight) {
ballDY = -ballDY;
b.status = 0;
score++;
scoreEl.innerHTML = `🌟 Score: ${score} 🌟`;
emojiReaction.style.display = 'block';
emojiReaction.style.animation = 'bounce 0.5s, disappear 2s 0.5s forwards';
}
}
}
}
}
draw();
</script>
</body>
</html>
```