Make a platformer game where the character holds a sword and k○lls enemies, he can jump, and turn left and right using a dpad and a sword button to k○ll the enemy, the camera follows the character.'s game

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

No:41740

←

Prev Next

→

Make a platformer game where the character holds a..ALL
Developer User16428｜Date and time 24/2/9 17:07:20
Build time 17.309 sec｜Game capacity 5.113KB｜

Script

Sure! Here's an example of a platformer game implemented as a single HTML file using JavaScript and enclosed in script tags. The game assumes smartphone operation and uses pictograms where possible:

←

↑

→

⚔

This code sets up a simple platformer game where the character can jump, move left and right using the d-pad buttons, and attack using the sword button. The camera follows the character by changing the character's position within the game container. Enemies are represented by blue rectangles, and when the character collides with an enemy, the enemy disappears. Feel free to modify and enhance the game as per your specific requirements and preferences. Good luck with your game development!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a platformer game implemented as a single HTML file using JavaScript and enclosed in script tags. The game assumes smartphone operation and uses pictograms where possible:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Platformer Game</title>
  <style>
    #game-container {
      position: relative;
      width: 100%;
      height: 100%;
      background-color: #EEE;
      overflow: hidden;
    }
    #character {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: red;
    }
    .enemy {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: blue;
    }
    #dpad-container {
      position: absolute;
      bottom: 20px;
      left: 20px;
      display: flex;
    }
    .dpad-button {
      width: 50px;
      height: 50px;
      background-color: gray;
      margin-right: 10px;
      text-align: center;
      line-height: 50px;
      font-size: 24px;
      cursor: pointer;
    }
    #sword-button {
      position: absolute;
      bottom: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      background-color: green;
      text-align: center;
      line-height: 50px;
      font-size: 24px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="character"></div>
    <div class="enemy" style="top: 200px; left: 100px;"></div>
    <div class="enemy" style="top: 200px; left: 300px;"></div>
    <div class="enemy" style="top: 200px; left: 500px;"></div>
    <div id="dpad-container">
      <div class="dpad-button" id="left-button">←</div>
      <div class="dpad-button" id="jump-button">↑</div>
      <div class="dpad-button" id="right-button">→</div>
    </div>
    <div id="sword-button">⚔</div>
  </div>

var gameContainer = document.getElementById("game-container");
    var jumpButton = document.getElementById("jump-button");
    var leftButton = document.getElementById("left-button");
    var rightButton = document.getElementById("right-button");
    var swordButton = document.getElementById("sword-button");

var characterX = 0;
    var characterY = 0;
    var characterSpeed = 5;
    var gravity = 0.2;
    var jumpForce = 7;
    var isJumping = false;

function updateCharacter() {
      character.style.left = characterX + "px";
      character.style.top = characterY + "px";
    }

function jump() {
      if (!isJumping) {
        characterY -= jumpForce;
        isJumping = true;

updateCharacter();
      }
    }

function moveCharacter(direction) {
      if (direction === "left") {
        characterX -= characterSpeed;
        character.style.transform = "scaleX(-1)";
      } else if (direction === "right") {
        characterX += characterSpeed;
        character.style.transform = "scaleX(1)";
      }

updateCharacter();
    }

function checkCollision() {
      var characterRect = character.getBoundingClientRect();

enemies.forEach(function(enemy) {
        var enemyRect = enemy.getBoundingClientRect();

if (characterRect.bottom >= enemyRect.top &&
            characterRect.top <= enemyRect.bottom &&
            characterRect.right >= enemyRect.left &&
            characterRect.left <= enemyRect.right) {
          // Collision detected! Perform action, e.g., kill enemy
          enemy.style.display = "none";
        }
      });
    }

jumpButton.addEventListener("click", jump);

leftButton.addEventListener("mousedown", function() {
      moveCharacter("left");
    });

leftButton.addEventListener("mouseup", function() {
      // Stop moving character
    });

rightButton.addEventListener("mousedown", function() {
      moveCharacter("right");
    });

rightButton.addEventListener("mouseup", function() {
      // Stop moving character
    });

swordButton.addEventListener("click", function() {
      // Perform sword attack
      // You can add your implementation here
    });

setInterval(function() {
      applyGravity();
      checkCollision();
    }, 10);
  </script>
</body>
</html>
```

Feel free to modify and enhance the game as per your specific requirements and preferences. Good luck with your game development!