Create a game where you control a dog with obstacles's game

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

No:40871

←

Prev Next

→

Create a game where you control a dog with obstacl..ALL
Developer User18279｜Date and time 24/2/4 11:37:47
Build time 10.477 sec｜Game capacity 3.763KB｜

Script

Sure! Here's a simple game where you control a dog to avoid obstacles. It's implemented as a single HTML file and uses JavaScript code enclosed in script tags. The game assumes smartphone operation and uses pictograms to represent the dog and obstacles.

Make sure to replace "emozi_all/dog.png" and "emozi_apple.png" with the actual paths to your pictogram images. Feel free to modify the game logic, add scorekeeping, or customize the appearance based on your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Dog Obstacle Game</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="300" height="200"></canvas>

// Dog pictogram
            const dogImage = new Image();
            dogImage.src = "dog.png";

// Obstacle pictogram
            const obstacleImage = new Image();
            obstacleImage.src = "obstacle.png";

// Dog position and speed
            let dogX = 50;
            let dogY = canvas.height / 2;
            let dogSpeedY = 0;

// Gravity and jump settings
            const gravity = 0.5;
            const jumpPower = -10;

// Obstacle settings
            const obstacleWidth = 40;
            const obstacleHeight = 60;
            let obstacleX = canvas.width;
            let obstacleY = canvas.height - obstacleHeight;
            let obstacleSpeedX = 5;
            let isCollision = false;

// Control dog movement
            canvas.addEventListener("touchstart", function () {
                dogSpeedY = jumpPower;
            });

function updateGame() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);

// Render dog pictogram
                ctx.drawImage(dogImage, dogX, dogY, 40, 40);

// Apply gravity to the dog
                dogY += dogSpeedY;
                dogSpeedY += gravity;

// Render obstacle pictogram
                ctx.drawImage(obstacleImage, obstacleX, obstacleY, obstacleWidth, obstacleHeight);

// Move obstacle towards the dog
                obstacleX -= obstacleSpeedX;

// Detect collision
                if (dogX < obstacleX + obstacleWidth &&
                    dogX + 40 > obstacleX &&
                    dogY < obstacleY + obstacleHeight &&
                    dogY + 40 > obstacleY) {
                    isCollision = true;
                }

// Check game over condition
                if (isCollision || dogY + 40 > canvas.height || dogY < 0) {
                    gameOver();
                    return;
                }

// Increase score on successful obstacle avoidance
                if (dogX > obstacleX + obstacleWidth) {
                    increaseScore();
                }

requestAnimationFrame(updateGame);
            }

function gameOver() {
                alert("Game over!");
                resetGame();
            }

function increaseScore() {
                // Increase score logic here
            }

function resetGame() {
                dogY = canvas.height / 2;
                dogSpeedY = 0;
                obstacleX = canvas.width;
                isCollision = false;
                // Reset score logic here

// Re-start game
                updateGame();
            }

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

Make sure to replace "dog.png" and "obstacle.png" with the actual paths to your pictogram images. Feel free to modify the game logic, add scorekeeping, or customize the appearance based on your requirements.