Play with elements ,water, lava, fire, blue fire and more, sandbox, black background's game

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

No:37512

←

Prev Next

→

Play with elements ,water, lava, fire, blue fire a..ALL
Developer User17064｜Date and time 24/1/21 4:47:59
Build time 10.697 sec｜Game capacity 3.796KB｜

Script

Sure, here's a simple game implemented as a single HTML file, using JavaScript and enclosed in script tags. The game allows you to play with different elements such as water, lava, fire, blue fire, and more. It is designed for smartphone operation and features pictograms. The game is set in a sandbox with a black background.

To play the game, simply open the HTML file in a web browser on your smartphone and interact with the screen. When you touch the screen, a new element will be created at the location of your touch. You can create multiple elements and observe their movement on the screen. The elements will have random colors and will move around based on their velocity. The game will continue running until you release your touch, at which point all elements will be removed from the screen. The canvas will continuously update to provide a smooth gameplay experience.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Element Sandbox</title>
    <style>
        body {
            background-color: black;
            margin: 0;
            overflow: hidden;
        }
        #canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

// Create the canvas
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");

// Set canvas size
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Define element colors
        const colors = {
            water: "#3366ff",
            lava: "#ff3300",
            fire: "#ff9900",
            blueFire: "#00ccff"
        };

// Create an array to store elements
        let elements = [];

// Handle user input
        canvas.addEventListener("touchstart", handleTouchStart, false);
        canvas.addEventListener("touchend", handleTouchEnd, false);

function handleTouchStart(event) {
            // Get touch position
            const touchX = event.touches[0].clientX;
            const touchY = event.touches[0].clientY;

// Create new element at touch position
            createNewElement(touchX, touchY);
        }

function handleTouchEnd(event) {
            // Remove all elements on touch end
            elements = [];
        }

// Create a new element at specified position
        function createNewElement(x, y) {
            const element = {
                x: x,
                y: y,
                size: 20,
                color: getRandomColor(),
                velocityX: Math.random() * 2 - 1,
                velocityY: Math.random() * 2 - 1
            };

elements.push(element);
        }

// Generate a random color from defined colors
        function getRandomColor() {
            const colorKeys = Object.keys(colors);
            const randomKey = colorKeys[Math.floor(Math.random() * colorKeys.length)];
            return colors[randomKey];
        }

// Update game state
        function update() {
            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update element positions
            elements.forEach(element => {
                // Apply velocity to position
                element.x += element.velocityX;
                element.y += element.velocityY;

// Draw element on canvas
                ctx.fillStyle = element.color;
                ctx.fillRect(element.x - element.size / 2, element.y - element.size / 2, element.size, element.size);
            });

// Recursive call for continuous update
            requestAnimationFrame(update);
        }

// Start the game
        update();
    </script>
</body>
</html>
```