卓球ゲーム

以下が一つの卓球ゲームの例です。HTML5のcanvasを使用しています。

```
<!DOCTYPE html>
<html>
<head>
	<title>卓球ゲーム</title>
</head>
<body>
	<canvas id="canvas" width="600" height="400"></canvas>
	<script>
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');
		let x = canvas.width/2;
		let y = canvas.height-30;
		let dx = 2;
		let dy = -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 = 75;
		let brickHeight = 20;
		let brickPadding = 10;
		let brickOffsetTop = 30;
		let brickOffsetLeft = 30;
		let score = 0;
		let lives = 3;
		let 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("keydown", keyDownHandler, false);
		document.addEventListener("keyup", keyUpHandler, false);

		function keyDownHandler(e) {
		    if(e.keyCode == 39) {
		        rightPressed = true;
		    }
		    else if(e.keyCode == 37) {
		        leftPressed = true;
		    }
		}

		function keyUpHandler(e) {
		    if(e.keyCode == 39) {
		        rightPressed = false;
		    }
		    else if(e.keyCode == 37) {
		        leftPressed = false;
		    }
		}

		function collisionDetection() {
		    for(let c=0; c<brickColumnCount; c++) {
		        for(let r=0; r<brickRowCount; r++) {
		            let b = bricks[c][r];
		            if(b.status == 1) {
		                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
		                    dy = -dy;
		                    b.status = 0;
		                    score++;
		                    if(score == brickRowCount*brickColumnCount) {
		                        alert("You win, congratulations!");
		                        document.showToast("再読み込みしてください");
		                    }
		                }
		            }
		        }
		    }
		}

		function drawBall() {
		    ctx.beginPath();
		    ctx.arc(x, y, 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) {
		                let brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
		                let 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 drawScore() {
		    ctx.font = "16px Arial";
		    ctx.fillStyle = "#0095DD";
		    ctx.fillText("Score: "+score, 8, 20);
		}

		function drawLives() {
		    ctx.font = "16px Arial";
		    ctx.fillStyle = "#0095DD";
		    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
		}

		function draw() {
		    ctx.clearRect(0, 0, canvas.width, canvas.height);
		    drawBricks();
		    drawBall();
		    drawPaddle();
		    drawScore();
		    drawLives();
		    collisionDetection();

		    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
		        dx = -dx;
		    }
		    if(y + dy < ballRadius) {
		        dy = -dy;
		    }
		    else if(y + dy > canvas.height-ballRadius) {
		        if(x > paddleX && x < paddleX + paddleWidth) {
		            dy = -dy;
		        }
		        else {
		            lives--;
		            if(!lives) {
		                alert("GAME OVER");
		                document.showToast("再読み込みしてください");
		            }
		            else {
		                x = canvas.width/2;
		                y = canvas.height-30;
		                dx = 2;
		                dy = -2;
		                paddleX = (canvas.width-paddleWidth)/2;
		            }
		        }
		    }

		    if(rightPressed && paddleX < canvas.width-paddleWidth) {
		        paddleX += 7;
		    }
		    else if(leftPressed && paddleX > 0) {
		        paddleX -= 7;
		    }

		    x += dx;
		    y += dy;
		    requestAnimationFrame(draw);
		}

		draw();
	</script>
</body>
</html>
```

ジョーク：何が卓球ボールよりも速いか？ラケットで打つボール！