You swipe the way you want your character to go, it has to dodge bullets's game

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

No:44185

←

Prev Next

→

You swipe the way you want your character to go, i..ALL
Developer User19328｜Date and time 24/2/17 7:23:59
Build time 20.319 sec｜Game capacity 5.706KB｜

Script

Sure! Here's an example of a simple game where you swipe to move the character and you need to dodge bullets. The game utilizes HTML, CSS, and JavaScript and can be played in a web browser on a smartphone.

👾

This code implements a simple game where the player character is represented by the 👾 emoji and bullets are represented by 🔴 emoji. To play the game, you need to load the HTML file in a web browser on a smartphone and swipe on the screen to dodge the bullets. The player character can move up, down, left, or right based on the swipe direction. The game keeps track of the score, and whenever a collision occurs between the player and a bullet, the game ends and the score is displayed. After that, you can restart the game by dismissing the alert message.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Swipe & Dodge Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    #game-container {
      position: relative;
      width: 100vw;
      height: 100vh;
    }
    
    #player {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 50px;
    }
    
    .bullet {
      position: absolute;
      font-size: 25px;
    }
  </style>
</head>
<body>
  <script>
    // Game variables
    var gameContainer;
    var player;
    var bullets;
    var swipeStartX;
    var swipeStartY;
    var playerX;
    var playerY;
    var score;
    
    // Initialize the game
    function init() {
      gameContainer = document.getElementById('game-container');
      player = document.getElementById('player');
      bullets = [];
      swipeStartX = 0;
      swipeStartY = 0;
      playerX = 50;
      playerY = 50;
      score = 0;
      
      gameContainer.addEventListener('touchstart', handleTouchStart, false);
      gameContainer.addEventListener('touchmove', handleTouchMove, false);
      gameContainer.addEventListener('touchend', handleTouchEnd, false);
      
      setInterval(updateBullets, 1000);
      setInterval(updateScore, 100);
    }
    
    // Handle touch start event
    function handleTouchStart(event) {
      swipeStartX = event.changedTouches[0].pageX;
      swipeStartY = event.changedTouches[0].pageY;
    }
    
    // Handle touch move event
    function handleTouchMove(event) {
      event.preventDefault();
    }
    
    // Handle touch end event
    function handleTouchEnd(event) {
      var swipeEndX = event.changedTouches[0].pageX;
      var swipeEndY = event.changedTouches[0].pageY;
      
      var swipeDistanceX = swipeEndX - swipeStartX;
      var swipeDistanceY = swipeEndY - swipeStartY;
      
      if (Math.abs(swipeDistanceX) > Math.abs(swipeDistanceY)) {
        if (swipeDistanceX > 0) {
          movePlayer('right');
        } else {
          movePlayer('left');
        }
      } else {
        if (swipeDistanceY > 0) {
          movePlayer('down');
        } else {
          movePlayer('up');
        }
      }
    }
    
    // Move the player based on the swipe direction
    function movePlayer(direction) {
      switch (direction) {
        case 'up':
          if (playerY > 0) {
            playerY -= 5;
          }
          break;
        
        case 'down':
          if (playerY < 100) {
            playerY += 5;
          }
          break;
        
        case 'left':
          if (playerX > 0) {
            playerX -= 5;
          }
          break;
        
        case 'right':
          if (playerX < 100) {
            playerX += 5;
          }
          break;
      }
      
      updatePlayerPosition();
    }
    
    // Update the player's position on the screen
    function updatePlayerPosition() {
      player.style.top = playerY + '%';
      player.style.left = playerX + '%';
    }
    
    // Update the position of bullets and check for collisions
    function updateBullets() {
      for (var i = 0; i < bullets.length; i++) {
        bullets[i].y += 10;
        
        if (bullets[i].y >= 100) {
          bullets.splice(i, 1);
          i--;
        } else {
          if (collisionDetection(bullets[i].x, bullets[i].y)) {
            gameOver();
            break;
          }
        }
      }
      
      renderBullets();
    }
    
    // Render bullets on the screen
    function renderBullets() {
      var bulletsContainer = document.getElementById('bullets-container');
      bulletsContainer.innerHTML = '';
      
      for (var i = 0; i < bullets.length; i++) {
        var bullet = document.createElement('div');
        bullet.classList.add('bullet');
        bullet.style.top = bullets[i].y + '%';
        bullet.style.left = bullets[i].x + '%';
        bullet.innerHTML = '🔴';
        bulletsContainer.appendChild(bullet);
      }
    }
    
    // Check for collision between player and bullets
    function collisionDetection(bulletX, bulletY) {
      var distance = Math.sqrt(Math.pow(playerX - bulletX, 2) + Math.pow(playerY - bulletY, 2));
      
      if (distance <= 5) {
        return true;
      }
      
      return false;
    }
    
    // Update the score
    function updateScore() {
      score += 1;
      document.getElementById('score').innerHTML = 'Score: ' + score;
    }
    
    // Game over
    function gameOver() {
      clearInterval();
      alert('Game Over! Your score: ' + score);
      init();
    }
    
    // Start the game
    window.onload = function() {
      init();
    };
  </script>
  
  <div id="game-container">
    <div id="player">👾</div>
    <div id="bullets-container"></div>
  </div>
  
  <div id="score" style="position: fixed; top: 10px; right: 10px; font-size: 20px; color: white;"></div>
</body>
</html>
```