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

No:21810

Drawing game, if you type in a name of what your d..ALL
Developer User10064｜Date and time 23/10/18 12:35:03
Build time 107.298 sec｜Game capacity 5.702KB｜

Script

Sure! Below is a sample implementation of the Pictonary game as a single HTML file. The game allows you to draw a picture based on a given word, and the AI will try to guess the drawing. The game consists of 10 rounds, and you have 1 minute and 50 seconds for each round. After completing 10 rounds, a "Play Again" button will appear for you to start a new game.

Pictonary

How many rounds: 10

You have 1:50 minutes

1:50

To play the game, you can copy the above code and save it into an HTML file (e.g., `pictonary.html`). Then, open the file in a web browser and enjoy playing Pictonary with the given instructions.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pictonary Game</title>
    <style>
        #canvas {
            border: 1px solid black;
            margin-bottom: 10px;
        }
        #timer {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>Pictonary</h1>
    <h3>How many rounds: 10</h3>
    <h3>You have 1:50 minutes</h3>
    <div id="canvas"></div>
    <div id="timer">1:50</div>
    <input type="text" id="wordInput" placeholder="Type the word" disabled>
    <button id="startButton">Start</button>
    <script>
        // List of words and their corresponding pictograms
        const words = {
            "cat": ["⭕️", "⭕️", "@", "⭕️", "@"],
            "dog": ["⭕️", "⭕️", "⭕️", "⭕️", "@"],
            "tree": ["🌳", "@", "@", "@", "@"],
            // Add more words and pictograms if needed
        };

let currentRound = 1;
        let remainingTime = 110;

const canvas = document.getElementById("canvas");
        const wordInput = document.getElementById("wordInput");
        const startButton = document.getElementById("startButton");
        const timer = document.getElementById("timer");

startButton.addEventListener("click", startGame);

function startGame() {
            timer.textContent = "1:50";
            canvas.innerHTML = "";
            currentRound = 1;
            startButton.disabled = true;
            playRound();
        }

function playRound() {
            const word = getRandomWord();
            const pictogram = words[word];
            wordInput.value = "";
            wordInput.placeholder = "Type the word";
            wordInput.disabled = false;
            wordInput.focus();

let timeLeft = 110;
            const countdown = setInterval(() => {
                timeLeft--;
                let minutes = Math.floor(timeLeft / 60);
                let seconds = timeLeft % 60;
                seconds = seconds < 10 ? "0" + seconds : seconds;
                timer.textContent = minutes + ":" + seconds;

if (timeLeft === 0) {
                    clearInterval(countdown);
                    wordInput.value = "";
                    wordInput.disabled = true;
                    setTimeout(() => {
                        currentRound++;
                        if (currentRound > 10) {
                            canvas.innerHTML = "<h2>Game over!</h2>";
                            startButton.disabled = false;
                            startButton.textContent = "Play Again";
                        } else {
                            playRound();
                        }
                    }, 2000);
                }
            }, 1000);

wordInput.addEventListener("input", () => {
                if (wordInput.value.toLowerCase() === word) {
                    clearInterval(countdown);
                    canvas.innerHTML = "<h2>✅ Correct!</h2>";
                    wordInput.value = "";
                    wordInput.disabled = true;
                    setTimeout(() => {
                        currentRound++;
                        if (currentRound > 10) {
                            canvas.innerHTML = "<h2>Game over!</h2>";
                            startButton.disabled = false;
                            startButton.textContent = "Play Again";
                        } else {
                            playRound();
                        }
                    }, 2000);
                }
            });

drawPictogram(pictogram);
        }

function getRandomWord() {
            const wordList = Object.keys(words);
            const randomIndex = Math.floor(Math.random() * wordList.length);
            return wordList[randomIndex];
        }

function drawPictogram(pictogram) {
            const size = 30;
            const containerSize = 150;
            const canvasSize = (size * 3) + 20;
            canvas.style.width = canvasSize + "px";
            canvas.style.height = canvasSize + "px";

let posX = 10;
            let posY = 10;

for (let i = 0; i < pictogram.length; i++) {
                const symbol = document.createElement("span");
                symbol.textContent = pictogram[i];
                symbol.style.fontSize = size + "px";
                symbol.style.position = "absolute";
                symbol.style.left = posX + "px";
                symbol.style.top = posY + "px";
                symbol.style.lineHeight = size + "px";
                symbol.style.textAlign = "center";
                symbol.style.width = size + "px";
                symbol.style.height = size + "px";
                symbol.style.borderRadius = "50%";
                symbol.style.backgroundColor = "black";
                symbol.style.color = "white";
                canvas.appendChild(symbol);

posX += size + 10;

if (posX >= containerSize) {
                    posX = 10;
                    posY += size + 10;
                }
            }
        }
    </script>
</body>
</html>
```

To play the game, you can copy the above code and save it into an HTML file (e.g., `pictonary.html`). Then, open the file in a web browser and enjoy playing Pictonary with the given instructions.