Make a walking game where you just walk in the park's game

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

No:16596

←

Prev Next

→

Make a walking game where you just walk in the par..ALL
Developer User7388｜Date and time 23/9/19 18:02:42
Build time 28.083 sec｜Game capacity 3.117KB｜

Script

Sure! Here's a simple game where you can walk in the park using pictograms.

Use arrow keys to move

Instructions: 1. Save the park background image as `emozi_all/background.png` in the same directory as the HTML file. 2. Save the player pictogram image as `emozi_all/player.png` in the same directory. 3. Open the HTML file in a browser. 4. Use the arrow keys on your smartphone to move the player pictogram and walk in the park. In this simple game, pressing the arrow keys will move the player pictogram around the park background. Enjoy your walk in the park!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple game where you can walk in the park using pictograms.

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
        #status {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-size: 20px;
        }
        #park {
            background-image: url(park.png);
            background-size: cover;
            width: 100%;
            height: 100%;
            position: absolute;
        }
        #player {
          width: 50px;
          height: 50px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="status">Use arrow keys to move</div>
    <div id="park"></div>
    
    <script>
        // Pictograms for the player
        const playerImage = new Image();
        playerImage.src = "player.png";

// Initialize canvas and context
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        document.body.appendChild(canvas);

// Player position and speed variables
        let playerX = canvas.width / 2;
        let playerY = canvas.height / 2;
        const playerSpeed = 5;

// Handle key events for player movement
        document.addEventListener("keydown", (event) => {
            switch (event.keyCode) {
                case 37: // Left arrow
                    playerX -= playerSpeed;
                    break;
                case 38: // Up arrow
                    playerY -= playerSpeed;
                    break;
                case 39: // Right arrow
                    playerX += playerSpeed;
                    break;
                case 40: // Down arrow
                    playerY += playerSpeed;
                    break;
            }
        });

// Update game state and render the scene
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the park background
            ctx.drawImage(document.getElementById('park'), 0, 0, window.innerWidth, window.innerHeight);

// Draw the player
            ctx.drawImage(playerImage, playerX - playerImage.width / 2, playerY - playerImage.height / 2);

requestAnimationFrame(gameLoop);
        }

// Start the game loop
        gameLoop();
    </script>
</body>
</html>
```

Instructions:
1. Save the park background image as `park.png` in the same directory as the HTML file.
2. Save the player pictogram image as `player.png` in the same directory.
3. Open the HTML file in a browser.
4. Use the arrow keys on your smartphone to move the player pictogram and walk in the park.

In this simple game, pressing the arrow keys will move the player pictogram around the park background. Enjoy your walk in the park!