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

No:41764

←

Prev Next

→

Steamboat willie the game
Developer Bowgray｜Date and time 24/2/9 19:33:11
Build time 19.052 sec｜Game capacity 5.556KB｜

Script

Sure! Here's an example of a simple game titled "Steamboat Willie" implemented as a single HTML file with JavaScript:

Steamboat Willie - The Game

Instructions:

Use the arrow keys to control Steamboat Willie. Avoid the obstacles and collect the pictograms!

Score: 0

This HTML file includes the necessary structure for a game named "Steamboat Willie". It uses JavaScript to create and control the game objects, handle user input, detect collisions, keep track of the score, and start/stop the game. Pictograms are represented using image elements. The game can be played on a smartphone by tapping the "Start Game" button or automatically starting the game if the device is a smartphone. The game loop runs every 20 milliseconds to update the game state and check for collisions. When the game ends, an alert is shown with the final score.

←

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 game titled "Steamboat Willie" implemented as a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Steamboat Willie - The Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: lightblue;
      margin-top: 200px;
    }
    
    img {
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <h1>Steamboat Willie - The Game</h1>
  <h2>Instructions:</h2>
  <p>Use the arrow keys to control Steamboat Willie. Avoid the obstacles and collect the pictograms!</p>
  
  <script>
    // Initialize game variables
    var score = 0;
    var gameSpeed = 5;
    var gameRunning = false;

// Create Steamboat Willie element
    var steamboat = document.createElement("img");
    steamboat.src = "steamboat.png";
    steamboat.style.position = "absolute";
    steamboat.style.left = "50%";
    steamboat.style.transform = "translate(-50%, 0)";
    document.body.appendChild(steamboat);

// Create pictogram elements
    var pictogram1 = document.createElement("img");
    var pictogram2 = document.createElement("img");
    pictogram1.src = "pictogram1.png";
    pictogram2.src = "pictogram2.png";
    pictogram1.style.position = "absolute";
    pictogram2.style.position = "absolute";
    document.body.appendChild(pictogram1);
    document.body.appendChild(pictogram2);

// Generate random positions for pictograms
    function generatePictogramPositions() {
      var windowWidth = window.innerWidth;
      var position1 = Math.floor(Math.random() * (windowWidth - 100));
      var position2 = Math.floor(Math.random() * (windowWidth - 100));

pictogram1.style.left = position1 + "px";
      pictogram2.style.left = position2 + "px";
    }

// Detect collision between Steamboat Willie and pictograms
    function detectCollision() {
      var steamboatTop = parseInt(steamboat.style.top);
      var steamboatLeft = parseInt(steamboat.style.left);
      var pictogram1Top = parseInt(pictogram1.style.top);
      var pictogram1Left = parseInt(pictogram1.style.left);
      var pictogram2Top = parseInt(pictogram2.style.top);
      var pictogram2Left = parseInt(pictogram2.style.left);

if (
        steamboatTop < pictogram1Top + 100 &&
        steamboatTop + 100 > pictogram1Top &&
        steamboatLeft < pictogram1Left + 100 &&
        steamboatLeft + 100 > pictogram1Left
      ) {
        score++;
        generatePictogramPositions();
      }
      if (
        steamboatTop < pictogram2Top + 100 &&
        steamboatTop + 100 > pictogram2Top &&
        steamboatLeft < pictogram2Left + 100 &&
        steamboatLeft + 100 > pictogram2Left
      ) {
        score++;
        generatePictogramPositions();
      }
    }

// Update game score
    function updateScore() {
      document.getElementById("score").innerHTML = "Score: " + score;
    }

// Move Steamboat Willie based on arrow key input
    function moveSteamboat(event) {
      if (event.keyCode === 37) {
        // Move left
        steamboat.style.left =
          parseInt(steamboat.style.left) - 10 + "px";
      } else if (event.keyCode === 39) {
        // Move right
        steamboat.style.left =
          parseInt(steamboat.style.left) + 10 + "px";
      }
    }

// Game start function
    function startGame() {
      if (!gameRunning) {
        gameRunning = true;
        document.addEventListener("keydown", moveSteamboat);
        generatePictogramPositions();

// Game loop
        var gameLoop = setInterval(function () {
          detectCollision();
          updateScore();

var pictogram1Top = parseInt(pictogram1.style.top);
          var pictogram2Top = parseInt(pictogram2.style.top);

if (pictogram1Top >= window.innerHeight) {
            // Pictogram reached bottom, reset position
            pictogram1.style.top = "-100px";
            generatePictogramPositions();
          } else {
            // Move pictogram downwards
            pictogram1.style.top = pictogram1Top + gameSpeed + "px";
          }

if (pictogram2Top >= window.innerHeight) {
            // Pictogram reached bottom, reset position
            pictogram2.style.top = "-100px";
            generatePictogramPositions();
          } else {
            // Move pictogram downwards
            pictogram2.style.top = pictogram2Top + gameSpeed + "px";
          }
        }, 20);
      }
    }

// Game end function
    function endGame() {
      gameRunning = false;
      document.removeEventListener("keydown", moveSteamboat);
      alert("Game Over! Your final score is: " + score);
      score = 0;
      updateScore();
    }
  </script>

<button onclick="startGame()">Start Game</button>
  <h3 id="score">Score: 0</h3>
  
  <script>
    // Check if game starts on smartphone
    if (typeof window.orientation !== "undefined") {
      startGame();
    }
  </script>

</body>
</html>
```