Games that paddy67 users like's game | AI game creator

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

No:5135

3269

Games that paddy67 users like
Developer User3510｜Date and time 23/6/29 19:19:06
Build time 59.404 sec｜Game capacity 6.283KB｜

了解しました。では、「2048」というゲームを作りましょう。 HTMLファイルの中で下記のようにJavaScriptコードを書きます:

このコードは「2048」という数字のパズルゲームを作ります。キーボードで上下左右の矢印キーを押すことで、数字の合成やマスのスワイプが行われます。このゲームは4x4のグリッド内に数字のマスが配置されています。合成すると数字が倍になります。ゲームオーバーとなる条件は、すべてのマスが埋まったり、動かせるマスがなかったりする場合です。スマートフォンで遊ぶ場合は、画面上のグリッドをタップすることでスワイプ操作を模倣することができます。ゲームの実行にはHTMLファイルをブラウザで開く必要があります。また、CSSスタイルを適切に設定することで、見た目を改善することもできます。お楽しみください！

→ 　

1　

0　

　
　
　
　

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

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

(C)2023 HisashiApp

了解しました。では、「2048」というゲームを作りましょう。

HTMLファイルの中で下記のようにJavaScriptコードを書きます:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>2048 Game</title>
  <style>
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      padding: 10px;
      background-color: #eee;
    }
    
    .cell {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="grid"></div>

<script>
    const grid = document.querySelector('.grid');
    let cells = [];

function initialize() {
      for (let i = 0; i < 4; i++) {
        cells[i] = [];
        for (let j = 0; j < 4; j++) {
          const cell = document.createElement('div');
          cell.className = 'cell';
          cell.textContent = '';
          cells[i][j] = cell;
          grid.appendChild(cell);
        }
      }
      addRandomNumber();
      addRandomNumber();
    }

function addRandomNumber() {
      const emptyCells = [];
      for (let i = 0; i < cells.length; i++) {
        for (let j = 0; j < cells[i].length; j++) {
          if (cells[i][j].textContent === '') {
            emptyCells.push(cells[i][j]);
          }
        }
      }

if (emptyCells.length === 0) {
        return;
      }

const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];

randomCell.classList.add('new');
      randomCell.textContent = Math.random() > 0.5 ? '2' : '4';
    }

function combineCells(row) {
      let score = 0;

for (let i = 3; i > 0; i--) {
        const a = cells[row][i].textContent;
        const b = cells[row][i - 1].textContent;

if (a === b) {
          const combinedValue = parseInt(a) * 2;
          cells[row][i].textContent = combinedValue;
          cells[row][i].classList.add('combined');
          cells[row][i - 1].textContent = '';

score += combinedValue;
        }
      }

return score;
    }

function swipeLeft() {
      let score = 0;

for (let row = 0; row < cells.length; row++) {
        score += combineCells(row);

for (let i = 0; i < cells[row].length; i++) {
          if (cells[row][i].textContent === '') {
            let nextPosition = i + 1;
            while (nextPosition < cells[row].length && cells[row][nextPosition].textContent === '') {
              nextPosition++;
            }

if (nextPosition < cells[row].length) {
              cells[row][i].textContent = cells[row][nextPosition].textContent;
              cells[row][nextPosition].textContent = '';
              cells[row][i].classList.add('moved');
            }
          }
        }
      }

return score;
    }

function updateScore(score) {
      const scoreElement = document.querySelector('.score');
      scoreElement.textContent = `Score: ${score}`;
    }

function checkGameOver() {
      for (let row = 0; row < cells.length; row++) {
        for (let i = 0; i < cells[row].length; i++) {
          if (cells[row][i].textContent === '') {
            return false;
          }

if (i > 0 && cells[row][i].textContent === cells[row][i - 1].textContent) {
            return false;
          }

if (row < cells.length - 1 && cells[row][i].textContent === cells[row + 1][i].textContent) {
            return false;
          }
        }
      }

return true;
    }

function handleSwipe(event) {
      let score = 0;

switch (event.key) {
        case 'ArrowUp':
          rotateCells(true);
          score = swipeLeft();
          rotateCells(false);
          break;
        case 'ArrowDown':
          rotateCells(false);
          score = swipeLeft();
          rotateCells(true);
          break;
        case 'ArrowLeft':
          score = swipeLeft();
          break;
        case 'ArrowRight':
          rotateCells(true);
          rotateCells(true);
          score = swipeLeft();
          rotateCells(true);
          rotateCells(true);
          break;
      }

if (score > 0) {
        addRandomNumber();
        updateScore(score);
      }

if (checkGameOver()) {
        endGame();
      }
    }

function rotateCells(clockwise) {
      const newCells = [];

for (let i = 0; i < cells.length; i++) {
        newCells[i] = [];
        for (let j = 0; j < cells[i].length; j++) {
          newCells[i][j] = cells[i][j];
        }
      }

if (clockwise) {
        for (let i = 0; i < cells.length; i++) {
          for (let j = 0; j < cells[i].length; j++) {
            cells[i][j] = newCells[j][cells.length - 1 - i];
          }
        }
      } else {
        for (let i = 0; i < cells.length; i++) {
          for (let j = 0; j < cells[i].length; j++) {
            cells[i][j] = newCells[cells[i].length - 1 - j][i];
          }
        }
      }

for (let i = 0; i < cells.length; i++) {
        for (let j = 0; j < cells[i].length; j++) {
          grid.replaceChild(cells[i][j], cells[i][j]);
        }
      }
    }

function endGame() {
      alert('Game Over!');
      document.removeEventListener('keydown', handleSwipe);
    }

document.addEventListener('keydown', handleSwipe);
    initialize();
  </script>
</body>
</html>
```

このコードは「2048」という数字のパズルゲームを作ります。キーボードで上下左右の矢印キーを押すことで、数字の合成やマスのスワイプが行われます。

このゲームは4x4のグリッド内に数字のマスが配置されています。合成すると数字が倍になります。ゲームオーバーとなる条件は、すべてのマスが埋まったり、動かせるマスがなかったりする場合です。

スマートフォンで遊ぶ場合は、画面上のグリッドをタップすることでスワイプ操作を模倣することができます。

ゲームの実行にはHTMLファイルをブラウザで開く必要があります。また、CSSスタイルを適切に設定することで、見た目を改善することもできます。お楽しみください！