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

No:5326

1096

←

Prev Next

→

Dont keep dying of developer hisashi shock! 🤬💢Game
Developer どうスクのアプデ早くしろよ！🤬💢｜Date and time 23/6/29 23:26:47
Build time 64.911 sec｜Game capacity 6.634KB｜

Script

了解しました！以下はスマートフォンで遊べるシンプルなマージゲームの例です。このゲームでは数字の絵文字を使っています。

マージゲーム

使い方: スワイプまたは矢印キーで数字を結合しましょう。

🌀

🔴

🔵

⚽

▶️

🔴

⚽

🔴

🔵

このプログラムは、スワイプまたは矢印キーを使用して数字の絵文字を結合するシンプルなマージゲームを実装しています。html、css、JavaScriptのコードが1つのファイルに組み込まれており、ゲームはスマートフォンでプレイできるように設計されています。絵文字を使って個々のセルが表示され、セルを結合することで得点を獲得します。

←

Prev　Next

→ 　

Back　

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

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

了解しました！以下はスマートフォンで遊べるシンプルなマージゲームの例です。このゲームでは数字の絵文字を使っています。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>マージゲーム</title>
  <style>
    body {
      font-size: 3rem;
      text-align: center;
      margin: 0;
      padding: 4rem 0;
      background-color: #f8f8f8;
    }
    .game {
      display: inline-block;
      padding: 1rem;
      background-color: #fff;
      border-radius: 0.5rem;
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 1rem;
    }
    .cell {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #eee;
      border-radius: 0.2rem;
      height: 6rem;
    }
  </style>
</head>
<body>
  <div class="game">
    <h1>マージゲーム</h1>
    <p>使い方: スワイプまたは矢印キーで数字を結合しましょう。</p>
    <div class="grid">
      <div class="cell">🌀</div>
      <div class="cell">🔴</div>
      <div class="cell">🔵</div>
      <div class="cell">🔵</div>
      <div class="cell">⚽</div>
      <div class="cell">▶️</div>
      <div class="cell">🔴</div>
      <div class="cell">⚽</div>
      <div class="cell">🔴</div>
      <div class="cell">🔴</div>
      <div class="cell">🔵</div>
      <div class="cell">🔵</div>
    </div>
  </div>

document.addEventListener('keydown', handleKeyDown);
    grid.addEventListener('touchstart', handleTouchStart);
    grid.addEventListener('touchmove', handleTouchMove);

function handleKeyDown(event) {
      const key = event.key;
      if (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight') {
        event.preventDefault(); // デフォルトのスクロール動作をキャンセル
      }

// スクロールイベントとの衝突を防ぐために少し遅らせて処理を実行
      setTimeout(() => {
        mergeCells(key);
        addRandomCell();
      }, 50);
    }

let startTouchX = null;
    let startTouchY = null;

function handleTouchStart(event) {
      startTouchX = event.touches[0].clientX;
      startTouchY = event.touches[0].clientY;
    }

function handleTouchMove(event) {
      if (!startTouchX || !startTouchY) {
        return;
      }

const endTouchX = event.touches[0].clientX;
      const endTouchY = event.touches[0].clientY;
      const deltaX = endTouchX - startTouchX;
      const deltaY = endTouchY - startTouchY;

if (Math.abs(deltaX) > 30 || Math.abs(deltaY) > 30) {
        const key = getSwipeDirection(deltaX, deltaY);
        mergeCells(key);
        addRandomCell();

startTouchX = null;
        startTouchY = null;
      }
    }

function getSwipeDirection(deltaX, deltaY) {
      if (Math.abs(deltaX) > Math.abs(deltaY)) {
        return deltaX > 0 ? 'ArrowRight' : 'ArrowLeft';
      } else {
        return deltaY > 0 ? 'ArrowDown' : 'ArrowUp';
      }
    }

function mergeCells(key) {
      let merged = false;

switch (key) {
        case 'ArrowUp':
          for (let i = 4; i < 12; i++) {
            const current = cells[i];
            const above = cells[i - 4];
            if (current.textContent === above.textContent) {
              current.textContent = '';
              above.textContent = String.fromCodePoint(current.textContent.codePointAt(0) + 1);
              merged = true;
            }
          }
          break;
        case 'ArrowDown':
          for (let i = 7; i >= 0; i--) {
            const current = cells[i];
            const below = cells[i + 4];
            if (current.textContent === below.textContent) {
              current.textContent = '';
              below.textContent = String.fromCodePoint(current.textContent.codePointAt(0) + 1);
              merged = true;
            }
          }
          break;
        case 'ArrowLeft':
          for (let i = 1; i <= 11; i++) {
            const current = cells[i];
            const left = cells[i - 1];
            if (current.textContent === left.textContent) {
              current.textContent = '';
              left.textContent = String.fromCodePoint(current.textContent.codePointAt(0) + 1);
              merged = true;
            }
          }
          break;
        case 'ArrowRight':
          for (let i = 10; i >= 0; i--) {
            const current = cells[i];
            const right = cells[i + 1];
            if (current.textContent === right.textContent) {
              current.textContent = '';
              right.textContent = String.fromCodePoint(current.textContent.codePointAt(0) + 1);
              merged = true;
            }
          }
          break;
      }

if (merged) {
        cleanUpGrid();
      }
    }

function findNextCell(cell) {
      const currentIndex = cells.indexOf(cell);
      const traversalDirection = cell.classList.contains('reverse') ? -1 : 1;
      let nextIndex = currentIndex + traversalDirection;

while (nextIndex >= 0 && nextIndex <= 11) {
        const nextCell = cells[nextIndex];
        if (nextCell.textContent !== '') {
          return nextCell;
        }
        nextIndex += traversalDirection;
      }

return null;
    }

function addRandomCell() {
      const emptyCells = cells.filter(cell => cell.textContent === '');
      if (emptyCells.length === 0) {
        return;
      }

const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
      randomCell.textContent = '🔵';
      randomCell.classList.add('reverse');
    }
  </script>
</body>
</html>
```