AI game creator

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

No:4443

1288

←

Prev Next

→

Rainbow Falls
Developer User1006｜Date and time 23/6/28 1:03:22
Build time 26.408 sec｜Game capacity 2.45KB｜

Script

では、スマホ操作前提のゲームアプリを作成しましょう！今回は「虹の滝」というタイトルのゲームに挑戦してみます。まずはHTMLファイルの準備です。以下のようにHTMLタグを記述しましょう。
ここからJavaScriptコードを記述します。まずは変数の定義から始めましょう。ここまで完成したら、HTMLファイルにもう少し記述を追加しましょう。

Score : 0

Time : 30

これで、「虹の滝」というゲームが完成しました！Rainbowをタップしてスコアを稼いで、タイムオーバー前に高得点を目指しましょう。また、Ballをスワイプして移動させることもできます。スマホ操作にも対応しているので、ぜひお試しください。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

では、スマホ操作前提のゲームアプリを作成しましょう！今回は「虹の滝」というタイトルのゲームに挑戦してみます。

まずはHTMLファイルの準備です。以下のようにHTMLタグを記述しましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>虹の滝</title>
</head>
<body>

ここからJavaScriptコードを記述します。まずは変数の定義から始めましょう。

// Rainbowをタップしたときの処理
  rainbow.addEventListener("click", function(){
    score++;
    document.getElementById("score").innerHTML = "Score : " + score;
  });

// Ballをスワイプしたときの処理
  var swipeX;
  var swipeY;
  ball.addEventListener("touchstart", function(event){
    swipeX = event.touches[0].pageX;
    swipeY = event.touches[0].pageY;
  });
  ball.addEventListener("touchmove", function(event){
    var moveX = event.touches[0].pageX - swipeX;
    var moveY = event.touches[0].pageY - swipeY;
    ball.style.left = ball.offsetLeft + moveX + "px";
    ball.style.top = ball.offsetTop + moveY + "px";
    swipeX = event.touches[0].pageX;
    swipeY = event.touches[0].pageY;
  });

// タイマーの処理
  function countDown(){
    time--;
    document.getElementById("time").innerHTML = "Time : " + time;
    if(time <= 0){
      clearInterval(timer);
      alert("Game Over! Score : " + score);
    }
  }
  timer = setInterval("countDown()", 1000);
</script>

ここまで完成したら、HTMLファイルにもう少し記述を追加しましょう。

<div id="score">Score : 0</div>

<img src="rainbow.png" id="rainbow" width="100" height="100">

<img src="ball.png" id="ball" width="50" height="50" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);" >

<div id="time">Time : 30</div>