Make a complete Game of mario's game

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

No:35951

145

←

Prev Next

→

Make a complete Game of mario
Developer User16701｜Date and time 24/1/16 5:15:39
Build time 10.972 sec｜Game capacity 2.561KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Super Mario Game</title>
  <style>
    #game-screen {
      position: relative;
      width: 600px;
      height: 400px;
      border: 1px solid black;
      background-color: lightblue;
    }
    #mario {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 60px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="game-screen">
    <div id="mario"></div>
  </div>

// Set initial position of Mario
    var marioPosition = {
      x: 0,
      y: 0
    };

// Define movement variables
    var moveLeft = false;
    var moveRight = false;

// Update Mario's position based on movement variables
    function updateMarioPosition() {
      if (moveLeft) {
        marioPosition.x -= 5;
      }
      if (moveRight) {
        marioPosition.x += 5;
      }

// Limit Mario's movement within the game screen
      if (marioPosition.x < 0) {
        marioPosition.x = 0;
      }
      if (marioPosition.x > gameScreen.offsetWidth - mario.offsetWidth) {
        marioPosition.x = gameScreen.offsetWidth - mario.offsetWidth;
      }

// Update Mario's position on the screen
      mario.style.left = marioPosition.x + "px";
      mario.style.bottom = marioPosition.y + "px";
    }

// Event listeners for moving Mario
    document.addEventListener("touchstart", handleTouchStart, false);
    document.addEventListener("touchend", handleTouchEnd, false);
    document.addEventListener("keydown", handleKeyDown, false);
    document.addEventListener("keyup", handleKeyUp, false);

function handleTouchStart(event) {
      if (event.touches[0].clientX < gameScreen.offsetWidth / 2) {
        moveLeft = true;
      } else {
        moveRight = true;
      }
    }

function handleTouchEnd(event) {
      moveLeft = false;
      moveRight = false;
    }

function handleKeyDown(event) {
      if (event.keyCode === 37) {
        moveLeft = true;
      }
      if (event.keyCode === 39) {
        moveRight = true;
      }
    }

function handleKeyUp(event) {
      if (event.keyCode === 37 || event.keyCode === 39) {
        moveLeft = false;
        moveRight = false;
      }
    }

// Game loop to update Mario's position continuously
    function gameLoop() {
      updateMarioPosition();
      requestAnimationFrame(gameLoop);
    }

// Start the game
    gameLoop();
  </script>
</body>
</html>