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

No:37646

←

Prev Next

→

A tablet game
Developer User17082｜Date and time 24/1/21 7:48:40
Build time 18.233 sec｜Game capacity 5.907KB｜

Script

Sure! Here's a simple tablet game implemented as a single HTML file using JavaScript. The game is called "PictoMatch" and the objective is to match pairs of pictograms within a given time limit.

PictoMatch

Time: 100s

Score: 0

Please note that you need to replace the `emozi_dog.png` with the actual paths to the pictogram images you want to use in the game. Also, you can add more pictograms to the `pictograms` array to increase the difficulty of the game.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple tablet game implemented as a single HTML file using JavaScript. The game is called "PictoMatch" and the objective is to match pairs of pictograms within a given time limit.

```html
<!DOCTYPE html>
<html>
<head>
  <title>bob</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: #f2f2f2;
    }
    
    h1 {
      margin-top: 50px;
      color: #333;
    }
    
    #game-container {
      margin-top: 50px;
    }
    
    .card {
      display: inline-block;
      margin: 10px;
      width: 100px;
      height: 100px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: transform 0.3s;
    }
    
    .card img {
      width: 80px;
      height: 80px;
      margin: 10px;
    }
    
    .card.matched {
      opacity: 0.5;
      pointer-events: none;
    }
    
    #timer {
      margin-top: 30px;
      font-size: 24px;
      color: #353;
    }
    
    #score {
      margin-top: 15px;
      font-size: 18px;
      color: #666;
    }
    
    #message {
      margin-top: 15px;
      font-size: 20px;
      color: #555;
    }
  </style>
</head>
<body>
  <h1>PictoMatch</h1>
  <div id="game-container"></div>
  <div id="timer">Time: <span id="seconds">100</span>s</div>
  <div id="score">Score: <span id="score-value">0</span></div>
  <div id="message"></div>

var gameContainer = document.getElementById('game-container');
    var secondsElement = document.getElementById('seconds');
    var scoreElement = document.getElementById('score-value');
    var messageElement = document.getElementById('message');

var cards = [];
    var matches = 0;
    var selectedCard = null;
    var gameStarted = false;
    var timer = null;
    var secondsLeft = 60;

// Initialize the game
    function initGame() {
      gameContainer.innerHTML = '';
      cards = [];

// Create card elements
      for (var i = 0; i < pictograms.length; i++) {
        var card1 = createCard(pictograms[i]);
        var card2 = createCard(pictograms[i]);
        cards.push(card1);
        cards.push(card2);
      }

// Shuffle the cards
      cards = shuffle(cards);

// Append cards to the game container
      for (var j = 0; j < cards.length; j++) {
        gameContainer.appendChild(cards[j]);
      }

// Reset game state
      matches = 0;
      selectedCard = null;
      gameStarted = false;
      secondsLeft = 60;
      secondsElement.textContent = secondsLeft;
      scoreElement.textContent = 0;
      messageElement.textContent = 'Tap a card to start the game!';

// Start the timer
      clearInterval(timer);
      timer = setInterval(updateTimer, 1000);
    }

// Create a card element with a pictogram image
    function createCard(pictogram) {
      var card = document.createElement('div');
      card.className = 'card';
      card.innerHTML = '<img src="' + pictogram + '">';
      card.addEventListener('click', selectCard);
      return card;
    }

// Shuffle the cards in the array
    function shuffle(array) {
      var currentIndex = array.length, temporaryValue, randomIndex;

while (0 !== currentIndex) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }

return array;
    }

// Update the timer every second
    function updateTimer() {
      if (gameStarted) {
        secondsLeft--;
        secondsElement.textContent = secondsLeft;

if (secondsLeft === 0) {
          clearInterval(timer);
          gameOver();
        }
      }
    }

// Handle card selection
    function selectCard() {
      if (!gameStarted) {
        gameStarted = true;
      }

if (selectedCard && selectedCard !== this && !this.classList.contains('matched')) {
        this.classList.add('flipped');

// Check if there is a match
        if (selectedCard.innerHTML === this.innerHTML) {
          selectedCard.classList.add('matched');
          this.classList.add('matched');
          matches++;
          scoreElement.textContent = matches;

// Check if all matches found
          if (matches === pictograms.length) {
            gameWon();
          }
        } else {
          // Delay flipping unmatched cards back
          setTimeout(function() {
            selectedCard.classList.remove('flipped');
            this.classList.remove('flipped');
          }.bind(this), 1000);
        }

selectedCard = null;
      } else {
        this.classList.add('flipped');
        selectedCard = this;
      }
    }

// Game over logic
    function gameOver() {
      messageElement.textContent = 'Time\'s up! Game over.';
      selectedCard = null;
      gameStarted = false;
    }

// Game won logic
    function gameWon() {
      messageElement.textContent = 'Congratulations! You won the game!';
      selectedCard = null;
      gameStarted = false;
    }

// Start the game
    initGame();
  </script>
</body>
</html>
```

Please note that you need to replace the `path/to/pictogramX.png` with the actual paths to the pictogram images you want to use in the game. Also, you can add more pictograms to the `pictograms` array to increase the difficulty of the game.