A button that controls the cat's movement's game

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

No:37909

←

Prev Next

→

A button that controls the cat's movement
Developer User17149｜Date and time 24/1/21 20:20:41
Build time 6.516 sec｜Game capacity 1.64KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Cat Game</title>
    <style>
        #gameContainer {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            position: relative;
            margin: auto;
            overflow: hidden;
        }
        #cat {
            width: 50px;
            height: 50px;
            position: absolute;
            bottom: 0;
            left: 0;
            background-image: url('cat.png');
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="gameContainer">
        <div id="cat"></div>
    </div>
    <button id="moveLeft">Move Left</button>
    <button id="moveRight">Move Right</button>
    
    <script>
        var cat = document.getElementById("cat");
        var moveLeftButton = document.getElementById("moveLeft");
        var moveRightButton = document.getElementById("moveRight");
        var containerWidth = document.getElementById("gameContainer").offsetWidth;
        var catPosition = 0;
        
        moveLeftButton.addEventListener("click", function() {
            moveCat(-50);
        });
        
        moveRightButton.addEventListener("click", function() {
            moveCat(50);
        });
        
        function moveCat(distance) {
            catPosition += distance;
            if (catPosition < 0) {
                catPosition = 0;
            }
            else if (catPosition > containerWidth - cat.offsetWidth) {
                catPosition = containerWidth - cat.offsetWidth;
            }
            cat.style.left = catPosition + "px";
        }
    </script>
</body>
</html>