Pinball! Move the wipers and throw the water out the window!'s game

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

No:5641

750

←

Prev Next

→

Pinball! Move the wipers and throw the water out t..ALL
Developer User3589｜Date and time 23/6/30 14:54:21
Build time 52.976 sec｜Game capacity 6.081KB｜

Script

了解しました！以下はピンボール風のゲームの実装例です。

このゲームでは、ワイパーの役割を果たすパドルを操作し、ボールを跳ね返しながらブロックを壊していきます。スマホでもパドルを動かすことができます。ブロックをすべて壊すとゲームクリアです。また、ボールが画面下部に落ちるとゲームオーバーです。ゲームオーバーまたはゲームクリア時にはスコアが表示され、リロードして再挑戦することができます。

←

Prev　Next

→ 　

Back　

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

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

了解しました！以下はピンボール風のゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <title>ピンボール</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        
        #board {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        #ball {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 50%;
        }
        
        #paddle {
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
            width: 100px;
            height: 20px;
            background-color: #fff;
        }
        
        #bricks {
            position: absolute;
            top: 50px;
            left: 50px;
            width: calc(100% - 100px);
            height: 200px;
            display: flex;
            flex-wrap: wrap;
        }
        
        .brick {
            width: 60px;
            height: 20px;
            background-color: #fff;
            margin: 3px;
        }
    </style>
</head>
<body>
    <div id="board">
        <div id="ball"></div>
        <div id="paddle"></div>
        <div id="bricks">
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
        </div>
    </div>
    
    <script>
        const ball = document.getElementById('ball');
        const paddle = document.getElementById('paddle');
        const bricks = Array.from(document.getElementsByClassName('brick'));
        
        const boardWidth = window.innerWidth;
        const boardHeight = window.innerHeight;
        const paddleWidth = paddle.offsetWidth;
        const paddleHeight = paddle.offsetHeight;
        const ballSize = ball.offsetWidth;
        
        let ballX = boardWidth / 2 - ballSize / 2;
        let ballY = boardHeight / 2 - ballSize / 2;
        let ballSpeedX = 3;
        let ballSpeedY = -3;
        
        let paddleX = boardWidth / 2 - paddleWidth / 2;
        let paddleSpeed = 10;
        
        let score = 0;
        let gameOver = false;
        
        bricks.forEach(brick => {
            brick.score = 1;
        });
        
        function movePaddle(e) {
            // スマホの場合はタッチ位置を取得
            if (e.touches) {
                paddleX = e.touches[0].clientX - paddleWidth / 2;
            }
            // PCの場合はマウス位置を取得
            else {
                paddleX = e.clientX - paddleWidth / 2;
            }
        }
        
        function gameLoop() {
            if (gameOver) {
                return;
            }
            
            ballX += ballSpeedX;
            ballY += ballSpeedY;
            
            if (ballX <= 0 || ballX >= boardWidth - ballSize) {
                ballSpeedX *= -1;
            }
            
            if (ballY <= 0) {
                ballSpeedY *= -1;
            }
            
            if (ballY >= boardHeight) {
                gameOver = true;
                alert(`ゲームオーバー！スコア: ${score}`);
                location.reload();
            }
            
            if (ballY + ballSize >= boardHeight - paddleHeight &&
                ballX + ballSize >= paddleX &&
                ballX <= paddleX + paddleWidth) {
                ballSpeedY *= -1;
                score++;
            }
            
            bricks.forEach(brick => {
                if (!brick.classList.contains('broken') &&
                    ballX + ballSize >= brick.offsetLeft &&
                    ballX <= brick.offsetLeft + brick.offsetWidth &&
                    ballY + ballSize >= brick.offsetTop &&
                    ballY <= brick.offsetTop + brick.offsetHeight) {
                    ballSpeedY = Math.abs(ballSpeedY) * -1;
                    brick.classList.add('broken');
                    score += brick.score;
                    
                    const remainingBricks = bricks.filter(brick => !brick.classList.contains('broken'));
                    if (remainingBricks.length === 0) {
                        gameOver = true;
                        alert(`ゲームクリア！スコア: ${score}`);
                        location.reload();
                    }
                }
            });
            
            ball.style.transform = `translate(${ballX}px, ${ballY}px)`;
            paddle.style.transform = `translateX(${paddleX}px)`;
            
            requestAnimationFrame(gameLoop);
        }
        
        document.addEventListener('mousemove', movePaddle);
        document.addEventListener('touchmove', movePaddle);
        
        gameLoop();
    </script>
</body>
</html>
```