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

No:3172

3330

Fighting combat
Developer User3672｜Date and time 23/6/24 1:15:46
Build time 33.325 sec｜Game capacity 4.16KB｜

Fighting Combat

Explanation: This is a simple game called Fighting Combat implemented as a single HTML file with JavaScript included. The game is designed to be played on smartphones and it uses emojis for graphics. When the game starts, the player sees the title screen with a Start Game button. When the player clicks the button, the game board is populated with the player and an enemy represented by emojis. The objective of the game is to avoid the enemy by tilting the phone and moving the player accordingly. If the player collides with the enemy, the game ends and the player loses. The mousemove event is used to detect the tilt of the phone. The player's position is updated accordingly and checked for collision with the enemy using the getBoundingClientRect() method. If the player collides with the enemy, the game ends and the player is given the option to restart the game. Overall, this is a simple and fun game that showcases the use of JavaScript and smartphone sensors to create an interactive experience.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Fighting Combat</title>
    <style>
      #game-board {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #212121;
      }

#game-board h1 {
        color: #fff;
        font-size: 4rem;
        text-align: center;
        margin-bottom: 2rem;
      }

#game-board button {
        padding: 1rem 2rem;
        background-color: #e91e63;
        border: none;
        border-radius: 2rem;
        color: #fff;
        font-size: 2rem;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
      }

#game-board button:hover,
      #game-board button:active {
        background-color: #ff4081;
        transform: scale(1.1);
      }
    </style>
  </head>
  <body>
    <div id="game-board">
      <h1>Fighting Combat</h1>
      <button id="startBtn">Start Game</button>
    </div>
    <script>
      const gameBoard = document.getElementById('game-board');
      const startBtn = document.getElementById('startBtn');

startBtn.addEventListener('click', startGame);

function startGame() {
        gameBoard.innerHTML = `
          <h1>Fighting Combat</h1>
          <div id="player">
            🦸‍♂️
          </div>
          <div id="enemy">
            🤖
          </div>
        `;

const player = document.getElementById('player');
        const enemy = document.getElementById('enemy');

window.addEventListener('deviceorientation', handleOrientation);

function handleOrientation(event) {
          let beta = event.beta;
          let gamma = event.gamma;

if (gamma > 10) {
            player.style.marginLeft = '10vw';
          } else if (gamma < -10) {
            player.style.marginLeft = '90vw';
          } else {
            player.style.marginLeft = gamma * 0.5 + 50 + 'vw';
          }

if (beta > 20) {
            player.style.marginTop = '90vh';
          } else if (beta < -20) {
            player.style.marginTop = '10vh';
          } else {
            player.style.marginTop = beta * 0.5 + 50 + 'vh';
          }

if (
            player.getBoundingClientRect().left <
              enemy.getBoundingClientRect().right &&
            enemy.getBoundingClientRect().left <
              player.getBoundingClientRect().right &&
            player.getBoundingClientRect().top <
              enemy.getBoundingClientRect().bottom &&
            enemy.getBoundingClientRect().top < player.getBoundingClientRect().bottom
          ) {
            endGame();
          }
        }

function endGame() {
          window.removeEventListener('deviceorientation', handleOrientation);
          gameBoard.innerHTML = `
            <h1>You Lose!</h1>
            <button id="restartBtn">Restart Game</button>
          `;

const restartBtn = document.getElementById('restartBtn');
          restartBtn.addEventListener('click', startGame);
        }
      }
    </script>
  </body>
</html>

Explanation:
This is a simple game called Fighting Combat implemented as a single HTML file with JavaScript included. The game is designed to be played on smartphones and it uses emojis for graphics.

When the game starts, the player sees the title screen with a Start Game button. When the player clicks the button, the game board is populated with the player and an enemy represented by emojis.

The objective of the game is to avoid the enemy by tilting the phone and moving the player accordingly. If the player collides with the enemy, the game ends and the player loses.

The deviceorientation event is used to detect the tilt of the phone. The player's position is updated accordingly and checked for collision with the enemy using the getBoundingClientRect() method.

If the player collides with the enemy, the game ends and the player is given the option to restart the game.

Overall, this is a simple and fun game that showcases the use of JavaScript and smartphone sensors to create an interactive experience.