JDM Game With joystick, car screen, City's game

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

No:18040

←

Prev Next

→

JDM Game With joystick, car screen, City
Developer User7923｜Date and time 23/9/26 14:21:22
Build time 40.625 sec｜Game capacity 3.823KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>JDM Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        #canvas {
            background-color: #000;
        }
        
        .joystick {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            border-radius: 50%;
            position: absolute;
            bottom: 20px;
            left: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.7;
        }
        
        .joystick img {
            width: 60px;
            height: 60px;
        }
        
        #car {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 80px;
            height: 160px;
            background-image: url('car.png');
            background-size: cover;
            transform: rotate(0deg);
            transition: transform 0.2s;
        }
        
        #city {
            background-image: url('city.png');
            background-size: cover;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="canvas">
        <div id="city"></div>
        <div class="joystick">
            <img src="joystick.png">
        </div>
        <div id="car"></div>
    </div>

joystick.addEventListener('touchmove', moveJoystick);
        joystick.addEventListener('touchend', function (e) {
            e.preventDefault();
            resetJoystick();
        });

function moveJoystick(e) {
            e.preventDefault();
            var touch = e.touches[0];
            var rect = joystick.getBoundingClientRect();
            var centerX = rect.left + rect.width / 2;
            var centerY = rect.top + rect.height / 2;
            var distanceX = touch.clientX - centerX;
            var distanceY = touch.clientY - centerY;
            var angle = Math.atan2(distanceY, distanceX);
            var directionX = Math.cos(angle);
            var directionY = Math.sin(angle);

if (Math.abs(distanceX) <= 25 && Math.abs(distanceY) <= 25) {
                joystick.style.left = touch.clientX - joystick.offsetWidth / 2 + 'px';
                joystick.style.top = touch.clientY - joystick.offsetHeight / 2 + 'px';
            } else {
                joystick.style.left = centerX + (directionX * 25) - joystick.offsetWidth / 2 + 'px';
                joystick.style.top = centerY + (directionY * 25) - joystick.offsetHeight / 2 + 'px';

var normalizedX = directionX.toFixed(2) * 100;
                var normalizedY = directionY.toFixed(2) * 100;
                joystickX = normalizedX;
                joystickY = normalizedY;
            }

if (joystickX >= 50) {
                car.style.transform = 'rotate(-10deg)';
            } else if (joystickX <= -50) {
                car.style.transform = 'rotate(10deg)';
            } else {
                car.style.transform = 'rotate(0deg)';
            }
        }

function resetJoystick() {
            joystick.style.opacity = 0.7;
            joystick.style.left = '20px';
            joystick.style.top = '20px';
            car.style.transform = 'rotate(0deg)';
            joystickX = 0;
            joystickY = 0;
        }
    </script>
</body>
</html>