100 squares throwing boomerangs at each other if you touch one of the squares they will throw one for all devices's game

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

No:17103

←

Prev Next

→

100 squares throwing boomerangs at each other if y..ALL
Developer User7570｜Date and time 23/9/22 8:45:46
Build time 33.748 sec｜Game capacity 5.005KB｜

Script

Sure! Here's an example of a simple game where you control a character represented by a square, and other squares will throw boomerangs at you. This game can be played on any device with a web browser. To make the game more interactive, I've implemented touch events for smartphone operation. I've also used pictograms to represent the characters and boomerangs. Here's the game implemented as a single HTML file enclosed in script tags:

To play the game, you can embed the above HTML code into a file with a `.html` extension and open it in a web browser on your smartphone or any other device. In the game, use your finger to control the square character. Avoid getting hit by the moving square boomerangs. If your character gets hit, an alert message will appear and the game will reset.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

To make the game more interactive, I've implemented touch events for smartphone operation. I've also used pictograms to represent the characters and boomerangs.

Here's the game implemented as a single HTML file enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Boomerang Game</title>
    <style>
        .character {
            width: 40px;
            height: 40px;
            background-color: #f00;
            position: absolute;
            left: 0;
            top: 0;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: #fff;
        }
        
        .boomerang {
            width: 20px;
            height: 20px;
            background-color: #0f0;
            position: absolute;
            transition: all 1s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color: #fff;
        }
    </style>
</head>
<body>
    <script>
        const NUM_SQUARES = 100;
        const BOOMERANG_SPEED = 5;
        
        let character;
        let boomerangs = [];
        
        // Create character
        function createCharacter() {
            character = document.createElement('div');
            character.className = 'character';
            character.textContent = '😀'; // Use a smiley face pictogram
            document.body.appendChild(character);
        }
        
        // Handle touch events
        function handleTouch(e) {
            const xPos = e.touches[0].pageX - character.offsetWidth / 2;
            const yPos = e.touches[0].pageY - character.offsetHeight / 2;
            character.style.left = xPos + 'px';
            character.style.top = yPos + 'px';
        }
        
        // Spawn boomerang
        function spawnBoomerang(xPos, yPos) {
            const boomerang = document.createElement('div');
            boomerang.className = 'boomerang';
            boomerang.textContent = '🌀'; // Use a cyclone pictogram
            boomerang.style.left = xPos + 'px';
            boomerang.style.top = yPos + 'px';
            document.body.appendChild(boomerang);
            boomerangs.push(boomerang);
        }
        
        // Animate boomerangs
        function animateBoomerangs() {
            for (let i = 0; i < boomerangs.length; i++) {
                const boomerang = boomerangs[i];
                const xPos = parseFloat(boomerang.style.left);
                boomerang.style.left = xPos + BOOMERANG_SPEED + 'px';
                
                // Check collision with character
                if (isCollided(character, boomerang)) {
                    alert('Oops! Your character got hit!');
                    gameover();
                    return;
                }
                
                // Remove boomerang when it goes offscreen
                if (xPos >= window.innerWidth) {
                    document.body.removeChild(boomerang);
                    boomerangs.splice(i, 1);
                    i--;
                }
            }
            
            requestAnimationFrame(animateBoomerangs);
        }
        
        // Check collision between two elements
        function isCollided(elem1, elem2) {
            const rect1 = elem1.getBoundingClientRect();
            const rect2 = elem2.getBoundingClientRect();
            
            return !(rect1.right < rect2.left || 
                     rect1.left > rect2.right || 
                     rect1.bottom < rect2.top || 
                     rect1.top > rect2.bottom);
        }
        
        // Gameover
        function gameover() {
            boomerangs.forEach((boomerang) => {
                document.body.removeChild(boomerang);
            });
            boomerangs = [];
        }
        
        // Start the game
        function startGame() {
            createCharacter();
            window.addEventListener('touchmove', handleTouch);
            animateBoomerangs();
            
            // Spawn boomerangs randomly
            setInterval(() => {
                const xPos = window.innerWidth;
                const yPos = Math.random() * (window.innerHeight - 40);
                spawnBoomerang(xPos, yPos);
            }, 1500);
        }
        
        startGame();
    </script>
</body>
</html>
```

To play the game, you can embed the above HTML code into a file with a `.html` extension and open it in a web browser on your smartphone or any other device.

In the game, use your finger to control the square character. Avoid getting hit by the moving square boomerangs. If your character gets hit, an alert message will appear and the game will reset.