A cat run on road dog chase and control it with touch left right up down's game

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

No:39741

←

Prev Next

→

A cat run on road dog chase and control it with to..ALL
Developer User17791｜Date and time 24/1/30 1:40:16
Build time 27.036 sec｜Game capacity 5.119KB｜

Script

Sure! Here's a simple game implementation in a single HTML file using JavaScript. The game involves a cat running on a road while being chased by a dog. You can control the cat's movements using touch controls for left, right, up, and down.

Please note that in this implementation, I assume you have the cat and dog images available and they are named `emozi_all/cat.png` and `emozi_all/dog.png` respectively. The images can be placed in the same directory as the HTML file. Also, feel free to customize the game styling and add more features as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cat and Dog Game</title>
    <style>
        #game-container {
            height: 400px;
            width: 100%;
            border: 1px solid black;
            position: relative;
        }

#cat {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 50px;
            width: 50px;
            background-image: url('cat.png');
            background-size: cover;
        }

#dog {
            position: absolute;
            top: 30%;
            left: -10%;
            height: 75px;
            width: 75px;
            background-image: url('dog.png');
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="cat"></div>
        <div id="dog"></div>
    </div>

var gameWidth = container.offsetWidth;
        var gameHeight = container.offsetHeight;

var catPosX = gameWidth / 2;
        var catPosY = gameHeight / 2;

var dogPosX = -dog.offsetWidth;
        var dogPosY = gameHeight * 0.3;

cat.style.left = catPosX + 'px';
        cat.style.top = catPosY + 'px';

dog.style.left = dogPosX + 'px';
        dog.style.top = dogPosY + 'px';

container.addEventListener('touchstart', handleTouchStart, false);
        container.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
        var yDown = null;

function handleTouchStart(event) {
            xDown = event.touches[0].clientX;
            yDown = event.touches[0].clientY;
        }

function handleTouchMove(event) {
            if (!xDown || !yDown) {
                return;
            }

var xUp = event.touches[0].clientX;
            var yUp = event.touches[0].clientY;

var xDiff = xDown - xUp;
            var yDiff = yDown - yUp;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
                if (xDiff > 0) {
                    moveCatLeft();
                } else {
                    moveCatRight();
                }
            } else {
                if (yDiff > 0) {
                    moveCatUp();
                } else {
                    moveCatDown();
                }
            }

xDown = null;
            yDown = null;
        }

function moveCatLeft() {
            catPosX -= 10;
            cat.style.left = catPosX + 'px';
        }

function moveCatRight() {
            catPosX += 10;
            cat.style.left = catPosX + 'px';
        }

function moveCatUp() {
            catPosY -= 10;
            cat.style.top = catPosY + 'px';
        }

function moveCatDown() {
            catPosY += 10;
            cat.style.top = catPosY + 'px';
        }

// Game loop
        setInterval(function() {
            // Move the dog towards the cat
            if (dogPosX < catPosX) {
                dogPosX += 5;
            } else {
                dogPosX -= 5;
            }

if (dogPosY < catPosY) {
                dogPosY += 5;
            } else {
                dogPosY -= 5;
            }

dog.style.left = dogPosX + 'px';
            dog.style.top = dogPosY + 'px';

// Check for collision
            if (
                catPosX < dogPosX + dog.offsetWidth &&
                catPosX + cat.offsetWidth > dogPosX &&
                catPosY < dogPosY + dog.offsetHeight &&
                catPosY + cat.offsetHeight > dogPosY
            ) {
                alert('Game Over! The dog caught the cat!');
                cat.style.backgroundColor = 'red';
                cat.style.transition = 'background-color 2s';
                setTimeout(function() {
                    resetGame();
                }, 2000);
            }
        }, 1000 / 60);

function resetGame() {
            cat.style.backgroundColor = 'initial';
            catPosX = gameWidth / 2;
            catPosY = gameHeight / 2;
            cat.style.left = catPosX + 'px';
            cat.style.top = catPosY + 'px';

dogPosX = -dog.offsetWidth;
            dogPosY = gameHeight * 0.3;
            dog.style.left = dogPosX + 'px';
            dog.style.top = dogPosY + 'px';
        }
    </script>
</body>
</html>
```

Please note that in this implementation, I assume you have the cat and dog images available and they are named `cat.png` and `dog.png` respectively. The images can be placed in the same directory as the HTML file. Also, feel free to customize the game styling and add more features as per your requirements.