2 balls Throwing boomerangs's game

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

No:17298

100

←

Prev Next

→

2 balls Throwing boomerangs
Developer User7638｜Date and time 23/9/23 3:47:26
Build time 60.391 sec｜Game capacity 5.799KB｜

Script

Sure! Here's an example of a simple game where you can control two balls and throw boomerangs using JavaScript. The game will be implemented inside a single HTML file:

In this game, you will control two balls, a blue one and a red one, by dragging your finger on a smartphone screen. By dragging your finger, you can determine the direction of the thrown boomerang. The balls are represented as circles, and the boomerang is a rotating square. The goal is to hit the balls with the boomerang. When the boomerang collides with a ball or goes out of the canvas, it will reset to its initial position.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple game where you can control two balls and throw boomerangs using JavaScript. The game will be implemented inside a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Boomerang Throw</title>
    <style>
        canvas {
            border: 1px solid black;
            margin: 20px auto;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

const ball1 = {
            x: 50,
            y: canvas.height / 2,
            speedX: 0,
            speedY: 0,
            color: 'blue'
        };

const ball2 = {
            x: canvas.width - 50,
            y: canvas.height / 2,
            speedX: 0,
            speedY: 0,
            color: 'red'
        };

let isBoomerangThrown = false;
        let boomerangX = canvas.width / 2;
        let boomerangY = canvas.height / 2;
        let boomerangSpeedX = 0;
        let boomerangSpeedY = 0;
        let boomerangRotation = 0;

// Add touch event listeners for smartphone operation
        canvas.addEventListener('touchstart', handleTouchStart, false);
        canvas.addEventListener('touchmove', handleTouchMove, false);
        canvas.addEventListener('touchend', handleTouchEnd, false);

// Game loop
        function draw() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the balls
            drawBall(ball1);
            drawBall(ball2);

// Draw the boomerang if thrown
            if (isBoomerangThrown) {
                drawBoomerang();
                updateBoomerangPosition();
            }

// Request animation frame
            requestAnimationFrame(draw);
        }

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

function drawBoomerang() {
            ctx.save();
            ctx.translate(boomerangX, boomerangY);
            ctx.rotate(boomerangRotation);
            ctx.fillStyle = 'green';
            ctx.fillRect(-BOOMERANG_SIZE / 2, -BOOMERANG_SIZE / 2, BOOMERANG_SIZE, BOOMERANG_SIZE);
            ctx.restore();
        }

function updateBoomerangPosition() {
            boomerangX += boomerangSpeedX;
            boomerangY += boomerangSpeedY;
            boomerangRotation += 0.1;

// Check collision between boomerang and balls
            if (checkCollision(ball1) || checkCollision(ball2)) {
                resetBoomerang();
            }

// Check if boomerang goes out of the canvas
            if (boomerangX < 0 || boomerangX > canvas.width || boomerangY < 0 || boomerangY > canvas.height) {
                resetBoomerang();
            }
        }

function checkCollision(ball) {
            const dx = boomerangX - ball.x;
            const dy = boomerangY - ball.y;
            const distance = Math.sqrt(dx * dx + dy * dy);
            return distance < BALL_RADIUS + BOOMERANG_SIZE / 2;
        }

function resetBoomerang() {
            isBoomerangThrown = false;
            boomerangX = canvas.width / 2;
            boomerangY = canvas.height / 2;
            boomerangSpeedX = 0;
            boomerangSpeedY = 0;
            boomerangRotation = 0;
        }

function handleTouchStart(event) {
            event.preventDefault();
            
            // Get the touch position
            const touchX = event.touches[0].clientX;
            const touchY = event.touches[0].clientY;
            
            // Calculate the direction and speed of the boomerang
            const deltaX = touchX - canvas.width / 2;
            const deltaY = touchY - canvas.height / 2;
            const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
            
            boomerangSpeedX = (deltaX / distance) * MAX_SPEED;
            boomerangSpeedY = (deltaY / distance) * MAX_SPEED;
            
            // Throw the boomerang
            isBoomerangThrown = true;
        }

function handleTouchMove(event) {
            event.preventDefault();
            
            // Update the touch position
            const touchX = event.touches[0].clientX;
            const touchY = event.touches[0].clientY;
            
            // Update the direction and speed of the boomerang
            const deltaX = touchX - canvas.width / 2;
            const deltaY = touchY - canvas.height / 2;
            const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
            
            boomerangSpeedX = (deltaX / distance) * MAX_SPEED;
            boomerangSpeedY = (deltaY / distance) * MAX_SPEED;
        }

function handleTouchEnd(event) {
            event.preventDefault();
            
            // Stop the boomerang
            boomerangSpeedX = 0;
            boomerangSpeedY = 0;
        }

// Start the game
        draw();

</script>
</body>
</html>
```