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

No:41531

←

Prev Next

→

Train simulator
Developer User18611｜Date and time 24/2/8 5:21:21
Build time 9.134 sec｜Game capacity 2.168KB｜

Script

Train Simulator

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Train Simulator</title>
    <style>
        body {
            text-align: center;
        }
        
        #canvas {
            border: 1px solid black;
            margin: 10px;
        }
        
        #buttons {
            margin-top: 20px;
        }
        
        button {
            margin: 5px;
            width: 80px;
            height: 40px;
        }
    </style>
</head>
<body>
    <h1>Train Simulator</h1>
    <canvas id="canvas" width="400" height="300"></canvas>
    <div id="buttons">
        <button onclick="startTrain()">Start</button>
        <button onclick="stopTrain()">Stop</button>
        <button onclick="increaseSpeed()">+</button>
        <button onclick="decreaseSpeed()">-</button>
    </div>

let trainX = 50; // initial train position
        let trainSpeed = 2; // initial train speed

function drawTrain() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = "blue";
            ctx.fillRect(trainX, canvas.height / 2 - 20, 100, 40); // train body
            ctx.fillRect(trainX - 20, canvas.height / 2 - 40, 40, 80); // train front
            ctx.fillStyle = "black";
            ctx.font = "20px Arial";
            ctx.fillText("🚂", trainX + 30, canvas.height / 2 + 8); // train emoji
        }

function moveTrain() {
            trainX += trainSpeed;
            if (trainX > canvas.width + 50) {
                trainX = -50; // reset train position
            }
        }

function startTrain() {
            setInterval(() => {
                moveTrain();
                drawTrain();
            }, 10);
        }

function stopTrain() {
            clearInterval(startTrain);
        }

function increaseSpeed() {
            trainSpeed += 1;
        }

function decreaseSpeed() {
            trainSpeed -= 1;
            if (trainSpeed < 1) {
                trainSpeed = 1; // minimum train speed
            }
        }
    </script>
</body>
</html>