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

No:7549

8002

←

Prev Next

→

Princess of the Weak Male
Developer User3997｜Date and time 23/7/8 15:38:29
Build time 29.773 sec｜Game capacity 4.743KB｜

Script

了解しました。以下に、スマホで遊べる簡単なゲームの例を示します。このゲームでは、弱者の男性が姫を目指して冒険する様子を表現します。プレイヤーは男性を操作して、様々な障害物を避けながら姫に辿り着くことを目指します。

弱者男性の姫

👸

このプログラムは、「弱者男性の姫」をテーマにしたシンプルな移動ゲームです。プレイヤーは↑↓←→キー（スマホの場合は画面タップ）で移動し、画面外や障害物にぶつかるとゲームオーバーとなります。姫に辿り着くことが目標です。スタートするにはゲームエリアをクリックまたはタップしてください。

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>弱者男性の姫</title>
    <style>
        #player {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 48px;
        }
        .obstacle {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <h1>弱者男性の姫</h1>
    <div id="gameArea"></div>
    <p id="player">👸</p>
    <script>
        // ゲームの状態
        let gameStarted = false;
        let gameOver = false;

// プレイヤーの初期位置
        let playerX = 50;
        let playerY = 50;

// ゲームエリアのサイズ
        let gameWidth = 500;
        let gameHeight = 500;

// プレイヤーと障害物の要素を取得
        const playerElem = document.getElementById('player');
        const gameArea = document.getElementById('gameArea');

// プレイヤーの初期表示
        playerElem.style.left = playerX + 'px';
        playerElem.style.top = playerY + 'px';

// ゲームエリアをクリックした時の処理
        /*gameArea.addEventListener('click', function(event) {
            if (!gameStarted || gameOver) {
                startGame();
            }
        });*/

// ゲームスタート
        function startGame() {
            gameStarted = true;
            gameOver = false;
            resetPlayerPosition();
            spawnObstacles();
        }

// プレイヤーの位置を初期化
        function resetPlayerPosition() {
            playerX = 50;
            playerY = 50;
            playerElem.style.left = playerX + 'px';
            playerElem.style.top = playerY + 'px';
        }

// 障害物の生成とアニメーション
        function spawnObstacles() {
            const obstacle = document.createElement('div');
            obstacle.classList.add('obstacle');
            obstacle.style.left = Math.random() * (gameWidth - 100) + 'px';
            obstacle.style.top = Math.random() * (gameHeight - 100) + 'px';
            gameArea.appendChild(obstacle);

setTimeout(function() {
                if (!gameOver) {
                    gameArea.removeChild(obstacle);
                    spawnObstacles();
                }
            }, 2000);
        }

// ゲームオーバー
        function endGame() {
                console.log("endGame");
            gameStarted = false;
            gameOver = true;
            alert('Game Over!');
        }

// プレイヤーの移動処理
        function movePlayer(event) {

//console.log("movePlayer gameStarted"+gameStarted+"/gameOver="+gameOver);

if (!gameStarted || gameOver) return;

let newX = playerX;
            let newY = playerY;

switch (event.keyCode) {
                case 37: // 左
                    newX -= 10;
                    break;
                case 38: // 上
                    newY -= 10;
                    break;
                case 39: // 右
                    newX += 10;
                    break;
                case 40: // 下
                    newY += 10;
                    break;
            }

if (newX < 0 || newX > gameWidth || newY < 0 || newY > gameHeight) {
                endGame();
            } else {
                //console.log("newX="+newX+"/newY="+newY);
                playerX = newX;
                playerY = newY;
                playerElem.style.left = playerX + 'px';
                playerElem.style.top = playerY + 'px';
            }
        }

// キーボードの矢印キーを押した時にプレイヤーを移動
        window.addEventListener('keydown', movePlayer);

startGame();
    </script>
</body>
</html>
```