Title: "Tap Tango" Description: Tap the screen to make a bouncing ball switch directions. The ball changes color with each tap, and you score points by passing through matching color barriers. Keep tapping, switch colors, and see how high you can score in this easy-to-code, addictive game.'s game

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

No:27092

125

←

Prev Next

→

Title: "Tap Tango" Description: Tap the screen to..ALL
Developer User13389｜Date and time 23/12/4 6:16:10
Build time 38.955 sec｜Game capacity 3.46KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<html>
<head>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      overflow: hidden;
    }
    
    #game-container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
    
    #game {
      position: relative;
      width: 200px;
      height: 400px;
      border: 1px solid #000;
      background-color: #fff;
      box-shadow: 0px 0px 5px #888;
    }
    
    #ball {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #ff0000;
    }
    
    .barrier {
      position: absolute;
      width: 100%;
      height: 100px;
      background-color: #ff0000;
      animation: barrierMove 2s linear infinite;
    }
    
    @keyframes barrierMove {
      from {
        top: -100px;
      }
      to {
        top: 100%;
      }
    }
  </style>
</head>

// Function to update the ball color and score
    function updateBall() {
      var randomColor = colors[Math.floor(Math.random() * colors.length)];
      ball.style.backgroundColor = randomColor;
      score += 1;
    }

// Function to create barriers
    function createBarriers() {
      var game = document.getElementById('game');
      var barrier = document.createElement('div');
      barrier.className = 'barrier';
      barrier.style.backgroundColor = ball.style.backgroundColor;
      barrier.style.left = Math.floor(Math.random() * (game.offsetWidth - 100)) + 'px';
      game.appendChild(barrier);
    }

// Function to check collision
    function checkCollision() {
      var barriers = document.getElementsByClassName('barrier');
      var ballRect = ball.getBoundingClientRect();

for (var i = 0; i < barriers.length; i++) {
        var barrierRect = barriers[i].getBoundingClientRect();
        if (
          ballRect.left < barrierRect.right &&
          ballRect.right > barrierRect.left &&
          ballRect.top < barrierRect.bottom &&
          ballRect.bottom > barrierRect.top &&
          ball.style.backgroundColor === barriers[i].style.backgroundColor
        ) {
          barriers[i].remove();
          updateBall();
          createBarriers();
        }
      }
    }

// Function to handle tap event
    function handleTap() {
      var containerHeight = gameContainer.offsetHeight;
      var ballTop = parseInt(ball.style.top, 10);
      var ballDirection = parseInt(ball.dataset.direction, 10);

if (ballDirection === 1) {
        ballTop += 10;
        ball.style.top = ballTop + 'px';
        if (ballTop + ball.offsetHeight >= containerHeight) {
          ball.dataset.direction = -1;
          checkCollision();
        }
      } else {
        ballTop -= 10;
        ball.style.top = ballTop + 'px';
        if (ballTop <= 0) {
          ball.dataset.direction = 1;
          checkCollision();
        }
      }
    }

// Initialize the game
    function initGame() {
      ball.addEventListener('click', handleTap);
      updateBall();
      createBarriers();
    }

window.onload = initGame;
  </script>
</body>
</html>