Make a simple movement game where you have movement with buttons, PC and mobile's game

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

No:43589

←

Prev Next

→

Make a simple movement game where you have movemen..ALL
Developer User19162｜Date and time 24/2/16 4:28:36
Build time 9.472 sec｜Game capacity 2.983KB｜

Script

Sure! Here's an example of a simple movement game implemented as a single HTML file using JavaScript. The game allows movement with buttons and is designed to work on both PCs and smartphones using pictograms.

In this game, the player is represented by a blue square (pictogram) and can be moved up, down, left, or right using buttons. The game container is a 300x300 pixels square, and the player starts at the center. The CSS styles and JavaScript code handle the positioning and movement logic. You can copy this code into a single HTML file and open it in a web browser to play the game. The game is designed to work on both PCs and smartphones, and the movement buttons can be clicked with a mouse or tapped with a finger on a touchscreen device.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Simple Movement Game</title>
    <style>
        #game-container {
            width: 600px;
            height: 300px;
            border: 1px solid lime;
            position: relative;
        }
        
        #player {
            width: 50px;
            height: 50px;
            background-color: teal;
            position: absolute;
            top: 125px;
            left: 125px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
    </div>

// Function to update player position
        function updatePlayerPosition() {
            player.style.top = playerTop + "px";
            player.style.left = playerLeft + "px";
        }

// Function to handle button clicks
        function move(direction) {
            switch (direction) {
                case "up":
                    playerTop -= 10;
                    break;
                case "down":
                    playerTop += 10;
                    break;
                case "left":
                    playerLeft -= 10;
                    break;
                case "right":
                    playerLeft += 10;
                    break;
            }
            updatePlayerPosition();
        }

// Attach click event listeners to buttons
        document.getElementById("up-btn").addEventListener("click", () => move("up"));
        document.getElementById("down-btn").addEventListener("click", () => move("down"));
        document.getElementById("left-btn").addEventListener("click", () => move("left"));
        document.getElementById("right-btn").addEventListener("click", () => move("right"));
    </script>

<button id="up-btn">⬆️</button>
    <br>
    <button id="left-btn">⬅️</button>
    <button id="right-btn">➡️</button>
    <br>
    <button id="down-btn">⬇️</button>
</body>
</html>
```

You can copy this code into a single HTML file and open it in a web browser to play the game. The game is designed to work on both PCs and smartphones, and the movement buttons can be clicked with a mouse or tapped with a finger on a touchscreen device.