Make a game where there's 8 cups 2 green, 2 red, 2 blue, 2 orange and 4 of them are behind a cover (always 1 of each colour) then the player has to move the over 4 cups and try to guess the order of the hidden cups then they press guess which then tells them how many cups are in the right place. They have 10 guesses and if they don't get it right before then they lose if they do they win. Also make a main menu with the button play or quit. After they lose or win make it say restart or main menu.'s game

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

No:41526

←

Prev Next

→

Make a game where there's 8 cups 2 green, 2 red, 2..ALL
Developer User18608｜Date and time 24/2/8 4:25:57
Build time 26.147 sec｜Game capacity 6.784KB｜

Script

Sure, here's an example of how you can implement the game as a single HTML file using JavaScript:

Cup Guessing Game

This game is implemented as a simple cup guessing game. The player is presented with a main menu, where they can choose to play or quit. If they choose to play, the game starts and they are presented with 8 cups, 4 of which are hidden behind covers. The player can click on the cups to reveal their colors and then they can make their guess by clicking the "Guess" button. The game will tell them how many cups are in the right place. They have 10 guesses to try and guess the correct order of the hidden cups. If they win or lose, they are presented with a restart or main menu option. Please note that the pictograms are not included in this example as it is not feasible to include graphics within the script tags. You can modify the CSS styles to incorporate pictograms or replace the cup elements with image elements if you have the appropriate image files.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

Sure, here's an example of how you can implement the game as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
<title>Cup Guessing Game</title>
<style>
    #game-container {
        text-align: center;
        margin-top: 200px;
    }
    
    .cup {
        display: inline-block;
        width: 60px;
        height: 80px;
        background-color: gray;
        margin: 10px;
        cursor: pointer;
    }
    
    .cover {
        display: inline-block;
        width: 60px;
        height: 80px;
        background-color: black;
        margin: 10px;
    }
    
    #result {
        font-size: 20px;
        margin-top: 20px;
    }
</style>
</head>
<body>
<div id="game-container">
    <h2>Cup Guessing Game</h2>
    <button id="play">Play</button>
    <button id="quit">Quit</button>
    <div id="cups">
        <div class="cover"></div>
        <div class="cover"></div>
        <div class="cover"></div>
        <div class="cover"></div>
    </div>
    <button id="guess">Guess</button>
    <div id="result"></div>
    <button id="restart" style="display: none;">Restart</button>
    <button id="menu" style="display: none;">Main Menu</button>
</div>

function generateRandomOrder() {
        var colors = ["green", "red", "blue", "orange"];
      
        correctOrder = colors.concat(colors).sort(() => Math.random() - 0.5);
    }

function showCups() {
        var cupsContainer = document.getElementById("cups");
        cupsContainer.innerHTML = "";

for (var i = 0; i < correctOrder.length; i++) {
            var cup = document.createElement("div");
            cup.className = "cup";
            cup.dataset.color = correctOrder[i];
            cupsContainer.appendChild(cup);
        }
    }

function updateResults() {
        var resultContainer = document.getElementById("result");
        var numCorrect = 0;

for (var i = 0; i < selectedCups.length; i++) {
            if (selectedCups[i] === correctOrder[i + 4]) {
                numCorrect++;
            }
        }

resultContainer.textContent = "Cups in the correct place: " + numCorrect;
      
        if (numCorrect === 4) {
            resultContainer.textContent = "Congratulations! You won!";
            gameState = "win";
            showMenu();
        } else if (numGuesses === 0) {
            resultContainer.textContent = "Sorry, you lost.";
            gameState = "lose";
            showMenu();
        }
    }

function showMenu() {
        var playButton = document.getElementById("play");
        var quitButton = document.getElementById("quit");
        playButton.style.display = "none";
        quitButton.style.display = "none";

if (gameState === "win") {
            var restartButton = document.getElementById("restart");
            restartButton.style.display = "block";
        } else if (gameState === "lose") {
            var menuButton = document.getElementById("menu");
            menuButton.style.display = "block";
        }
    }

function restartGame() {
        numGuesses = 10;
        selectedCups = [];
        gameState = "play";

generateRandomOrder();
        showCups();

var resultContainer = document.getElementById("result");
        resultContainer.textContent = "";

var restartButton = document.getElementById("restart");
        restartButton.style.display = "none";
    }

function handleGuess() {
        if (selectedCups.length === 4) {
            updateResults();
            numGuesses--;
            selectedCups = [];
        }
    }

function handleCupClick(e) {
        var selectedCup = e.target;
        selectedCup.style.backgroundColor = selectedCup.dataset.color;
        setTimeout(function () {
            selectedCup.style.backgroundColor = "gray";
        }, 500);

selectedCups.push(selectedCup.dataset.color);
        handleGuess();
    }

document.getElementById("play").addEventListener("click", function () {
        gameState = "play";
        generateRandomOrder();
        showCups();

var playButton = document.getElementById("play");
        var quitButton = document.getElementById("quit");
        playButton.style.display = "none";
        quitButton.style.display = "none";
    });

document.getElementById("quit").addEventListener("click", function () {
        gameState = "quit";
        var playButton = document.getElementById("play");
        var quitButton = document.getElementById("quit");
        playButton.style.display = "none";
        quitButton.style.display = "none";
    });

document.getElementById("guess").addEventListener("click", handleGuess);

var cupsContainer = document.getElementById("cups");
    cupsContainer.addEventListener("click", handleCupClick);

document.getElementById("restart").addEventListener("click", restartGame);

document.getElementById("menu").addEventListener("click", function () {
        var cupsContainer = document.getElementById("cups");
        cupsContainer.innerHTML = "";
        var resultContainer = document.getElementById("result");
        resultContainer.textContent = "";

var menuButton = document.getElementById("menu");
        var restartButton = document.getElementById("restart");
        menuButton.style.display = "none";
        restartButton.style.display = "none";

var playButton = document.getElementById("play");
        var quitButton = document.getElementById("quit");
        playButton.style.display = "block";
        quitButton.style.display = "block";
    });
</script>
</body>
</html>
```

Please note that the pictograms are not included in this example as it is not feasible to include graphics within the script tags. You can modify the CSS styles to incorporate pictograms or replace the cup elements with image elements if you have the appropriate image files.