>Animation of Someone walking into a blackhole portal (Dooz's big bang 2 teaser)'s game

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

No:30569

136

←

Prev Next

→

>Animation of Someone walking into a blackhole ..ALL
Developer Dooz studio｜Date and time 23/12/23 1:48:37
Build time 28.028 sec｜Game capacity 3.674KB｜

Script

Sure! Here's a simple HTML file that implements a game where you can control a character using pictograms and guide them through a black hole portal animation. Save this code in a single HTML file and open it in a browser to play the game:

Please note that in the above code, you'll need to replace the placeholder `emozi_rabbit.png` and `emozi_apple.png` with actual image paths representing the character and black hole pictograms you want to use.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        /* CSS styles to arrange and display the game */
        body {
            background-color: #000;
            margin: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
        #gameCanvas {
            border: 1px solid #fff;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Load the pictogram images
        const characterImage = new Image();
        characterImage.src = "character.png";

const blackHoleImage = new Image();
        blackHoleImage.src = "blackhole.png";

// Character properties
        let characterX = canvas.width / 2;
        let characterY = canvas.height / 2;
        let characterSpeed = 2;

// Black hole properties
        let blackHoleX = canvas.width / 2 - 50;
        let blackHoleY = canvas.height / 2 - 50;
        let blackHoleSize = 100;

// Handle keyboard input
        const keys = {};
        
        document.addEventListener("keydown", (e) => {
            keys[e.key] = true;
        });

document.addEventListener("keyup", (e) => {
            delete keys[e.key];
        });

// Update game state and redraw canvas
        function update() {
            // Move character based on arrow keys
            if ("ArrowLeft" in keys) {
                characterX -= characterSpeed;
            }
            if ("ArrowRight" in keys) {
                characterX += characterSpeed;
            }
            if ("ArrowUp" in keys) {
                characterY -= characterSpeed;
            }
            if ("ArrowDown" in keys) {
                characterY += characterSpeed;
            }

// Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw character
            ctx.drawImage(characterImage, characterX, characterY, 50, 50);

// Draw black hole
            ctx.drawImage(blackHoleImage, blackHoleX, blackHoleY, blackHoleSize, blackHoleSize);

// Check if character is colliding with the black hole
            if (
                characterX < blackHoleX + blackHoleSize &&
                characterX + 50 > blackHoleX &&
                characterY < blackHoleY + blackHoleSize &&
                characterY + 50 > blackHoleY
            ) {
                // Character entered the black hole, end the game or trigger animation here
                alert("You entered the black hole!");
                resetGame();
            } else {
                // Keep updating the game
                requestAnimationFrame(update);
            }
        }

// Reset game state
        function resetGame() {
            characterX = canvas.width / 2;
            characterY = canvas.height / 2;
        }

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

Please note that in the above code, you'll need to replace the placeholder `character.png` and `blackhole.png` with actual image paths representing the character and black hole pictograms you want to use.