Control a man with joystick's game

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

No:20638

←

Prev Next

→

Control a man with joystick
Developer User9100｜Date and time 23/10/10 9:14:00
Build time 18.837 sec｜Game capacity 5.16KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file, using JavaScript and enclosed in script tags. The game allows you to control a man using a virtual joystick and is designed for smartphone operation. Pictograms are used for visuals.

In this game, you can control the movement of the man inside the game container by dragging the joystick inside the joystick container. The man will move based on the position of the joystick. Note that this is a simple example, and you can modify and enhance it further based on 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>
    <style>
        #gameContainer {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: #ccc;
            border: 1px solid #999;
        }
        #man {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: #f00;
        }
        #joystickContainer {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 100px;
            background-color: #ddd;
            border: 1px solid #999;
            border-radius: 50%;
        }
        #joystick {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30px;
            height: 30px;
            background-color: #666;
            border-radius: 50%;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div id="gameContainer">
        <div id="man"></div>
    </div>
    <div id="joystickContainer">
        <div id="joystick"></div>
    </div>

function updateManPosition() {
                var containerWidth = container.offsetWidth;
                var containerHeight = container.offsetHeight;
                var manSize = man.offsetWidth;

var manPosX = (containerWidth - manSize) * (joystickPosX / joystickRadius) + (containerWidth / 2 - manSize / 2);
                var manPosY = (containerHeight - manSize) * (joystickPosY / joystickRadius) + (containerHeight / 2 - manSize / 2);

man.style.left = manPosX + 'px';
                man.style.top = manPosY + 'px';
            }

joystickContainer.addEventListener('touchstart', function (e) {
                e.preventDefault();

var touch = e.touches[0];
                var touchX = touch.pageX - joystickContainer.offsetLeft;
                var touchY = touch.pageY - joystickContainer.offsetTop;

if (Math.sqrt(Math.pow(touchX - joystickRadius, 2) + Math.pow(touchY - joystickRadius, 2)) <= joystickRadius) {
                    joystick.style.left = touch.pageX - joystickContainer.offsetLeft - joystick.offsetWidth / 2 + 'px';
                    joystick.style.top = touch.pageY - joystickContainer.offsetTop - joystick.offsetHeight / 2 + 'px';

joystickPosX = touch.pageX - joystickContainer.offsetLeft - joystickRadius;
                    joystickPosY = touch.pageY - joystickContainer.offsetTop - joystickRadius;

updateManPosition();
                }
            }, false);

joystickContainer.addEventListener('touchmove', function (e) {
                e.preventDefault();

var touch = e.touches[0];
                var touchX = touch.pageX - joystickContainer.offsetLeft;
                var touchY = touch.pageY - joystickContainer.offsetTop;

joystickPosX = touch.pageX - joystickContainer.offsetLeft - joystickRadius;
                    joystickPosY = touch.pageY - joystickContainer.offsetTop - joystickRadius;

updateManPosition();
                }
            }, false);

joystickContainer.addEventListener('touchend', function () {
                joystick.style.left = '50%';
                joystick.style.top = '50%';
                joystickPosX = 0;
                joystickPosY = 0;

updateManPosition();
            });
        });
    </script>
</body>
</html>
```