Animation vs Minecraft's game

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

No:38181

←

Prev Next

→

Animation vs Minecraft
Developer User17264｜Date and time 24/1/23 4:56:46
Build time 18.148 sec｜Game capacity 4.672KB｜

Script

Note: This is a basic implementation of a game where the player controls two pictograms (Animation and Minecraft) by touching and dragging them on a smartphone screen. The goal is to avoid collision between the two pictograms. The code assumes that you have two pictogram images named "emozi_all/game.png" and "emozi_apple.png" in the same directory as the HTML file. Please replace these images with your own if needed.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>Animation vs Minecraft Game</title>
<style>
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Pictogram images
        var animationImage = new Image();
        animationImage.src = "animation.png";
        var minecraftImage = new Image();
        minecraftImage.src = "minecraft.png";

// Pictogram positions
        var animationX = 50;
        var animationY = 50;
        var minecraftX = 350;
        var minecraftY = 350;

// Pictogram sizes
        var pictogramSize = 50;

// Game initialization
        function gameStart() {
            canvas = document.getElementById("gameCanvas");
            canvasContext = canvas.getContext("2d");
            isGameOver = false;

// Add event listeners for touch controls
            canvas.addEventListener("touchstart", touchStartHandler);
            canvas.addEventListener("touchmove", touchMoveHandler);

// Set up the game loop
            setInterval(updateGame, 20);
        }

// Game update loop
        function updateGame() {
            if (!isGameOver) {
                moveAnimation();
                moveMinecraft();
                checkCollision();
                drawGame();
            }
        }

// Update animation's position
        function moveAnimation() {
            animationX += Math.floor(Math.random() * 5) + 1;
            animationY += Math.floor(Math.random() * 5) + 1;
        }

// Update Minecraft's position
        function moveMinecraft() {
            minecraftX -= Math.floor(Math.random() * 5) + 1;
            minecraftY -= Math.floor(Math.random() * 5) + 1;
        }

// Check if the two pictograms collide
        function checkCollision() {
            if (
                animationX < minecraftX + pictogramSize &&
                animationX + pictogramSize > minecraftX &&
                animationY < minecraftY + pictogramSize &&
                animationY + pictogramSize > minecraftY
            ) {
                isGameOver = true;
                alert("Game Over");
            }
        }

// Draw the game on the canvas
        function drawGame() {
            canvasContext.clearRect(0, 0, canvas.width, canvas.height);
            canvasContext.drawImage(
                animationImage,
                animationX,
                animationY,
                pictogramSize,
                pictogramSize
            );
            canvasContext.drawImage(
                minecraftImage,
                minecraftX,
                minecraftY,
                pictogramSize,
                pictogramSize
            );
        }

// Touch control event handlers
        function touchStartHandler(event) {
            var touchX = event.touches[0].clientX;
            var touchY = event.touches[0].clientY;

// Check if touch is on Animation pictogram
            if (
                touchX >= animationX &&
                touchX <= animationX + pictogramSize &&
                touchY >= animationY &&
                touchY <= animationY + pictogramSize
            ) {
                animationX = touchX - pictogramSize / 2;
                animationY = touchY - pictogramSize / 2;
            }

// Check if touch is on Minecraft pictogram
            if (
                touchX >= minecraftX &&
                touchX <= minecraftX + pictogramSize &&
                touchY >= minecraftY &&
                touchY <= minecraftY + pictogramSize
            ) {
                minecraftX = touchX - pictogramSize / 2;
                minecraftY = touchY - pictogramSize / 2;
            }
        }

function touchMoveHandler(event) {
            event.preventDefault();
            touchStartHandler(event);
        }
    </script>
    <script>
        // Start the game when the page loads
        window.onload = function () {
            gameStart();
        };
    </script>
</body>
</html>
```

Note: This is a basic implementation of a game where the player controls two pictograms (Animation and Minecraft) by touching and dragging them on a smartphone screen. The goal is to avoid collision between the two pictograms. The code assumes that you have two pictogram images named "animation.png" and "minecraft.png" in the same directory as the HTML file. Please replace these images with your own if needed.