A rolling spike ball destroying everything and squares spawn It follows you if you touch somewhere in a forest for all devices's game

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

No:17014

6036

←

Prev Next

→

A rolling spike ball destroying everything and squ..ALL
Developer anonymous｜Date and time 23/9/22 6:07:11
Build time unknown sec｜Game capacity 5.689KB｜

Script

Sure! Here's an example of a simple game where a rolling spike ball destroys squares while following the player's touch input in a forest-like setting. The game will work on all devices and make use of pictograms for visual representation. Copy the following code and save it as a single HTML file (e.g., `game.html`), then open it in a web browser to play the game:

To play the game: 1. Save the code as an HTML file (e.g., `game.html`). 2. Open the HTML file in a web browser. 3. On a smartphone, touch anywhere on the screen to move the player. 4. The rolling spike ball will follow your touch input and destroy the square boxes that randomly spawn. 5. Enjoy playing the game in a forest-like setting! Please note that this is a basic example and can be further improved and expanded upon based on your requirements and preferences.

←

Prev　Next

→ 　

Back　

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

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

Copy the following code and save it as a single HTML file (e.g., `game.html`), then open it in a web browser to play the game:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Forest Game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        
        #gameCanvas {
            background-color: #91CC82;
        }
        
        .player {
            position: absolute;
            width: 50px;
            height: 50px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-image: url('https://image.flaticon.com/icons/png/512/802/802211.png');
            background-size: cover;
        }
        
        .box {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: #D8AE55;
        }
        
        .spikeBall {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('https://image.flaticon.com/icons/svg/2136/2136464.svg');
            background-size: cover;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    
    <script>
        // Game settings
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        const width = window.innerWidth;
        const height = window.innerHeight;
        const playerSize = 50;
        const boxSize = 30;
        const spikeBallSize = 50;
        const spawnInterval = 1500; // in milliseconds
        
        // Player settings
        let playerX = width / 2;
        let playerY = height / 2;
        
        // Box settings
        let boxes = [];
        
        // Spike ball settings
        let spikeBallX = playerX;
        let spikeBallY = playerY;
        let spikeBallSpeed = 2;
        
        // Function to handle player's touch input
        function handleTouch(event) {
            playerX = event.touches[0].clientX;
            playerY = event.touches[0].clientY;
        }
        
        // Update function called every frame
        function update() {
            // Clear canvas
            ctx.clearRect(0, 0, width, height);
            
            // Update player position
            const player = document.createElement('div');
            player.classList.add('player');
            player.style.left = `${playerX - (playerSize / 2)}px`;
            player.style.top = `${playerY - (playerSize / 2)}px`;
            document.body.appendChild(player);
            
            // Update spike ball position
            const spikeBall = document.createElement('div');
            spikeBall.classList.add('spikeBall');
            spikeBall.style.left = `${spikeBallX - (spikeBallSize / 2)}px`;
            spikeBall.style.top = `${spikeBallY - (spikeBallSize / 2)}px`;
            document.body.appendChild(spikeBall);
            
            // Check collision between spike ball and boxes
            boxes.forEach((box, index) => {
                const boxElement = document.getElementsByClassName('box')[index];
                if (
                    spikeBallX < box.x + boxSize &&
                    spikeBallX + spikeBallSize > box.x &&
                    spikeBallY < box.y + boxSize &&
                    spikeBallY + spikeBallSize > box.y
                ) {
                    boxes.splice(index, 1); // Remove the collided box
                    boxElement.remove(); // Remove the box element from DOM
                }
            });
            
            // Move spike ball towards the player
            if (spikeBallX > playerX)
                spikeBallX -= spikeBallSpeed;
            else if (spikeBallX < playerX)
                spikeBallX += spikeBallSpeed;
            
            if (spikeBallY > playerY)
                spikeBallY -= spikeBallSpeed;
            else if (spikeBallY < playerY)
                spikeBallY += spikeBallSpeed;
            
            // Spawn new boxes randomly
            if (Math.random() < 0.01) {
                const randomX = Math.random() * width;
                const randomY = Math.random() * height;
                boxes.push({ x: randomX, y: randomY });
                
                const boxElement = document.createElement('div');
                boxElement.classList.add('box');
                boxElement.style.left = `${randomX}px`;
                boxElement.style.top = `${randomY}px`;
                document.body.appendChild(boxElement);
            }
        }
    
        // Game loop
        function gameLoop() {
            update();
            requestAnimationFrame(gameLoop);
        }
        
        // Start the game
        canvas.width = width;
        canvas.height = height;
        document.body.style.height = `${height}px`;
        document.body.addEventListener('touchstart', handleTouch, false);
        gameLoop();
    </script>
</body>
</html>
```

To play the game:
1. Save the code as an HTML file (e.g., `game.html`).
2. Open the HTML file in a web browser.
3. On a smartphone, touch anywhere on the screen to move the player.
4. The rolling spike ball will follow your touch input and destroy the square boxes that randomly spawn.
5. Enjoy playing the game in a forest-like setting!

Please note that this is a basic example and can be further improved and expanded upon based on your requirements and preferences.