Move around to dodge the enemies and touch the yellow line to win if you touch a enemy you lose's game

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

No:38637

←

Prev Next

→

Move around to dodge the enemies and touch the yel..ALL
Developer User10392｜Date and time 24/1/25 6:29:02
Build time 22.423 sec｜Game capacity 5.829KB｜

Script

Here's an example of a simple game implemented as a single HTML file, using JavaScript and enclosed in script tags. This game can be played on a smartphone and uses pictograms for visual representation:

To play the game on a smartphone, open this HTML file in a web browser or run it on a web server. You can move the player (rocket icon) left or right by swiping on the canvas. Dodge the enemies (explosion icon) and touch the yellow line (checkered flag icon) to win. If you touch an enemy, you lose. The game will display alerts for game over and winning conditions.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Dodge Game</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Game parameters
        const canvasSize = { width: 300, height: 400 };
        const playerSize = { width: 30, height: 30 };
        const enemySize = { width: 30, height: 30 };
        const goalSize = { width: 30, height: 30 };
        const playerSpeed = 5;
        const enemySpeed = 3;
        const goalPosition = { x: canvasSize.width / 2 - (goalSize.width / 2), y: 10 };

// Game state variables
        let playerPosition = { x: canvasSize.width / 2 - (playerSize.width / 2), y: canvasSize.height - playerSize.height - 10 };
        let enemies = [
            { x: 50, y: 50, direction: "right" },
            { x: 200, y: 150, direction: "left" },
            { x: 100, y: 250, direction: "right" }
        ];
        let isGameOver = false;

// Canvas setup
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");
        canvas.width = canvasSize.width;
        canvas.height = canvasSize.height;

// Draw game elements function
        function drawGame() {
            context.clearRect(0, 0, canvasSize.width, canvasSize.height);
            
            // Draw player
            context.fillText(playerIcon, playerPosition.x, playerPosition.y);
            
            // Draw enemies
            enemies.forEach(enemy => {
                context.fillText(enemyIcon, enemy.x, enemy.y);
            });
            
            // Draw goal
            context.fillText(goalIcon, goalPosition.x, goalPosition.y);
        }

// Handle player movement function
        function movePlayer(direction) {
            if (!isGameOver) {
                if (direction === "left" && playerPosition.x > 0) {
                    playerPosition.x -= playerSpeed;
                } else if (direction === "right" && playerPosition.x < canvasSize.width - playerSize.width) {
                    playerPosition.x += playerSpeed;
                }
                checkCollision();
                drawGame();
            }
        }

// Check collision with enemies and goal function
        function checkCollision() {
            enemies.forEach(enemy => {
                if (playerPosition.x < enemy.x + enemySize.width &&
                    playerPosition.x + playerSize.width > enemy.x &&
                    playerPosition.y < enemy.y + enemySize.height &&
                    playerPosition.y + playerSize.height > enemy.y) {
                        isGameOver = true;
                        alert("Game Over! You touched an enemy.");
                }
            });
            
            if (playerPosition.x < goalPosition.x + enemySize.width &&
                playerPosition.x + playerSize.width > goalPosition.x &&
                playerPosition.y < goalPosition.y + enemySize.height &&
                playerPosition.y + playerSize.height > goalPosition.y) {
                    isGameOver = true;
                    alert("Congratulations! You reached the goal.");
            }
        }

// Handle touch events
        canvas.addEventListener("touchstart", handleTouchStart, false);
        canvas.addEventListener("touchmove", handleTouchMove, false);
        let initialTouchX = null;

function handleTouchStart(event) {
            initialTouchX = event.touches[0].clientX;
        }

// Game loop function
        function gameLoop() {
            if (!isGameOver) {
                enemies.forEach(enemy => {
                    if (enemy.direction === "right" && enemy.x + enemySize.width < canvasSize.width) {
                        enemy.x += enemySpeed;
                    } else if (enemy.direction === "right") {
                        enemy.direction = "left";
                    } else if (enemy.direction === "left" && enemy.x > 0) {
                        enemy.x -= enemySpeed;
                    } else if (enemy.direction === "left") {
                        enemy.direction = "right";
                    }
                });
                checkCollision();
                drawGame();
            }
            
            requestAnimationFrame(gameLoop);
        }

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