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

No:20424

←

Prev Next

→

One Piece
Developer User9043｜Date and time 23/10/9 18:57:23
Build time 22.367 sec｜Game capacity 4.188KB｜

Script

One Piece 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>One Piece Game</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }

#game-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 500px;
        }

#game {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            position: relative;
        }

.character {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #4070C4;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            color: white;
        }

#player {
            top: 0;
            left: 0;
        }

#treasure {
            bottom: 0;
            right: 0;
            background-color: #FFD700;
        }
    </style>
</head>
<body>
    <h1>One Piece Game</h1>
    <div id="game-container">
        <div id="game">
            <div class="character" id="player">🏴‍☠️</div>
            <div class="character" id="treasure">🏴‍☠️</div>
        </div>
    </div>

const game = document.getElementById("game");
            const gameRect = game.getBoundingClientRect();

const getRandomPosition = () => {
                const position = {};
                position.x = Math.floor(Math.random() * (gameRect.width - 50));
                position.y = Math.floor(Math.random() * (gameRect.height - 50));
                return position;
            };

const movePlayer = (x, y) => {
                const currentPosition = player.getBoundingClientRect();
                let playerX = currentPosition.left - gameRect.left;
                let playerY = currentPosition.top - gameRect.top;

playerX += x;
                playerY += y;

if (playerX < 0) {
                    playerX = 0;
                } else if (playerX > gameRect.width - 50) {
                    playerX = gameRect.width - 50;
                }

if (playerY < 0) {
                    playerY = 0;
                } else if (playerY > gameRect.height - 50) {
                    playerY = gameRect.height - 50;
                }

player.style.left = playerX + "px";
                player.style.top = playerY + "px";

checkPlayerCollision();
            };

const checkPlayerCollision = () => {
                const playerRect = player.getBoundingClientRect();
                const treasureRect = treasure.getBoundingClientRect();

if (
                    playerRect.left < treasureRect.right &&
                    playerRect.right > treasureRect.left &&
                    playerRect.top < treasureRect.bottom &&
                    playerRect.bottom > treasureRect.top
                ) {
                    alert("Congratulations! You found the treasure!");
                    resetTreasurePosition();
                }
            };

const resetTreasurePosition = () => {
                const randomPosition = getRandomPosition();
                treasure.style.left = randomPosition.x + "px";
                treasure.style.top = randomPosition.y + "px";
            };

resetTreasurePosition();