AI game creator

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

No:35081

←

Prev Next

→

Elephant Chase
Developer User16431｜Date and time 24/1/13 9:19:40
Build time 8.658 sec｜Game capacity 3.408KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Elephant Chase</title>
    <style>
        #game-container {
            width: 400px;
            height: 400px;
            background: #e3e3e3;
            position: relative;
            overflow: hidden;
        }
        #elephant, #target {
            width: 80px;
            height: 80px;
            position: absolute;
        }
        #elephant {
            background-image: url('elephant.png'); /* Assuming pictogram images named 'elephant.png' and 'target.png' are in the same folder */
        }
        #target {
            background-image: url('target.png');
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="elephant"></div>
        <div id="target"></div>
    </div>

var containerWidth = container.offsetWidth;
        var containerHeight = container.offsetHeight;

var elephantCatched = false;
        var targetPositionX, targetPositionY;
        var elephantPositionX, elephantPositionY;

// Function to update the position of the target
        function updateTargetPosition() {
            targetPositionX = Math.floor(Math.random() * (containerWidth - 80));
            targetPositionY = Math.floor(Math.random() * (containerHeight - 80));

target.style.left = targetPositionX + "px";
            target.style.top = targetPositionY + "px";
        }

// Event listener to check if elephant touches the target
        elephant.addEventListener("click", function() {
            if (!elephantCatched) {
                var elephantBounds = elephant.getBoundingClientRect();
                var targetBounds = target.getBoundingClientRect();

if (elephantBounds.left < targetBounds.right && elephantBounds.right > targetBounds.left &&
                    elephantBounds.top < targetBounds.bottom && elephantBounds.bottom > targetBounds.top) {
                    alert("Congratulations! You caught the target!");
                    elephantCatched = true;
                }
            }
        });

// Event listener to move the elephant
        container.addEventListener("mousemove", function(event) {
            elephantPositionX = event.clientX - container.offsetLeft - (elephant.offsetWidth / 2);
            elephantPositionY = event.clientY - container.offsetTop - (elephant.offsetHeight / 2);

// Prevent the elephant from going outside the game container
            if (elephantPositionX < 0) {
                elephantPositionX = 0;
            } else if (elephantPositionX > containerWidth - elephant.offsetWidth) {
                elephantPositionX = containerWidth - elephant.offsetWidth;
            }

if (elephantPositionY < 0) {
                elephantPositionY = 0;
            } else if (elephantPositionY > containerHeight - elephant.offsetHeight) {
                elephantPositionY = containerHeight - elephant.offsetHeight;
            }

elephant.style.left = elephantPositionX + "px";
            elephant.style.top = elephantPositionY + "px";
        });

// Initialize game
        updateTargetPosition();
    </script>
</body>
</html>