Back Light's game | AI game creator

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

No:3977

6668

Back Light
Developer User3727｜Date and time 23/6/27 1:22:10
Build time 58.386 sec｜Game capacity 5.11KB｜

プログラムの内容やテーマ等に制限がないため、以下は一例となります。＜例＞タイトル：フルーツマッチングゲームプログラム内容：画面に果物の絵文字が並んでおり、同じ種類の果物を3つ以上繋げると消える。時間制限があり、ゲームオーバーになる前にスコアを稼ぐ。スコアは同じ種類の果物を繋げた数に応じて加算される。 JavaScript実装例：

スコア：0

＜注意点＞ - このプログラムは時間制限やランダム生成した果物の種類などを含むため、毎回同じ結果にはなりません。 - このプログラムはPCでもプレイ可能ですが、スマホ操作を前提に作成しました。 - このプログラムはCSSも含んでいますが、必ず1枚のHTMLファイル内に実装するため記述しました。実際に別ファイル化する場合には、CSSとJavaScriptの部分を別ファイルとし、それぞれlink要素とscript要素で読み込むようにしましょう。また、本プログラムは現時点で最新のHTML5およびES6で書かれています。

→ 　

2　

1　

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

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

(C)2023 HisashiApp

プログラムの内容やテーマ等に制限がないため、以下は一例となります。

＜例＞
タイトル：フルーツマッチングゲーム
プログラム内容：画面に果物の絵文字が並んでおり、同じ種類の果物を3つ以上繋げると消える。時間制限があり、ゲームオーバーになる前にスコアを稼ぐ。スコアは同じ種類の果物を繋げた数に応じて加算される。
JavaScript実装例：
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>フルーツマッチングゲーム</title>
  </head>
  <body>
    <div id="gameArea"></div>
    
    <script>
      // 果物の絵文字とそれぞれのポイントを定義
      const fruits = [{emoji: '🍎', point: 10}, {emoji: '🍊', point: 15}, {emoji: '🥝', point: 20}, {emoji: '🍇', point: 25}];
      
      // ゲーム画面を生成する関数
      function createGameArea() {
        const gameArea = document.getElementById('gameArea');
        let rows = '';
        for (let i = 0; i < 5; i++) { // 5列生成
          let row = '';
          for (let j = 0; j < 5; j++) { // 5行生成
            const randomFruit = fruits[Math.floor(Math.random() * fruits.length)]; // ランダムで果物を1つ選択
            row += `<span class="fruit" data-point="${randomFruit.point}">${randomFruit.emoji}</span>`; // 果物の絵文字をspan要素で表示し、それぞれの点数をdata属性に設定
          }
          rows += `<div class="row">${row}</div>`; // 1行分のspan要素をまとめてdiv要素にして追加
        }
        gameArea.innerHTML = rows; // 生成した画面を反映
        setInterval(checkMatching, 1000); // 時間制限とマッチング確認を行う関数を定期的に実行
      }
      
      // マッチングがあるか確認する関数
      function checkMatching() {
        const fruitsList = Array.from(document.querySelectorAll('.fruit')); // 果物のspan要素を取得
        let sameFruits = []; // 同じ種類の果物を保持する配列
        fruitsList.forEach((element, index) => {
          const currentFruit = fruitsList[index];
          const nextFruit = fruitsList[index + 1];
          if (currentFruit && nextFruit && currentFruit.innerText === nextFruit.innerText) { // 次の要素と同じ種類の果物があれば配列に追加
            if (sameFruits.length === 0) { // 1つめの場合は自身も配列に追加
              sameFruits.push(currentFruit, nextFruit);
            } else { // 2つめ以降は同じ種類の果物が続く限り配列に追加
              if (sameFruits[sameFruits.length - 1] === currentFruit) { // 直前の要素と同じ場合は追加
                sameFruits.push(nextFruit);
              } else { // 直前の要素と異なる場合は配列を初期化して自身と次の要素を追加
                sameFruits = [];
                sameFruits.push(currentFruit, nextFruit);
              }
            }
          } else if (sameFruits.length >= 3) { // 同じ種類の果物が3個以上続いている場合は消去
            const totalPoint = sameFruits.reduce((acc, cur) => acc + parseInt(cur.getAttribute('data-point')), 0); // 点数を計算
            const row = sameFruits[0].parentElement; // 行の要素を取得
            sameFruits.forEach(fruit => row.removeChild(fruit)); // 果物を消去
            updateScore(totalPoint); // スコアを更新
            sameFruits = []; // 配列を初期化
          } else { // 同じ種類の果物が3個未満の場合は配列を初期化
            sameFruits = [];
          }
        });
      }
      
      // スコアを更新する関数
      function updateScore(point) {
        const scoreElement = document.getElementById('score');
        const currentScore = parseInt(scoreElement.innerText);
        scoreElement.innerText = currentScore + point;
      }
      
      // ゲーム開始
      createGameArea();
    </script>
    
    <style>
      #gameArea {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 40px;
      }
      .row {
        display: flex;
        justify-content: center;
      }
      .fruit {
        margin: 5px;
        cursor: pointer;
      }
    </style>
    
    <p>スコア：<span id="score">0</span></p>
  </body>
</html>
```
＜注意点＞
- このプログラムは時間制限やランダム生成した果物の種類などを含むため、毎回同じ結果にはなりません。
- このプログラムはPCでもプレイ可能ですが、スマホ操作を前提に作成しました。
- このプログラムはCSSも含んでいますが、必ず1枚のHTMLファイル内に実装するため記述しました。実際に別ファイル化する場合には、CSSとJavaScriptの部分を別ファイルとし、それぞれlink要素とscript要素で読み込むようにしましょう。また、本プログラムは現時点で最新のHTML5およびES6で書かれています。