Platformer 2d with a character that uses a sword to fight skeleton's game

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

No:31865

←

Prev Next

→

Platformer 2d with a character that uses a sword t..ALL
Developer User15255｜Date and time 23/12/28 18:03:49
Build time 43.243 sec｜Game capacity 4.403KB｜

Script

Sure! Here's a simple implementation of a 2D platformer game where a character fights skeletons using a sword. The game uses pictograms for better smartphone operation.

Please note that you would need to replace the `emozi_bear.png` and `emozi_chicken.png` URLs with the actual image URLs or use your own image files for the character and skeleton. Also, adjust the image sizes and other styles as needed.

←

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 2D platformer game where a character fights skeletons using a sword. The game uses pictograms for better smartphone operation.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Sword Fighter - 2D Platformer Game</title>
  <style>
    #game {
      width: 400px;
      height: 300px;
      background-color: #ddd;
      position: relative;
    }
    .character {
      width: 50px;
      height: 50px;
      background-image: url('https://example.com/character.png');
      background-size: cover;
      position: absolute;
    }
    .sword {
      width: 50px;
      height: 20px;
      background-color: silver;
      position: absolute;
      display: none;
    }
    .skeleton {
      width: 50px;
      height: 50px;
      background-image: url('https://example.com/skeleton.png');
      background-size: cover;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="character" class="character"></div>
    <div id="sword" class="sword"></div>
    <div id="skeleton" class="skeleton"></div>
  </div>

// Initial character position and state
      let characterX = 50;
      let characterY = 250;
      let isCharacterJumping = false;

// Initial skeleton position
      let skeletonX = 300;
      let skeletonY = 250;

// Initial game state
      let isGameOver = false;

// Function to check collision between two elements
      function isCollision(element1, element2) {
        const rect1 = element1.getBoundingClientRect();
        const rect2 = element2.getBoundingClientRect();
        return !(
          rect1.top > rect2.bottom ||
          rect1.right < rect2.left ||
          rect1.bottom < rect2.top ||
          rect1.left > rect2.right
        );
      }

// Function to move the character
      function moveCharacter() {
        if (isCharacterJumping) {
          characterY -= 5;
          if (characterY <= 150) {
            isCharacterJumping = false;
          }
        } else {
          characterY += 5;
          if (characterY >= 250) {
            characterY = 250;
          }
        }
        character.style.top = characterY + 'px';

// Check collision with skeleton
        if (isCollision(character, skeleton)) {
          gameOver();
        }

// Repeat the function on every frame
        if (!isGameOver) {
          requestAnimationFrame(moveCharacter);
        }
      }

// Function to move the skeleton
      function moveSkeleton() {
        skeletonX -= 3;
        if (skeletonX <= 0) {
          skeletonX = 400;
        }
        skeleton.style.left = skeletonX + 'px';

// Check collision with sword
        if (isCollision(sword, skeleton)) {
          skeletonX = 400;
        }

// Repeat the function on every frame
        if (!isGameOver) {
          requestAnimationFrame(moveSkeleton);
        }
      }

// Function to handle game over
      function gameOver() {
        isGameOver = true;
        alert('Game Over');
      }

// Function to swing sword
      function swingSword() {
        sword.style.display = 'block';

// Hide sword after 0.3s
        setTimeout(function() {
          sword.style.display = 'none';
        }, 300);

// Repeat the function on every swing
        if (!isGameOver) {
          requestAnimationFrame(swingSword);
        }
      }

// Listen to touch events for character jump
      document.addEventListener('touchstart', function() {
        if (!isCharacterJumping) {
          isCharacterJumping = true;
        }
      });

// Listen to touch events for sword swing
      document.addEventListener('touchend', function() {
        if (!isGameOver) {
          swingSword();
        }
      });

// Start the game by moving character and skeleton
      moveCharacter();
      moveSkeleton();
    });
  </script>
</body>
</html>
```

Please note that you would need to replace the `character.png` and `skeleton.png` URLs with the actual image URLs or use your own image files for the character and skeleton. Also, adjust the image sizes and other styles as needed.