AI game creator

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

No:25769

←

Prev Next

→

弹球
Developer User12666｜Date and time 23/11/24 16:28:55
Build time 93.583 sec｜Game capacity 4.605KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>弹球游戏</title>
    <style>
        #gameContainer {
            position: relative;
            width: 300px;
            height: 500px;
            border: 1px solid black;
            overflow: hidden;
        }

#ball {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: red;
        }

#paddle {
            position: absolute;
            width: 100px;
            height: 20px;
            background-color: blue;
        }

.brick {
            width: 50px;
            height: 20px;
            background-color: green;
            margin: 2px;
        }
    </style>
</head>
<body>
    <div id="gameContainer">
        <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>
    </div>

var containerRect = container.getBoundingClientRect();
        var ballRect = ball.getBoundingClientRect();
        var paddleRect = paddle.getBoundingClientRect();

var ballX = containerRect.width / 2 - ballRect.width / 2;
        var ballY = containerRect.height / 2 - ballRect.height / 2;
        var paddleX = containerRect.width / 2 - paddleRect.width / 2;

var dx = 2;
        var dy = -2;
        var paddleMove = 7;

var score = 0;

function draw() {
            ball.style.left = ballX + "px";
            ball.style.top = ballY + "px";
            paddle.style.left = paddleX + "px";

requestAnimationFrame(draw);
        }

function movePaddle(event) {
            var target = event.target || event.srcElement;
            var touch = event.touches[0] || event.changedTouches[0];
            var paddleLeft = touch.pageX - containerRect.left - paddleRect.width / 2;

if (paddleLeft >= 0 && paddleLeft <= containerRect.width - paddleRect.width) {
                paddleX = paddleLeft;
            }
        }

function detectCollision() {
            for (var i = 0; i < bricks.length; i++) {
                var brickRect = bricks[i].getBoundingClientRect();

if (
                    ballX + ballRect.width >= brickRect.left &&
                    ballX <= brickRect.left + brickRect.width &&
                    ballY + ballRect.height >= brickRect.top &&
                    ballY <= brickRect.top + brickRect.height
                ) {
                    bricks[i].style.display = "none";
                    dy = -dy;
                    score++;
                    break;
                }
            }

if (
                ballX + ballRect.width >= paddleX &&
                ballX <= paddleX + paddleRect.width &&
                ballY + ballRect.height >= (containerRect.height - paddleRect.height)
            ) {
                dy = -dy;
            }

if (ballX + ballRect.width > containerRect.width || ballX < 0) {
                dx = -dx;
            }

if (ballY + ballRect.height > containerRect.height || ballY < 0) {
                dy = -dy;
            }
        }

function update() {
            ballX += dx;
            ballY += dy;

detectCollision();

if (score === bricks.length) {
                alert("游戏结束");
                reset();
            }
        }

function reset() {
            score = 0;

for (var i = 0; i < bricks.length; i++) {
                bricks[i].style.display = "block";
            }

ballX = containerRect.width / 2 - ballRect.width / 2;
            ballY = containerRect.height / 2 - ballRect.height / 2;
            paddleX = containerRect.width / 2 - paddleRect.width / 2;
        }

function init() {
            container.addEventListener("touchmove", movePaddle, false);
            container.addEventListener("mousemove", movePaddle, false);

draw();
            setInterval(update, 10);
        }

init();
    </script>
</body>
</html>