Plinko tiktok interactive game's game

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

No:38302

←

Prev Next

→

Plinko tiktok interactive game
Developer User17338｜Date and time 24/1/24 4:19:42
Build time 23.372 sec｜Game capacity 4.78KB｜

Script

Sure! Here's a simple implementation of a Plinko game using JavaScript, HTML, and CSS, all enclosed within a single HTML file:

You Win!

To play the game, simply open the HTML file in a web browser, touch the "Start Game" button to drop the chip, and see if it lands in the prize location! The Plinko board is displayed using a grid system, and the chip drops based on the random prize location chosen at the beginning of each game. If the chip lands in the prize slot, the "You Win!" message will be shown. Please note that due to the limitations of plain text, I couldn't include pictograms directly, but you can easily modify the CSS styles to replace the pegs, chip, and prize with pictographic images.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure! Here's a simple implementation of a Plinko game using JavaScript, HTML, and CSS, all enclosed within a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
<style>
  /* Styling for the Plinko board */
  .board {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin: 20px auto;
    width: 90%;
    max-width: 500px;
    border: 2px solid #000;
    padding: 10px;
  }

.peg {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #000;
    margin: 0 auto;
  }

.chip {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f00;
    position: relative;
    transition: all 0.5s;
  }

.chip:after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

.prize {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #00f;
    color: #fff;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    visibility: hidden;
  }

.row {
    display: flex;
    justify-content: space-between;
  }
  
  /* Styling for the game controls and messages */
  .controls {
    text-align: center;
    margin-bottom: 20px;
  }

.message {
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
  }
</style>
</head>
<body>
  <div class="controls">
    <button onclick="startGame()">Start Game</button>
    <button onclick="resetGame()">Reset</button>
  </div>
  
  <div class="board">
    <div class="row">
      <div class="peg"></div>
    </div>
    <div class="row">
      <div class="peg"></div>
      <div class="peg"></div>
    </div>
    <div class="row">
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
    </div>
    <div class="row">
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
    </div>
    <div class="row">
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
    </div>
    <div class="row">
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
    </div>
    <div class="row">
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
    </div>
    <div class="row">
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
      <div class="peg"></div>
    </div>
  </div>
  
  <div class="prize">You Win!</div>
  
  <script>
    // Global variables
    var chip;
    var prize;
    var prizeLocation;
    var gameStarted = false;
  
    // Function to start the Plinko game
    function startGame() {
      if (!gameStarted) {
        gameStarted = true;
        chip = document.createElement('div');
        chip.className = 'chip';
        chip.style.gridColumnStart = 4;
        document.querySelector('.board').appendChild(chip);
        prize = document.querySelector('.prize');
        prizeLocation = Math.floor(Math.random() * 7) + 1;
        prize.style.gridColumnStart = prizeLocation + 1;
        chip.addEventListener('transitionend', checkWin);
        chip.style.gridColumnStart = prizeLocation + 1;
      }
    }
  
    // Function to reset the game
    function resetGame() {
      gameStarted = false;
      chip.remove();
      prize.style.visibility = "hidden";
    }
  
    // Function to check if the player has won
    function checkWin() {
      chip.removeEventListener('transitionend', checkWin);
      if (chip.style.gridColumnStart === prize.style.gridColumnStart) {
        prize.style.visibility = "visible";
      }
    }
  </script>
</body>
</html>
```

Please note that due to the limitations of plain text, I couldn't include pictograms directly, but you can easily modify the CSS styles to replace the pegs, chip, and prize with pictographic images.