Check Out Ships! 1.A submarine will cover the screen so it looks like your inside it. 2.A message will pop up telling you which ship you want to go to. 3.You can either choose the Titanic or the Brittanic. 4.Water sounds will start to play. 5.After 4 seconds,you will see a piece of the ship. 6.Click the door to get out. 7.Then,you will see water.And the whole ship.'s game

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

No:9900

217

←

Prev Next

→

Check Out Ships! 1.A submarine will cover the scre..ALL
Developer FirstNormalPerson｜Date and time 23/7/28 6:50:37
Build time 26.848 sec｜Game capacity 3.921KB｜

Script

Sure, here's a simplified implementation of the game you described:

Please note that in this example, you need to provide the appropriate image and audio files referenced in the code (`submarine.jpg`, `ship_piece.jpg`, `water_sounds.mp3`, `ship.jpg`). Additionally, you may need to make adjustments to the styling and adjust the timing of the transitions to fit your desired experience.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simplified implementation of the game you described:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Check Out Ships!</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        
        #submarine {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('submarine.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            display: none;
            z-index: 99;
        }
        
        #message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px;
            color: white;
            font-size: 24px;
            text-align: center;
            display: none;
            z-index: 999;
        }
        
        #shipPiece {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('ship_piece.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            display: none;
            z-index: 99;
        }
        
        #door {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            display: none;
            z-index: 99;
        }
        
        #water {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: blue;
            display: none;
            z-index: 99;
        }
        
        #ship {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('ship.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            display: none;
            z-index: 99;
        }
    </style>
</head>
<body>
    <div id="submarine"></div>
    <div id="message"></div>
    <div id="shipPiece"></div>
    <div id="door"></div>
    <div id="water"></div>
    <div id="ship"></div>

// Step 2: Display message to select a ship
    setTimeout(function() {
        document.getElementById("message").innerHTML = "Choose a ship: Titanic or Britannic";
        document.getElementById("message").style.display = "block";
    }, 4000);

// Step 3: Handle ship selection
    function selectShip(shipName) {
        // Step 4: Play water sounds
        var audio = new Audio('water_sounds.mp3');
        audio.play();

// Step 5: Display ship piece
        setTimeout(function() {
            document.getElementById("shipPiece").style.display = "block";
        }, 4000);

// Step 6: Click the door to get out
        document.getElementById("door").addEventListener("click", function() {
            // Step 7: Show water
            document.getElementById("water").style.display = "block";

// Step 8: Show the whole ship
            setTimeout(function() {
                document.getElementById("ship").style.display = "block";
            }, 4000);
        });
    }
</script>
</body>
</html>
```