Control a man with joystick's game

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

No:20637

←

Prev Next

→

Control a man with joystick
Developer User9100｜Date and time 23/10/10 9:12:35
Build time 17.265 sec｜Game capacity 5.54KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript. The game allows you to control a character using a joystick-like control on a smartphone. It uses pictograms to represent the character and controls.

To open and play the game, simply copy the code into a new HTML file, save it with a `.html` extension, and open it in a web browser. The game interface will be displayed with a joystick-like control at the bottom left corner. Use your finger on the joystick handle to move the character represented by a pictogram. Release the joystick handle to stop character movement. The game interface will update accordingly to reflect the character's position. Please note that this is a basic example to demonstrate the concept and might not be optimized for all devices or screen sizes. You can further customize and enhance the game as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Joystick Game</title>
</head>
<body>
    <script>
        // Game variables
        var character = "🚶"; // Pictogram representing the character
        var characterPosition = { x: 0, y: 0 }; // Initial character position
        var movementStep = 10; // Step size for character movement

// Display the game interface
        function displayGameInterface() {
            // Create joystick controls
            var joystickContainer = document.createElement('div');
            joystickContainer.style.width = "100px";
            joystickContainer.style.height = "100px";
            joystickContainer.style.border = "2px solid black";
            joystickContainer.style.borderRadius = "50%";
            joystickContainer.style.position = "fixed";
            joystickContainer.style.left = "50px";
            joystickContainer.style.bottom = "50px";
            document.body.appendChild(joystickContainer);

// Create joystick handle
            var joystickHandle = document.createElement('div');
            joystickHandle.style.width = "50px";
            joystickHandle.style.height = "50px";
            joystickHandle.style.border = "2px solid black";
            joystickHandle.style.borderRadius = "50%";
            joystickHandle.style.backgroundColor = "grey";
            joystickHandle.style.position = "absolute";
            joystickHandle.style.left = "25px";
            joystickHandle.style.top = "25px";
            joystickHandle.style.pointerEvents = "none";
            joystickContainer.appendChild(joystickHandle);

// Track joystick movements
            joystickContainer.addEventListener('touchstart', function(event) {
                event.preventDefault();
                joystickContainer.style.backgroundColor = "lightgrey";
                joystickHandle.style.backgroundColor = "dimgrey";
            });

joystickContainer.addEventListener('touchmove', function(event) {
                event.preventDefault();
                var touch = event.touches[0];
                var touchX = touch.clientX - (joystickContainer.offsetLeft + joystickContainer.clientLeft) - (joystickHandle.offsetWidth / 2);
                var touchY = touch.clientY - (joystickContainer.offsetTop + joystickContainer.clientTop) - (joystickHandle.offsetHeight / 2);

// Limit joystick movement within the joystick container
                var maxX = joystickContainer.offsetWidth - joystickHandle.offsetWidth;
                var maxY = joystickContainer.offsetHeight - joystickHandle.offsetHeight;
                touchX = Math.max(0, Math.min(touchX, maxX));
                touchY = Math.max(0, Math.min(touchY, maxY));

// Move the character based on joystick position
                moveCharacter(touchX, touchY);

// Move the joystick handle correspondingly
                joystickHandle.style.transform = "translate(" + touchX + "px, " + touchY + "px)";
            });

joystickContainer.addEventListener('touchend', function(event) {
                event.preventDefault();
                joystickContainer.style.backgroundColor = "transparent";
                joystickHandle.style.backgroundColor = "grey";
                
                // Reset the joystick handle position
                joystickHandle.style.transform = "translate(0px, 0px)";
                
                // Stop character movement
                moveCharacter(0, 0);
            });
        }

// Move the character in the game world
        function moveCharacter(x, y) {
            characterPosition.x += x > 0 ? movementStep : (x < 0 ? -movementStep : 0);
            characterPosition.y += y > 0 ? movementStep : (y < 0 ? -movementStep : 0);
            renderGame();
        }

// Render the game world
        function renderGame() {
            var gameContainer = document.createElement('div');
            gameContainer.style.width = "100%";
            gameContainer.style.height = "100vh";
            gameContainer.style.display = "flex";
            gameContainer.style.justifyContent = "center";
            gameContainer.style.alignItems = "center";
            gameContainer.style.fontSize = "100px";
            gameContainer.innerHTML = character;
            gameContainer.style.left = characterPosition.x + "px";
            gameContainer.style.top = characterPosition.y + "px";
            document.body.appendChild(gameContainer);
        }

displayGameInterface();
        renderGame();
    </script>
</body>
</html>
```

To open and play the game, simply copy the code into a new HTML file, save it with a `.html` extension, and open it in a web browser. The game interface will be displayed with a joystick-like control at the bottom left corner. Use your finger on the joystick handle to move the character represented by a pictogram. Release the joystick handle to stop character movement. The game interface will update accordingly to reflect the character's position.

Please note that this is a basic example to demonstrate the concept and might not be optimized for all devices or screen sizes. You can further customize and enhance the game as per your requirements.