キャンディークラッシュ's game

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

No:40040

←

Prev Next

→

キャンディークラッシュ
Developer 食べる鶏と熱いタバスコ｜Date and time 24/1/31 19:02:40
Build time 27.103 sec｜Game capacity 4.256KB｜

Script

了解です。以下にキャンディークラッシュ風のゲームの実装例を示します。

この例では、8x8のマトリックスを作成し、それぞれのセルに絵文字を表示しています。セルをクリックすると、選択されたセルの背景色が変わります。セルの番号を取得することで、マトリックスの該当する位置の値を更新することもできます。このコードをHTMLファイルとして保存し、ブラウザで開くとキャンディークラッシュ風のゲームがプレイできます。スマホでも操作可能です。ただし、この例ではゲームの仕組みがないため、お互いに色のついたキャンディーの組み合わせなどの処理は実装されていませんが、それらの処理を追加することで完成したゲームとして楽しめるようになります。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下にキャンディークラッシュ風のゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>キャンディークラッシュ</title>
  <style>
    .grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 10px;
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

.cell {
      width: 40px;
      height: 40px;
      border-radius: 20px;
      background-color: #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      cursor: pointer;
    }

.selected {
      background-color: #f00;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div class="cell" onclick="selectCell(0, 0)"></div>
    <div class="cell" onclick="selectCell(0, 1)"></div>
    <div class="cell" onclick="selectCell(0, 2)"></div>
    <div class="cell" onclick="selectCell(0, 3)"></div>
    <div class="cell" onclick="selectCell(0, 4)"></div>
    <div class="cell" onclick="selectCell(0, 5)"></div>
    <div class="cell" onclick="selectCell(0, 6)"></div>
    <div class="cell" onclick="selectCell(0, 7)"></div>
    <div class="cell" onclick="selectCell(1, 0)"></div>
    <div class="cell" onclick="selectCell(1, 1)"></div>
    <div class="cell" onclick="selectCell(1, 2)"></div>
    <div class="cell" onclick="selectCell(1, 3)"></div>
    <div class="cell" onclick="selectCell(1, 4)"></div>
    <div class="cell" onclick="selectCell(1, 5)"></div>
    <div class="cell" onclick="selectCell(1, 6)"></div>
    <div class="cell" onclick="selectCell(1, 7)"></div>
    
  </div>

// セルの選択状態を保持する変数
    var selectedCell = null;

// セルのクリックイベント時に呼ばれる関数
    function selectCell(row, col) {
      var cell = document.getElementsByClassName('cell')[row * 8 + col];

if (selectedCell === null) {
        // セルが未選択の場合、選択状態にする
        cell.classList.add('selected');
        selectedCell = cell;
      } else {
        // セルが選択済みの場合、選択状態を解除
        selectedCell.classList.remove('selected');
        selectedCell = null;
      }
    }

// マトリックスからセルの内容を更新する関数
    function updateMatrix() {
      var cells = document.getElementsByClassName('cell');

for (var i = 0; i < cells.length; i++) {
        var row = Math.floor(i / 8);
        var col = i % 8;

cells[i].textContent = matrix[row][col];
      }
    }

// ページロード時に初期表示を行う
    window.onload = function() {
      updateMatrix();
    };
  </script>
</body>
</html>
```

この例では、8x8のマトリックスを作成し、それぞれのセルに絵文字を表示しています。セルをクリックすると、選択されたセルの背景色が変わります。セルの番号を取得することで、マトリックスの該当する位置の値を更新することもできます。

このコードをHTMLファイルとして保存し、ブラウザで開くとキャンディークラッシュ風のゲームがプレイできます。スマホでも操作可能です。ただし、この例ではゲームの仕組みがないため、お互いに色のついたキャンディーの組み合わせなどの処理は実装されていませんが、それらの処理を追加することで完成したゲームとして楽しめるようになります。