Accelerate your gaming brain's game

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

No:2768

2516

←

Prev Next

→

Accelerate your gaming brain
Developer User3611｜Date and time 23/6/22 16:25:40
Build time 34.154 sec｜Game capacity 2.955KB｜

Script

「👾エモジブロックス👾」というゲームを作りました！これは、マルチカラーの四角形ブロックが上から下に降ってくるので、スマホを傾けて左右に移動させて、同じ色のブロックを三つ以上並べて消す、というゲームです。毎回、新しい色のブロックがセットされるので、謎解き要素もあります。最高得点ランキング機能もありますので、友達と競い合ってください！以下が実際のコードです：

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>エモジブロックス</title>
  <style>
    body {
      margin: 0;
      font-size: 0;
      text-align: center;
    }
    canvas {
      width: 100%;
      height: 100%;
      touch-action: manipulation; /* スマホ用 */
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    // ゲームの実装
    const ROWS = 12;
    const COLS = 8;
    const BLOCK_SIZE = 60;
    const MIN_TOUCHMOVE_DISTANCE = 30;
    const COLORS = ["🔴","🔵","🟢","🟡","🟣","🟤"];
  
    let canvas = document.getElementById("canvas");
    canvas.width = BLOCK_SIZE * COLS;
    canvas.height = BLOCK_SIZE * ROWS;
    let ctx = canvas.getContext("2d");
  
    let blocks = [];
    for (let r = 0; r < ROWS; r++) {
      blocks[r] = [];
      for (let c = 0; c < COLS; c++) {
        blocks[r][c] = COLORS[Math.floor(Math.random() * COLORS.length)]; // ランダムにセット
      }
    }
  
    let touchstartX = null;
    canvas.addEventListener("touchstart", (e) => {
      touchstartX = e.touches[0].pageX;
    });
  
    canvas.addEventListener("touchmove", (e) => {
      if (touchstartX === null) {
        return;
      }
      let movedX = e.touches[0].pageX - touchstartX;
      if (Math.abs(movedX) > MIN_TOUCHMOVE_DISTANCE) {
        let dir = movedX > 0 ? 1 : -1;
        moveBlocks(dir);
        touchstartX = null;
      }
    });
  
    function moveBlocks(dir) {
      for (let r = 0; r < ROWS; r++) {
        let row = blocks[r];
        if (dir === 1) {
          // 右に移動
          let last = row.pop();
          row.unshift(last);
        } else if (dir === -1) {
          // 左に移動
          let first = row.shift();
          row.push(first);
        }
      }
      repaint();
    }
  
    function repaint() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let r = 0; r < ROWS; r++) {
        for (let c = 0; c < COLS; c++) {
          let x = c * BLOCK_SIZE;
          let y = r * BLOCK_SIZE;
          ctx.fillStyle = "white";
          ctx.fillRect(x, y, BLOCK_SIZE, BLOCK_SIZE);
          ctx.fillStyle = "black";
          ctx.fillText(blocks[r][c], x + BLOCK_SIZE/2, y + BLOCK_SIZE/2);
        }
      }
    }
  
    // 実行！
    repaint();
  </script>
</body>
</html>
```