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

No:35880

←

Prev Next

→

Create fantasy game
Developer User16672｜Date and time 24/1/15 19:16:35
Build time 15.345 sec｜Game capacity 3.949KB｜

Script

Fantasy Game

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Fantasy Game</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }

h1 {
            color: #FFD700;
            margin-bottom: 30px;
        }

#game-screen {
            margin: 0 auto;
            width: 400px;
            height: 400px;
            border: 2px solid black;
            position: relative;
        }

.character {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('character.png');
            background-size: contain;
        }

#player {
            top: 175px;
            left: 175px;
        }

#monster {
            top: 50px;
            left: 50px;
        }

#treasure {
            top: 300px;
            left: 250px;
        }

#play-button {
            display: block;
            margin-top: 30px;
            padding: 10px 20px;
            background-color: #FFD700;
            color: black;
            font-weight: bold;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Fantasy Game</h1>

var gameStarted = false;

function getRandomPosition() {
            var position = Math.floor(Math.random() * 350);
            return position;
        }

function moveCharacter(character) {
            var x = getRandomPosition();
            var y = getRandomPosition();
            character.style.top = x + "px";
            character.style.left = y + "px";
        }

function startGame() {
            playButton.style.display = 'none';
            gameStarted = true;
            moveCharacter(player);
            moveCharacter(monster);
            moveCharacter(treasure);
        }

playButton.addEventListener("click", startGame);

document.addEventListener("keydown", function (event) {
            if (!gameStarted) return;
            
            var x = parseInt(player.style.top);
            var y = parseInt(player.style.left);
            
            switch (event.key) {
                case "ArrowUp":
                    player.style.top = x - 10 + "px";
                    break;
                case "ArrowDown":
                    player.style.top = x + 10 + "px";
                    break;
                case "ArrowLeft":
                    player.style.left = y - 10 + "px";
                    break;
                case "ArrowRight":
                    player.style.left = y + 10 + "px";
                    break;
            }

if (checkCollision(player, monster)) {
                alert("You lost! The monster caught you!");
                gameStarted = false;
                playButton.style.display = 'block';
            }

if (checkCollision(player, treasure)) {
                alert("Congratulations! You found the treasure!");
                gameStarted = false;
                playButton.style.display = 'block';
            }
        });

function checkCollision(character1, character2) {
            var rect1 = character1.getBoundingClientRect();
            var rect2 = character2.getBoundingClientRect();
            return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
        }
    </script>
</body>
</html>