Roll scrolling game where dog run to the right,collecting bones and avoiding obstacles's game

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

No:44480

100

←

Prev Next

→

Roll scrolling game where dog run to the right,col..ALL
Developer User19398｜Date and time 24/2/18 5:42:53
Build time 8.64 sec｜Game capacity 3.07KB｜

Script

This is a simple roll scrolling game implemented in a single HTML file. The game involves a dog running to the right, collecting bones, and avoiding obstacles. Use pictograms for the game elements such as the dog and bones. The game can be played on a smartphone by tapping on the screen to move the dog up and down. The game ends when the dog collides with an obstacle.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dog Runner Game</title>
<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

canvas {
        display: block;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="400"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

const dogImg = new Image();
    dogImg.src = 'dog.png';

const boneImg = new Image();
    boneImg.src = 'bone.png';

let dogX = 50;
    let dogY = 200;
    let boneX = canvas.width;
    let boneY = Math.floor(Math.random() * (canvas.height - 50));
    let score = 0;

const obstacles = [
        { x: 300, y: 200, width: 50, height: 50 }
    ];

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

// Draw dog
        ctx.drawImage(dogImg, dogX, dogY, 50, 50);

// Draw bone
        ctx.drawImage(boneImg, boneX, boneY, 50, 50);

// Draw obstacles
        obstacles.forEach(obstacle => {
            ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
        });

// Draw score
        ctx.fillStyle = 'black';
        ctx.font = '20px Arial';
        ctx.fillText(`Score: ${score}`, 10, 30);
    }

function update() {
        dogX += 5;
        boneX -= 5;

if (dogX + 50 >= boneX && dogY + 50 >= boneY && dogY <= boneY + 50) {
            score++;
            boneX = canvas.width;
            boneY = Math.floor(Math.random() * (canvas.height - 50));
        }

obstacles.forEach(obstacle => {
            if (dogX + 50 >= obstacle.x && dogY + 50 >= obstacle.y && dogY <= obstacle.y + 50) {
                gameOver();
            }
        });

if (dogX > canvas.width) {
            dogX = -50;
        }
    }

function gameOver() {
        alert(`Game Over! Your score: ${score}`);
        dogX = 50;
        dogY = 200;
        boneX = canvas.width;
        boneY = Math.floor(Math.random() * (canvas.height - 50));
        score = 0;
    }

document.addEventListener('keydown', (event) => {
        if (event.key === 'ArrowUp' && dogY > 0) {
            dogY -= 10;
        }

if (event.key === 'ArrowDown' && dogY + 50 < canvas.height) {
            dogY += 10;
        }
    });

function gameLoop() {
        update();
        draw();
        requestAnimationFrame(gameLoop);
    }

gameLoop();
</script>
</body>
</html>
```