AI game creator

Click here for free DL of the app version that can save data.

No:34663

←

Prev Next

→

ブロック崩し
Developer 豆腐｜Date and time 24/1/11 7:02:50
Build time 21.494 sec｜Game capacity 5.995KB｜

Script

了解です。以下にブロック崩しのゲームの実装例を示します。

このコードでは、htmlのキャンバス要素を使ってブロック崩しのゲームを実装しています。キーボードの左右キーでパドルを動かし、スペースキーでゲームを開始します。ブロックをすべて壊すと「Game Over」とアラートが表示され、ページをリロードします。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

了解です。以下にブロック崩しのゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ブロック崩し</title>
    <style>
        #gameCanvas {
            background-color: darkgray;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
        // ゲーム画面のサイズ
        const canvasWidth = 400;
        const canvasHeight = 400;
        
        // ブロックのサイズ
        const blockWidth = 40;
        const blockHeight = 20;
        
        // パドルのサイズ
        const paddleWidth = 80;
        const paddleHeight = 10;
        
        // ボールのサイズと速度
        const ballRadius = 5;
        const ballSpeedX = 2;
        const ballSpeedY = 2;
        
        // ブロックの配置
        const numColumns = Math.floor(canvasWidth / blockWidth);
        const numRows = 5;
        let blocks = [];
        for (let i = 0; i < numRows; i++) {
            blocks[i] = [];
            for (let j = 0; j < numColumns; j++) {
                blocks[i][j] = true;
            }
        }
        
        // パドルの位置
        let paddleX = (canvasWidth - paddleWidth) / 2;
        
        // ボールの位置と速度
        let ballX = canvasWidth / 2;
        let ballY = canvasHeight - paddleHeight - ballRadius;
        let ballSpeed = { x: ballSpeedX, y: -ballSpeedY };
        
        // ゲームの状態
        let gameStarted = false;
        
        // ゲーム画面のキャンバス要素
        const canvas = document.getElementById('gameCanvas');
        const context = canvas.getContext('2d');
        
        // キー入力のイベントリスナー
        document.addEventListener('keydown', function(event) {
            if (event.key === 'ArrowLeft') {
                paddleX -= 10;
            } else if (event.key === 'ArrowRight') {
                paddleX += 10;
            } else if (event.key === ' ') {
                gameStarted = true;
            }
        });
        
        // ボールとブロックの衝突判定
        function checkCollision() {
            const ballTop = ballY - ballRadius;
            const ballBottom = ballY + ballRadius;
            const ballLeft = ballX - ballRadius;
            const ballRight = ballX + ballRadius;
            
            for (let i = 0; i < numRows; i++) {
                for (let j = 0; j < numColumns; j++) {
                    if (blocks[i][j]) {
                        const blockTop = i * blockHeight;
                        const blockBottom = (i + 1) * blockHeight;
                        const blockLeft = j * blockWidth;
                        const blockRight = (j + 1) * blockWidth;
                        
                        if (ballTop <= blockBottom && ballBottom >= blockTop &&
                            ballLeft <= blockRight && ballRight >= blockLeft) {
                            blocks[i][j] = false;
                            ballSpeed.y = -ballSpeed.y;
                            
                            if (blocks.every(row => row.every(block => !block))) {
                                alert('Game Over');
                                document.location.reload();
                            }
                        }
                    }
                }
            }
        }
        
        // 描画関数
        function draw() {
            // ゲーム画面のクリア
            context.clearRect(0, 0, canvasWidth, canvasHeight);
            
            // ブロックの描画
            for (let i = 0; i < numRows; i++) {
                for (let j = 0; j < numColumns; j++) {
                    if (blocks[i][j]) {
                        const blockX = j * blockWidth;
                        const blockY = i * blockHeight;
                        
                        context.fillStyle = 'orange';
                        context.fillRect(blockX, blockY, blockWidth, blockHeight);
                    }
                }
            }
            
            // パドルの描画
            context.fillStyle = 'blue';
            context.fillRect(paddleX, canvasHeight - paddleHeight, paddleWidth, paddleHeight);
            
            // ボールの描画
            context.fillStyle = 'red';
            context.beginPath();
            context.arc(ballX, ballY, ballRadius, 0, 2 * Math.PI, false);
            context.fill();
        }
        
        // アニメーション関数
        function animate() {
            checkCollision();
            
            if (gameStarted) {
                ballX += ballSpeed.x;
                ballY += ballSpeed.y;
                
                if (ballY - ballRadius <= 0) {
                    ballSpeed.y = -ballSpeed.y;
                }
                if (ballY + ballRadius >= canvasHeight - paddleHeight &&
                    ballX >= paddleX && ballX <= paddleX + paddleWidth) {
                    ballSpeed.y = -ballSpeed.y;
                }
                if (ballX - ballRadius <= 0 || ballX + ballRadius >= canvasWidth) {
                    ballSpeed.x = -ballSpeed.x;
                }
                if (ballY + ballRadius >= canvasHeight) {
                    alert('Game Over');
                    document.location.reload();
                }
            }
            
            draw();
            
            requestAnimationFrame(animate);
        }
        
        animate();
    </script>
</body>
</html>
```