Speedometer with manual transmission with gas and brake's game

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

No:14007

117

←

Prev Next

→

Speedometer with manual transmission with gas and ..ALL
Developer User6030｜Date and time 23/8/30 20:23:09
Build time 20.996 sec｜Game capacity 2.605KB｜

Script

Gas

Brake

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
<style>
    #speedometer {
        width: 300px;
        height: 300px;
        border-radius: 50%;
        border: 10px solid black;
        position: relative;
        overflow: hidden;
    }

#needle {
        width: 2px;
        height: 140px;
        background-color: red;
        position: absolute;
        left: 50%;
        top: 50%;
        transform-origin: bottom center;
        transform: translate(-50%, -50%) rotate(-45deg);
        transition: transform 0.5s;
    }

#dashboard {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-top: 50px;
    }

#gas {
        width: 100px;
        height: 100px;
        background-color: #ffcc00;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        font-weight: bold;
    }

#brake {
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        font-weight: bold;
    }
</style>
</head>
<body>
    <div id="speedometer">
        <div id="needle"></div>
    </div>
    <div id="dashboard">
        <div id="gas">Gas</div>
        <div id="brake">Brake</div>
    </div>

let speed = 0;

const increaseSpeed = () => {
            if (speed <= 220) {
                speed += 20;
            }
            updateSpeedometer();
        };

const decreaseSpeed = () => {
            if (speed >= 20) {
                speed -= 20;
            }
            updateSpeedometer();
        };

const updateSpeedometer = () => {
            needle.style.transform = `translate(-50%, -50%) rotate(${speedToAngle(speed)}deg)`;
        };

const speedToAngle = (speed) => {
            const minSpeed = 0;
            const maxSpeed = 220;
            const minAngle = -45;
            const maxAngle = 135;
            return ((speed - minSpeed) * (maxAngle - minAngle)) / (maxSpeed - minSpeed) + minAngle;
        };

const gasButton = document.getElementById('gas');
        const brakeButton = document.getElementById('brake');

gasButton.addEventListener('click', increaseSpeed);
        brakeButton.addEventListener('click', decreaseSpeed);

updateSpeedometer();
    </script>
</body>
</html>