Water movements & shading animation in 3d's game

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

No:19825

←

Prev Next

→

Water movements & shading animation in 3d
Developer User8852｜Date and time 23/10/7 3:37:34
Build time 13.758 sec｜Game capacity 2.239KB｜

Script

Sure! Here's an example of a simple game that involves water movements and shading animation in 3D using JavaScript within a single HTML file. Please note that due to the limitations of text-based interface, pictograms may not be feasible. However, I'll be using ASCII art to represent the water movements.

In this game, you'll see a canvas element representing water. The water level starts at 80 and gradually decreases every 100ms to simulate an animation of water level changing over time. Additionally, when you tap on the canvas, the water level increases by 10 units. The water is represented using colored rectangles in a 3D perspective. Please note that this is just a simple demonstration and can be expanded upon to create a more complex and visually appealing game.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #canvas {
            width: 400px;
            height: 400px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div id="canvas"></div>

const waterColors = ["#99c2ff", "#66a3ff", "#3385ff", "#0066cc"];

let waterLevel = 80;

function drawWater(level) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = "#66b3ff";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < level; i++) {
                const colorIndex = Math.floor(waterLevel / 20);
                ctx.fillStyle = waterColors[colorIndex];
                ctx.fillRect(i * 20, canvas.height - (i * 20), 20, 20);
            }
        }

// Event handler to change water level on tap
        canvas.addEventListener("touchend", function (e) {
            waterLevel += 10;
            if (waterLevel > 100) waterLevel = 100;
            drawWater(waterLevel);
        });

// Initial rendering
        drawWater(waterLevel);

// Animation loop
        setInterval(function () {
            waterLevel -= 3;
            if (waterLevel < 0) waterLevel = 0;
            drawWater(waterLevel);
        }, 100);

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

Please note that this is just a simple demonstration and can be expanded upon to create a more complex and visually appealing game.