壁にくり抜かれた穴を人が通り抜けるゲーム's game

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

No:26288

112

←

Prev Next

→

壁にくり抜かれた穴を人が通り抜けるゲーム
Developer User12985｜Date and time 23/11/28 18:59:11
Build time 42.475 sec｜Game capacity 3.381KB｜

Script

了解です。以下にサンプルのプログラムを記述します。このプログラムは、スマートフォンでプレイすることを前提としており、壁にくり抜かれた穴を人が通り抜けるゲームとなっています。

🚶

このプログラムでは、プレイヤー（人）を上下に移動させます。プレイヤーは壁をくり抜かれた穴を通り抜ける必要がありますが、穴の上端や下端に衝突するとゲームオーバーとなります。ゲームオーバー時にはアラートで通知し、ページをリロードしてゲームを再開します。プレイヤーはスマートフォンのタッチ操作によって上下に移動します。タッチした位置によってプレイヤーが上下に動くようになっています。このプログラムを1枚のhtmlファイルとして実装してください。JavaScriptは必ずscriptタグで囲むようにしてください。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #player {
            position: absolute;
            font-size: 30px;
            line-height: 30px;
        }
        #wall {
            width: 200px;
            height: 400px;
            position: absolute;
            background-color: black;
        }
        #hole {
            width: 200px;
            height: 80px;
            position: absolute;
            background-color: white;
        }
    </style>
</head>
<body>
    <div id="player">🚶</div>
    <div id="wall"></div>
    <div id="hole"></div>
    
    <script>
        window.addEventListener('load', function() {
            var player = document.getElementById('player');
            var wall = document.getElementById('wall');
            var hole = document.getElementById('hole');
            
            var playerTop = 300; // 初期位置の上端
            var playerHeight = 30; // プレイヤーの縦の大きさ
            var holeTop = Math.floor(Math.random() * (400 - 80));  // 穴の上端位置（ランダム）
            
            hole.style.top = holeTop + 'px'; // 穴の位置を設定する
            
            function moveUp() {
                playerTop -= 10;
                player.style.top = playerTop + 'px';
                checkCollision();
            }
            
            function moveDown() {
                playerTop += 10;
                player.style.top = playerTop + 'px';
                checkCollision();
            }
            
            function checkCollision() {
                var playerBottom = playerTop + playerHeight;
                var holeBottom = holeTop + 80;
                
                if ((playerBottom < holeTop || playerTop > holeBottom) && playerTop !== holeTop) {
                    gameOver();
                }
            }
            
            function gameOver() {
                alert('ゲームオーバー');
                location.reload();
            }
            
            document.addEventListener('touchstart', function(e) {
                var touchY = e.touches[0].clientY;
                
                if (touchY < playerTop) {
                    moveUp();
                } else if (touchY > playerTop + playerHeight) {
                    moveDown();
                }
            });
        });
    </script>
</body>
</html>
```

このプログラムでは、プレイヤー（人）を上下に移動させます。プレイヤーは壁をくり抜かれた穴を通り抜ける必要がありますが、穴の上端や下端に衝突するとゲームオーバーとなります。ゲームオーバー時にはアラートで通知し、ページをリロードしてゲームを再開します。

プレイヤーはスマートフォンのタッチ操作によって上下に移動します。タッチした位置によってプレイヤーが上下に動くようになっています。

このプログラムを1枚のhtmlファイルとして実装してください。JavaScriptは必ずscriptタグで囲むようにしてください。