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

No:10135

101

←

Prev Next

→

GarageBand
Developer User4442｜Date and time 23/7/29 3:36:02
Build time 26.545 sec｜Game capacity 4.188KB｜

Script

Sure, here's an example of a simple game implemented in a single HTML file using JavaScript and enclosed in script tags. This game is called "PictoMatch" and it involves matching pairs of pictograms within a certain time limit.

PictoMatch

Click on the cards to find matching pairs before time runs out!

Time left: 30 seconds

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>PictoMatch</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    #game-board {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 20px;
    }
    .card {
      width: 80px;
      height: 80px;
      margin: 5px;
      background-color: #eee;
      border-radius: 5px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
    }
    .card.matched {
      background-color: #7FFF00;
    }
  </style>
</head>
<body>
  <h1>PictoMatch</h1>
  <p>Click on the cards to find matching pairs before time runs out!</p>

<div id="game-board"></div>
  <p>Time left: <span id="timer">30</span> seconds</p>
  <button id="restart-btn">Restart Game</button>

let gameBoard = document.getElementById("game-board");
    let timerDisplay = document.getElementById("timer");
    let restartBtn = document.getElementById("restart-btn");
    let cards = [];
    let firstCard = null;
    let secondCard = null;
    let timeLeft = 30;
    let isTimerRunning = false;

function startGame() {
      // Shuffle the pictogram array
      let shuffledIcons = shuffleArray(icons.concat(icons));

// Create cards based on shuffled pictograms
      for (let i = 0; i < shuffledIcons.length; i++) {
        let card = document.createElement("div");
        card.classList.add("card");
        card.textContent = shuffledIcons[i];
        card.addEventListener("click", flipCard);
        gameBoard.appendChild(card);
        cards.push(card);
      }

// Start the timer
      startTimer();
    }

function flipCard() {
      if (!isTimerRunning) return;

let card = this;
      card.classList.add("flipped");

if (firstCard === null) {
        firstCard = card;
      } else {
        secondCard = card;
        checkMatch();
      }
    }

function checkWin() {
      let matchedCards = document.getElementsByClassName("card matched");
      if (matchedCards.length === cards.length) {
        stopTimer();
        alert("Congratulations! You won!");
      }
    }

function startTimer() {
      isTimerRunning = true;
      let interval = setInterval(() => {
        timeLeft -= 1;
        timerDisplay.textContent = timeLeft;
        if (timeLeft <= 0) {
          stopTimer();
          alert("Time's up! Game over.");
        }
      }, 1000);

restartBtn.addEventListener("click", () => {
        clearInterval(interval);
        resetGame();
      });
    }

function stopTimer() {
      isTimerRunning = false;
    }

function resetGame() {
      gameBoard.innerHTML = "";
      cards = [];
      firstCard = null;
      secondCard = null;
      timeLeft = 30;
      timerDisplay.textContent = timeLeft;
      startGame();
    }

function shuffleArray(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
      return array;
    }

// Start the game on page load
    startGame();
  </script>
</body>
</html>
```