A Mario-like, side-scrolling game. The player can move left, right, and jump, and scores are obtained by stepping on enemies from above. There is a goal at the end of the stage, and when you touch the goal, a pop-up window appears saying You have reached the goal! will be displayed in a pop-up window.'s game

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

No:1450

194

←

Prev Next

→

A Mario-like, side-scrolling game. The player can ..ALL
Developer もちきなこ｜Date and time 23/6/18 16:41:46
Build time 41.47 sec｜Game capacity 3.586KB｜

Script

←:左移動 ↑:ジャンプ →:右移動

スコア: 0

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>マリオ風ゲーム</title>
  <style>
    #canvas{
      border: 1px solid gray;
    }
  </style>
</head>

<body onload="init()">
  <canvas id="canvas" width="320" height="240"></canvas>
  <p>←:左移動  ↑:ジャンプ  →:右移動</p>
  <p>スコア: <span id="score">0</span></p>
  
  <script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext('2d');
    const scoreElm = document.getElementById("score");

const WIDTH = canvas.width;
    const HEIGHT = canvas.height;

// マリオ
    let mario = {
      x: 50,
      y: 150,
      width: 32,
      height: 64,
      speedX: 0,
      speedY: 0,
      jumping: false
    };

// 敵
    let enemies = [
      {x: 200, y: 150},
      {x: 250, y: 100},
      {x: 300, y: 150},
    ];

// ゴール
    const GOAL_X = 270;
    const GOAL_Y = 30;
    const GOAL_WIDTH = 30;
    const GOAL_HEIGHT = 30;

// スコア
    let score = 0;

// keyイベント
    document.addEventListener("keydown", function(event){
      switch (event.keyCode) {
        case 37: // ←
          mario.speedX = -5;
          break;
        case 38: // ↑
          if (!mario.jumping) {
            mario.jumping = true;
            mario.speedY = -20;
          }
          break;
        case 39: // →
          mario.speedX = 5;
          break;
      }
    });

// ゲーム初期化
    function init() {
      setInterval(update, 50); // 50ms毎に更新

// 描画
      draw();
    }

// 更新
    function update() {
      // 移動
      mario.x += mario.speedX;
      mario.y += mario.speedY;

// 重力
      if (mario.jumping) {
        mario.speedY++;
      }

// 壁にぶつかったら
      if (mario.x < 0) {
        mario.x = 0;
      } else if (mario.x > WIDTH - mario.width) {
        mario.x = WIDTH - mario.width;
      }

// 着地したら
      if (mario.y > HEIGHT - mario.height) {
        mario.jumping = false;
        mario.y = HEIGHT - mario.height;
        mario.speedY = 0;
      }

// 敵にぶつかったら
      for (let i = 0; i < enemies.length; i++) {
        if (collideRect(mario, enemies[i])) {
          score++;
          enemies.splice(i, 1);
        }
      }

// ゴールに到達したら
      if (collideRect(mario, {x: GOAL_X, y: GOAL_Y, width: GOAL_WIDTH, height: GOAL_HEIGHT})) {
        alert("ゴールしました！");
      }

// 描画
      draw();

// スコア更新
      scoreElm.innerHTML = score;
    }

// 衝突判定
    function collideRect(obj1, obj2) {
      if (obj1.x + obj1.width > obj2.x &&
        obj1.x < obj2.x + obj2.width &&
        obj1.y + obj1.height > obj2.y &&
        obj1.y < obj2.y + obj2.height) {
        return true;
      }
      return false;
    }

// 描画
    function draw() {
      ctx.clearRect(0, 0, WIDTH, HEIGHT);

// 障害物描画
      ctx.fillStyle = "brown";
      ctx.fillRect(100, 170, 20, 20);
      ctx.fillRect(150, 120, 20, 20);
      ctx.fillRect(200, 170, 20, 20);

// 敵描画
      ctx.fillStyle = "red";
      for (let i = 0; i < enemies.length; i++) {
        let enemy = enemies[i];
        ctx.fillRect(enemy.x, enemy.y, 30, 30);
      }

// ゴール描画
      ctx.fillStyle = "green";
      ctx.fillRect(GOAL_X, GOAL_Y, GOAL_WIDTH, GOAL_HEIGHT);

// マリオ描画
      ctx.fillStyle = "blue";
      ctx.fillRect(mario.x, mario.y, mario.width, mario.height);
    }
  </script>
</body>
</html>