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

No:10817

name:build a safe boat the player will make a boat..ALL
Developer User4652｜Date and time 23/8/3 16:33:48
Build time 14.229 sec｜Game capacity 2.313KB｜

Script

Build a Safe Boat Game

Instructions:

You need to build a safe boat to save your friends. Use the pictograms below to construct your boat.

Available Pictograms:

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Build a Safe Boat Game</title>
</head>
<body>
    <h1>Build a Safe Boat Game</h1>
    
    <div id="instructions">
        <h2>Instructions:</h2>
        <p>You need to build a safe boat to save your friends. Use the pictograms below to construct your boat.</p>
    </div>
    
    <div id="boatCanvas"></div>
    
    <div id="pictograms">
        <h2>Available Pictograms:</h2>
        <img src="pictogram1.png" id="pictogram1" class="pictogram" onclick="addPictogram('pictogram1.png')">
        <img src="pictogram2.png" id="pictogram2" class="pictogram" onclick="addPictogram('pictogram2.png')">
        <img src="pictogram3.png" id="pictogram3" class="pictogram" onclick="addPictogram('pictogram3.png')">
    </div>
    
    <div id="startButton">
        <button onclick="startGame()">Start</button>
    </div>
    
    <script>
        var boatArea = document.getElementById("boatCanvas");
        var selectedPictograms = [];
        
        function addPictogram(pictogram) {
            if (selectedPictograms.length < 3) {
                selectedPictograms.push(pictogram);
                boatArea.innerHTML += "<img src='" + pictogram + "' class='addedPictogram'>";
            }
        }
        
        function startGame() {
            if (selectedPictograms.length === 3) {
                // Check if the boat is safe
                // Implement your logic here to check boat safety based on selected pictograms
                
                // If boat is safe
                alert("Congratulations! Your boat is safe. You win!");
                
            } else {
                // If boat is not complete
                alert("Oops! Your boat is incomplete. You lose!");
            }
        }
    </script>
    
    <style>
        body {
            text-align: center;
        }
        
        h1 {
            color: #555;
        }
        
        #instructions, #pictograms, #startButton {
            margin-top: 30px;
        }
        
        .pictogram {
            width: 80px;
            height: 80px;
            margin: 10px;
            cursor: pointer;
        }
        
        .addedPictogram {
            width: 80px;
            height: 80px;
            margin: 10px;
        }
    </style>
</body>
</html>