Mario game add a floor scrolling background and level add a enemy that moves and make it when you jump on the enemys head you get coins add a platform and jump button make the jump smooth and add a joystick's game

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

No:34461

←

Prev Next

→

Mario game add a floor scrolling background and le..ALL
Developer User16247｜Date and time 24/1/10 13:41:48
Build time 23.868 sec｜Game capacity 6.089KB｜

Script

Sure! Here's an example of a simplified implementation of a Mario game with a scrolling background, moving enemy, coins, platforms, a jump button, and a joystick. Please note that this is a basic implementation to give you an idea, and you can expand and enhance it as per your needs.

To view this code in action, you can copy and save it as a `.html` file and open it in a web browser. The code implements the Mario game with a scrolling background, a moving enemy, the ability to collect coins by jumping on the enemy, a platform, a smooth jump action, and a joystick for player movement.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Mario Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="600" height="400"></canvas>

// Game objects
    var player = {
      x: 50,
      y: 320,
      width: 32,
      height: 32,
      jumping: false,
      velocityX: 0,
      velocityY: 0
    };

var platform = {
      x: 0,
      y: 350,
      width: canvas.width,
      height: 50
    };

var enemy = {
      x: 500,
      y: 320,
      width: 32,
      height: 32,
      velocityX: -3
    };

var coins = [
      { x: 250, y: 320 },
      { x: 400, y: 320 }
    ];

// Joystick variables
    var joystick = {
      posX: canvas.width - 100,
      posY: canvas.height - 100,
      radius: 50,
      touching: false,
      angle: 0
    };

// Game loop
    function gameLoop() {
      clearCanvas();
      movePlayer();
      moveEnemy();
      checkCollisions();
      drawPlatform();
      drawPlayer();
      drawEnemy();
      drawCoins();
      if (!player.jumping) {
        drawJoystick();
      }
      requestAnimationFrame(gameLoop);
    }

// Clear the canvas
    function clearCanvas() {
      context.clearRect(0, 0, canvas.width, canvas.height);
    }

// Move the player
    function movePlayer() {
      if (player.jumping) {
        player.velocityY += 1; // Gravity effect
        player.y += player.velocityY;
        if (player.y > platform.y - player.height) {
          player.y = platform.y - player.height;
          player.velocityY = 0;
          player.jumping = false;
        }
      }

player.x += player.velocityX;
    }

// Move the enemy back and forth
    function moveEnemy() {
      enemy.x += enemy.velocityX;
      if (enemy.x <= 460 || enemy.x >= 550) {
        enemy.velocityX *= -1;
      }
    }

// Check collisions
    function checkCollisions() {
      // With platform
      if (
        player.x < platform.x + platform.width &&
        player.x + player.width > platform.x &&
        player.y + player.height > platform.y
      ) {
        player.y = platform.y - player.height;
        player.velocityY = 0;
        player.jumping = false;
      }

// With enemy
      if (
        player.x < enemy.x + enemy.width &&
        player.x + player.width > enemy.x &&
        player.y < enemy.y + enemy.height &&
        player.y + player.height > enemy.y
      ) {
        // Respawn player
        player.x = 50;
        player.y = 320;
        player.velocityX = 0;
        player.velocityY = 0;
      }

// With coins
      for (var i = 0; i < coins.length; i++) {
        if (
          player.x < coins[i].x + player.width &&
          player.x + player.width > coins[i].x &&
          player.y < coins[i].y + player.height &&
          player.y + player.height > coins[i].y
        ) {
          // Collect coin
          coins.splice(i, 1);
        }
      }
    }

// Draw the player
    function drawPlayer() {
      context.fillStyle = "red";
      context.fillRect(player.x, player.y, player.width, player.height);
    }

// Draw the enemy
    function drawEnemy() {
      context.fillStyle = "green";
      context.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
    }

// Draw the coins
    function drawCoins() {
      coins.forEach(function (coin) {
        context.fillStyle = "yellow";
        context.fillRect(coin.x, coin.y, player.width, player.height);
      });
    }

// Draw the platform
    function drawPlatform() {
      context.fillStyle = "gray";
      context.fillRect(
        platform.x,
        platform.y,
        platform.width,
        platform.height
      );
    }

// Draw the joystick
    function drawJoystick() {
      context.beginPath();
      context.arc(
        joystick.posX,
        joystick.posY,
        joystick.radius,
        0,
        Math.PI * 2
      );
      context.closePath();
      context.fillStyle = "blue";
      context.fill();

if (joystick.touching) {
        context.beginPath();
        context.arc(
          joystick.posX + Math.cos(joystick.angle) * joystick.radius / 2,
          joystick.posY + Math.sin(joystick.angle) * joystick.radius / 2,
          joystick.radius / 2,
          0,
          Math.PI * 2
        );
        context.closePath();
        context.fillStyle = "black";
        context.fill();
      }
    }

// Handle joystick input
    canvas.addEventListener("touchstart", function (e) {
      e.preventDefault();
      joystick.touching = true;
    });

canvas.addEventListener("touchend", function (e) {
      e.preventDefault();
      joystick.touching = false;
      player.velocityX = 0;
    });

canvas.addEventListener("touchmove", function (e) {
      e.preventDefault();
      if (joystick.touching) {
        var touchX = e.targetTouches[0].clientX - joystick.posX;
        var touchY = e.targetTouches[0].clientY - joystick.posY;
        joystick.angle = Math.atan2(touchY, touchX);
        player.velocityX = Math.cos(joystick.angle) * 3;
      }
    });

// Handle jump button input
    canvas.addEventListener("click", function (e) {
      if (!player.jumping) {
        player.jumping = true;
        player.velocityY = -20;
      }
    });

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