虹色カラスル * 背景色は、動的に色調が変化します。 * 画面には『カラフル』書かれた文字が表示されています。 * 文字は、ランダムな色に高速で点滅しながら、ランダムな方向へ動きます。 * 文字は画面上に10個以上存在しており、タップすることで、さらに数を増やすことができます。's game

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

No:4371

4917

←

Prev Next

→

虹色カラスル * 背景色は、動的に色調が変化します。 * 画面には『カラフル』書かれた文字が表示..ALL
Developer もちきなこ｜Date and time 23/6/27 20:49:31
Build time 34.594 sec｜Game capacity 3.255KB｜

Script

ご依頼いただいた『虹色カラスル』というゲームを実装いたします。以下が完成したプログラムとなります。

カラフル

このゲームでは、ランダムなカラーの文字がランダムに動きます。また、画面をタップすることで文字を追加することができます。画面に表示できる文字数に制限はありますが、楽しんでいただければと思います。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

ご依頼いただいた『虹色カラスル』というゲームを実装いたします。
以下が完成したプログラムとなります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>虹色カラスル</title>
</head>
<body>
  <div style="background-color: #FFF; text-align:center; font-size:80px; margin-top:20%;"
    id="title">カラフル</div>
  <script>
    var num = 10; // 最初に表示する文字の数
    var colors = ["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#8B00FF"]; // 文字のカラーのリスト
    var objs = []; // 文字のオブジェクトのリスト
    var screenWidth = window.innerWidth; // 画面の幅
    var screenHeight = window.innerHeight; // 画面の高さ
    var title = document.getElementById("title"); // タイトル文字

function createObj() {
      // 文字を作成する関数
      var obj = document.createElement("div");
      var randomColor = colors[Math.floor(Math.random()*colors.length)]; // ランダムなカラーの取得
      obj.style.position = "fixed";
      obj.style.left = Math.random()*screenWidth + "px"; // 入れる位置をランダムで決める
      obj.style.top = Math.random()*screenHeight + "px"; // 入れる位置をランダムで決める
      obj.style.color = randomColor;
      obj.style.fontSize = "80px";
      obj.innerHTML = "カラフル";
      objs.push(obj); // リストにオブジェクトを追加
      document.body.appendChild(obj); // HTMLに追加
    }

for (var i = 0; i<num; i++) {
      createObj(); // 最初にnum個のオブジェクトを生成する
    }

function addObj() {
      // 文字を追加するための関数
      if (objs.length>=50) return; // オブジェクトが50個を超えていたら追加しない
      createObj();
    }

function updateTitleColor() {
      // タイトルの色をランダムに変える関数
      var randomColor = colors[Math.floor(Math.random()*colors.length)];
      title.style.color = randomColor;
    }

setInterval(moveObj, 50); // 50ミリ秒ごとに文字を動かす
    setInterval(addObj, 2000); // 2秒ごとに文字を追加する
    setInterval(updateTitleColor, 1000); // 1秒ごとにタイトルの色を変える
  </script>
</body>
</html>