3 different types of machines that you can drive's game

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

No:27276

104

←

Prev Next

→

3 different types of machines that you can drive
Developer User13579｜Date and time 23/12/5 23:41:24
Build time 32.792 sec｜Game capacity 2.182KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<html>
<head>
    <style>
        #machine1 {
            width: 100px;
            height: 100px;
            background-image: url('machine1.png');
            background-size: cover;
            cursor: pointer;
        }
        
        #machine2 {
            width: 100px;
            height: 100px;
            background-image: url('machine2.png');
            background-size: cover;
            cursor: pointer;
        }
        
        #machine3 {
            width: 100px;
            height: 100px;
            background-image: url('machine3.png');
            background-size: cover;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    
    <script>
        function startGame() {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            
            var machines = [
                { type: "machine1", x: 50, y: 200 },
                { type: "machine2", x: 200, y: 200 },
                { type: "machine3", x: 350, y: 200 }
            ];
            
            machines.forEach(function(machine) {
                var image = new Image();
                image.src = machine.type + ".png";
                
                image.onload = function() {
                    ctx.drawImage(image, machine.x, machine.y, 100, 100);
                };
            });
            
            canvas.addEventListener("mousemove", function(event) {
                var rect = canvas.getBoundingClientRect();
                var mouseX = event.clientX - rect.left;
                var mouseY = event.clientY - rect.top;
                
                machines.forEach(function(machine) {
                    if (mouseX >= machine.x && mouseX <= machine.x + 100 &&
                        mouseY >= machine.y && mouseY <= machine.y + 100) {
                        
                        console.log("Driving " + machine.type);
                    }
                });
            });
        }
        
        startGame();
    </script>
</body>
</html>