لعبة ثنائية الأبعاد تشبه ماريو ميكر's game

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

No:41480

←

Prev Next

→

لعبة ثنائية الأبعاد تشبه ماريو ميكر
Developer User18571｜Date and time 24/2/7 19:28:34
Build time 13.913 sec｜Game capacity 3.831KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>لعبة ثنائية الأبعاد تشبه ماريو ميكر</title>
    <style>
      canvas {
        border: 1px solid #000;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
      // Initialize the game canvas
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');

// Load the pictograms
      const playerImg = new Image();
      const enemyImg = new Image();
      playerImg.src = 'player.png';
      enemyImg.src = 'enemy.png';

// Define the player object
      const player = {
        x: 50,
        y: canvas.height - 100,
        width: 50,
        height: 50,
        speed: 5,
        isJumping: false,
        jumpHeight: 100,
        gravity: 1,
        velocity: 0,
        isMovingLeft: false,
        isMovingRight: false,
        score: 0
      };

// Define the enemy object
      const enemy = {
        x: canvas.width - 100,
        y: canvas.height - 100,
        width: 50,
        height: 50,
        speed: 2
      };

// Define the game loop
      function gameLoop() {
        update();
        draw();
        requestAnimationFrame(gameLoop);
      }

// Update game state
      function update() {
        // Player movement
        if (player.isMovingLeft) {
          player.x -= player.speed;
        }
        if (player.isMovingRight) {
          player.x += player.speed;
        }

// Player jumping
        if (player.isJumping) {
          player.velocity -= player.gravity;
          player.y -= player.velocity;

if (player.y >= canvas.height - player.height) {
            player.y = canvas.height - player.height;
            player.isJumping = false;
          }
        }

// Enemy movement
        enemy.x -= enemy.speed;

// Collision detection
        if (collisionCheck(player, enemy)) {
          player.score++;
          resetEnemyPosition();
        }
      }

// Draw game objects on canvas
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the player
        ctx.drawImage(playerImg, player.x, player.y, player.width, player.height);

// Draw the enemy
        ctx.drawImage(enemyImg, enemy.x, enemy.y, enemy.width, enemy.height);

// Draw the score
        ctx.fillStyle = '#000';
        ctx.font = '24px Arial';
        ctx.fillText('Score: ' + player.score, 10, 30);
      }

// Handle player movement
      document.addEventListener('keydown', function(event) {
        const key = event.keyCode;

if (key === 37) {
          player.isMovingLeft = true;
        } else if (key === 39) {
          player.isMovingRight = true;
        } else if (key === 38 && !player.isJumping) {
          player.isJumping = true;
          player.velocity = player.jumpHeight;
        }
      });

document.addEventListener('keyup', function(event) {
        const key = event.keyCode;

if (key === 37) {
          player.isMovingLeft = false;
        } else if (key === 39) {
          player.isMovingRight = false;
        }
      });

// Check for collision between player and enemy
      function collisionCheck(player, enemy) {
        return (
          player.x < enemy.x + enemy.width &&
          player.x + player.width > enemy.x &&
          player.y < enemy.y + enemy.height &&
          player.y + player.height > enemy.y
        );
      }

// Reset enemy position when collision occurs
      function resetEnemyPosition() {
        enemy.x = canvas.width - 100;
        enemy.y = canvas.height - 100;
      }

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