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

No:34895

195

←

Prev Next

→

Marble run
Developer User9721｜Date and time 24/1/12 7:31:48
Build time 11.015 sec｜Game capacity 3.144KB｜

Script

Sure, here's an example of a simple Marble Run game implemented as a single HTML file using JavaScript:

Marble Run

This code will create a simple game where the user controls a marble using their smartphone's tilt. The marble will move on the screen, and if it collides with the obstacle, it will stop.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a simple Marble Run game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Marble Run</title>
    <style>
        body {
            background-color: #f2f2f2;
            font-family: Arial, sans-serif;
            text-align: center;
        }

#game {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            background-color: #fff;
            border: 2px solid #ccc;
            overflow: hidden;
        }

.marble {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #333;
            border-radius: 50%;
            transition: all 0.2s ease-in-out;
        }

.start {
            top: 360px;
            left: 180px;
        }

.obstacle {
            width: 200px;
            height: 20px;
            background-color: #999;
            border-radius: 5px;
            position: absolute;
            top: 200px;
            left: 100px;
        }
    </style>
</head>
<body>
    <h1>Marble Run</h1>
    <div id="game">
        <div class="marble start"></div>
        <div class="obstacle"></div>
    </div>

// Function to move the marble in response to device tilt
            function moveMarble(event) {
                var tiltLR = event.gamma; // Get tilt value from device
                var tiltFB = event.beta;

// Calculate new position based on device tilt
                var newX = parseFloat(marble.style.left) + (tiltLR * 2);
                var newY = parseFloat(marble.style.top) + (tiltFB * 2);

// Check for collisions with obstacle
                if (
                    newX + marble.offsetWidth > obstacle.offsetLeft &&
                    newX < obstacle.offsetLeft + obstacle.offsetWidth &&
                    newY + marble.offsetHeight > obstacle.offsetTop &&
                    newY < obstacle.offsetTop + obstacle.offsetHeight
                ) {
                    // Collision occurred, stop the marble
                    marble.style.transition = "none";
                } else {
                    // No collision, move the marble to the new position
                    marble.style.transition = "all 0.2s ease-in-out";
                    marble.style.left = newX + "px";
                    marble.style.top = newY + "px";
                }
            }

// Listen for device tilt events
            window.addEventListener("deviceorientation", moveMarble);

// Start the game
            marble.style.transition = "all 0.2s ease-in-out";
        });
    </script>
</body>
</html>
```

This code will create a simple game where the user controls a marble using their smartphone's tilt. The marble will move on the screen, and if it collides with the obstacle, it will stop.