Robbery to open a safe's game

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

No:3325

1945

←

Prev Next

→

Robbery to open a safe
Developer User3589｜Date and time 23/6/24 13:53:08
Build time 38.495 sec｜Game capacity 3.912KB｜

Script

がテーマのゲームを作りました。

このゲームでは、強盗が金庫を開けることを目的とします。金庫コードは "1234" であり、キーボードの 0、1、2、3 を押して入力します。時間制限は 60 秒で、ゲーム中に得点を得るとタイムボーナスとして加算されます。強盗が金庫を開けた場合、コードの試行回数に応じて得点が加算されます。ゲームオーバーになるまで何度でもプレイできます。

←

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 type="text/css">
    body {
      margin: 0;
      padding: 0;
      font-size: 24px;
      text-align: center;
    }
    canvas {
      width: 100%;
      height: 100%;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

let score = 0;
    let timer = 60;

const code = "1234";
    const input = [];
    let done = false;

let angle = 0;
    let speed = 0.1;

const goldImg = new Image();
    goldImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/google/263/money-bag_1f4b0.png";

const crackImg = new Image();
    crackImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/google/241/face-with-head-bandage_1f915.png";

const thiefImg = new Image();
    thiefImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/google/241/female-detective_1f575-200d-2640-fe0f.png";

const lockImg = new Image();
    lockImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/google/241/closed-lock-with-key_1f510.png";

const keyPressed = event => {
      if (!done) {
        if (event.keyCode === 48) input.push("0");
        if (event.keyCode === 49) input.push("1");
        if (event.keyCode === 50) input.push("2");
        if (event.keyCode === 51) input.push("3");
        if (input.length === code.length) verifyCode();
      }
    };

const loop = () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

angle += speed;
      const radius = Math.min(canvas.width, canvas.height) / 3;

ctx.save();
      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.rotate(angle);

ctx.drawImage(goldImg, -goldImg.width / 2, -goldImg.height / 2, goldImg.width, goldImg.height);
  
      ctx.restore();

ctx.fillStyle = "white";
      ctx.font = "20px Arial";
      ctx.fillText(`Score: ${score}`, 20, 40);

if (!done) {
        ctx.drawImage(lockImg, canvas.width / 2 - lockImg.width / 2, canvas.height - lockImg.height - 80, lockImg.width, lockImg.height);
        ctx.fillStyle = "red";
        for (let i = 1; i <= input.length; i++) {
          ctx.fillText("*", canvas.width / 2 - 50 + i * 30, canvas.height - 70);
        }
      } else {
        ctx.drawImage(crackImg, canvas.width / 2 - crackImg.width / 2, canvas.height / 2 - crackImg.height / 2, crackImg.width, crackImg.height);
        ctx.fillStyle = "white";
        ctx.font = "30px Arial";
        ctx.fillText("Congratulations!", canvas.width / 2, canvas.height / 2 + 50);
      }

if (timer === 0) {
        clearInterval(interval);
        ctx.fillStyle = "white";
        ctx.font = "50px Arial";
        ctx.fillText("Game Over", canvas.width / 2, canvas.height / 2);
      } else {
        timer--;
      }
    };

document.addEventListener("keydown", keyPressed);

let interval = setInterval(loop, 1000 / 60);
  </script>
</body>
</html>