Слева Синий квадрат стреляет шариками по направлению к клику. Красные квадраты случайно появляются справа и движутся к синему квадраты. Если шарик попадает в них они исчезают's game

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

No:45994

160

←

Prev Next

→

Слева Синий квадрат стреляет шариками по направлен..ALL
Developer User19457｜Date and time 24/2/22 16:47:10
Build time 14.749 sec｜Game capacity 2.874KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<body>

var blueSquare = {
    x: 50,
    y: canvas.height / 2,
    size: 20,
    color: "blue",
    speed: 5
};

var redSquares = [];
var ball = {
    x: 0,
    y: 0,
    size: 5,
    color: "black",
    speed: 5,
    dx: 0,
    dy: 0,
    isVisible: false
};

function drawBlueSquare() {
    ctx.fillStyle = blueSquare.color;
    ctx.fillRect(blueSquare.x, blueSquare.y, blueSquare.size, blueSquare.size);
}

function drawRedSquares() {
    redSquares.forEach(function(redSquare) {
        ctx.fillStyle = "red";
        ctx.fillRect(redSquare.x, redSquare.y, redSquare.size, redSquare.size)
    });
}

function drawBall() {
    if(ball.isVisible) {
        ctx.fillStyle = ball.color;
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ball.size, 0, Math.PI * 2);
        ctx.fill();
    }
}

function moveRedSquares() {
    redSquares.forEach(function(redSquare) {
        redSquare.x -= 1;

if (redSquare.x + redSquare.size < 0) {
            redSquares.shift();
        }
    });
}

function spawnRedSquare() {
    var redSquare = {
        x: canvas.width,
        y: Math.floor(Math.random() * canvas.height),
        size: 20
    };

redSquares.push(redSquare);
}

function shootBall() {
    ball.x = blueSquare.x + blueSquare.size;
    ball.y = blueSquare.y + blueSquare.size / 2;
    ball.dx = 1;
    ball.dy = 1;
    ball.isVisible = true;
}

document.addEventListener("click", function(event) {
    var clickX = event.clientX - canvas.offsetLeft;
    var clickY = event.clientY - canvas.offsetTop;

if(clickX > blueSquare.x && clickX < blueSquare.x + blueSquare.size &&
       clickY > blueSquare.y && clickY < blueSquare.y + blueSquare.size) {
        shootBall();
    }
});

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBlueSquare();
    drawRedSquares();
    drawBall();

moveRedSquares();
    collisionDetection();

if(ball.isVisible) {
        ball.x += ball.speed * ball.dx;
        ball.y += ball.speed * ball.dy;

if(ball.x + ball.size > canvas.width || ball.x - ball.size < 0) {
            ball.isVisible = false;
        }
    }

if(Math.random() < 0.01) {
        spawnRedSquare();
    }

requestAnimationFrame(draw);
}

draw();
</script>

</body>
</html>