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

No:4261

8372

←

Prev Next

→

Rubiks Cube
Developer User3694｜Date and time 23/6/27 16:12:31
Build time 44.579 sec｜Game capacity 4.118KB｜

Script

を作るゲームを実装します。以下が実際のプログラムです。

ルービックキューブゲーム

このプログラムでは、キューブの6面を描画し、タッチした面が回転するように実装しています。タッチした面に応じて、キューブが回転するアニメーションが再現されます。また、スマホでも遊べるように、タッチイベントが利用されています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

を作るゲームを実装します。

以下が実際のプログラムです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ルービックキューブゲーム</title>
</head>
<body>
  <h1>ルービックキューブゲーム</h1>
  <canvas id="cube" width="400" height="400"></canvas>

// キューブの描画
    const drawCube = () => {
      ctx.lineWidth = 2;
      ctx.strokeStyle = "#000";

// 前面
      ctx.strokeRect(50, 50, 100, 100);
      // 上面
      ctx.strokeRect(50, 0, 100, 50);
      // 下面
      ctx.strokeRect(50, 150, 100, 50);
      // 左面
      ctx.strokeRect(0, 50, 50, 100);
      // 右面
      ctx.strokeRect(150, 50, 50, 100);
      // 背面
      ctx.strokeRect(200, 50, 100, 100);

// 赤い面
      ctx.fillStyle = "red";
      ctx.fillRect(50, 50, 100, 100);
      // 青い面
      ctx.fillStyle = "blue";
      ctx.fillRect(200, 50, 100, 100);
      // 緑の面
      ctx.fillStyle = "green";
      ctx.fillRect(50, 150, 100, 50);
      // 黄色い面
      ctx.fillStyle = "yellow";
      ctx.fillRect(50, 0, 100, 50);
      // 橙色の面
      ctx.fillStyle = "orange";
      ctx.fillRect(150, 50, 50, 100);
      // 白い面
      ctx.fillStyle = "white";
      ctx.fillRect(200, 50, 100, 100);

// 目盛り
      ctx.font = "20px serif";
      ctx.fillText("0", 30, 70);
      ctx.fillText("1", 30, 120);
      ctx.fillText("2", 30, 170);
      ctx.fillText("0", 70, 30);
      ctx.fillText("1", 120, 30);
      ctx.fillText("2", 170, 30);
    };

drawCube(); // 最初に一度描画する

// タッチした面を回転させる
    cubeCanvas.addEventListener("touchstart", (e) => {
      const x = e.touches[0].clientX - cubeCanvas.getBoundingClientRect().left;
      const y = e.touches[0].clientY - cubeCanvas.getBoundingClientRect().top;

if (x >= 50 && x <= 150 && y >= 50 && y <= 150) {
        // 前面を回転
        ctx.clearRect(50, 50, 100, 100);
        ctx.save();
        ctx.translate(100, 100);
        ctx.rotate(Math.PI / 2);
        ctx.translate(-100, -100);
        drawCube();
        ctx.restore();
      } else if (x >= 200 && x <= 300 && y >= 50 && y <= 150) {
        // 背面を回転
        ctx.clearRect(200, 50, 100, 100);
        ctx.save();
        ctx.translate(250, 100);
        ctx.rotate(Math.PI / 2);
        ctx.translate(-250, -100);
        drawCube();
        ctx.restore();
      } else if (x >= 50 && x <= 150 && y >= 150 && y <= 200) {
        // 下面を回転
        ctx.clearRect(50, 150, 100, 50);
        ctx.save();
        ctx.translate(100, 175);
        ctx.rotate(Math.PI / 2);
        ctx.translate(-100, -175);
        drawCube();
        ctx.restore();
      } else if (x >= 50 && x <= 150 && y >= 0 && y <= 50) {
        // 上面を回転
        ctx.clearRect(50, 0, 100, 50);
        ctx.save();
        ctx.translate(100, 25);
        ctx.rotate(Math.PI / 2);
        ctx.translate(-100, -25);
        drawCube();
        ctx.restore();
      } else if (x >= 150 && x <= 200 && y >= 50 && y <= 150) {
        // 右面を回転
        ctx.clearRect(150, 50, 50, 100);
        ctx.save();
        ctx.translate(175, 100);
        ctx.rotate(Math.PI / 2);
        ctx.translate(-175, -100);
        drawCube();
        ctx.restore();
      } else if (x >= 0 && x <= 50 && y >= 50 && y <= 150) {
        // 左面を回転
        ctx.clearRect(0, 50, 50, 100);
        ctx.save();
        ctx.translate(25, 100);
        ctx.rotate(Math.PI / 2);
        ctx.translate(-25, -100);
        drawCube();
        ctx.restore();
      }
    });
  </script>
</body>
</html>