The game that will revive SQUEEZE's game

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

No:1688

1242

←

Prev Next

→

The game that will revive SQUEEZE
Developer User3494｜Date and time 23/6/18 21:52:31
Build time 40.449 sec｜Game capacity 3.809KB｜

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>
    <canvas id="gameCanvas" width="300" height="500"></canvas>
    <script type="text/javascript">
      
      // ゲーム用の変数
      var gameCanvas = document.getElementById("gameCanvas");
      var ctx = gameCanvas.getContext("2d");
      var playerX = 150;
      var playerY = 450;
      var playerSize = 30;
      var score = 0;
      
      // キーの状態を管理する変数
      var leftPressed = false;
      var rightPressed = false;
      
      // スマホでのタッチ開始・終了の座標
      var touchStartX, touchStartY, touchEndX, touchEndY;
      
      // キーボード入力の監視
      document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);
      
      // タッチ入力の監視
      gameCanvas.addEventListener("touchstart", touchStartHandler, false);
      gameCanvas.addEventListener("touchend", touchEndHandler, false);
      
      // キーボードの左右キーが押された時の処理
      function keyDownHandler(event) {
        if(event.keyCode == 37) { // left arrow
          leftPressed = true;
        }
        if(event.keyCode == 39) { // right arrow
          rightPressed = true;
        }
      }
      function keyUpHandler(event) {
        if(event.keyCode == 37) { // left arrow
          leftPressed = false;
        }
        if(event.keyCode == 39) { // right arrow
          rightPressed = false;
        }
      }
      
      // スマホのタッチ開始・終了の座標を取得
      function touchStartHandler(event) {
        touchStartX = event.touches[0].clientX;
        touchStartY = event.touches[0].clientY;
      }
      function touchEndHandler(event) {
        touchEndX = event.changedTouches[0].clientX;
        touchEndY = event.changedTouches[0].clientY;
        
        // x方向の移動量が大きい時だけ左右移動
        if(touchEndX - touchStartX > 50) {
          rightPressed = true;
        }
        else if(touchEndX - touchStartX < -50) {
          leftPressed = true;
        }
      }
      
      // プレイヤーの移動
      function movePlayer() {
        if(leftPressed && playerX > 0) {
          playerX -= 5;
        }
        if(rightPressed && playerX + playerSize < gameCanvas.width) {
          playerX += 5;
        }
      }
      
      // ゲーム画面の描画
      function draw() {
        ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
        
        ctx.fillStyle = "#0000ff";
        ctx.fillRect(playerX, playerY, playerSize, playerSize);
        
        // ゲームオーバーの判定
        if(playerY < 0) {
          alert("スクエニが復活しました！");
          document.location.reload();
        }
        
        // スコアの表示
        ctx.fillStyle = "#000000";
        ctx.fillText("スコア：" + score, 10, 20);
        
        // スコアの加算
        score++;
        
        // プレイヤーの移動
        movePlayer();
        
        // 20ミリ秒ごとに再描画
        setTimeout(draw, 20);
      }
      
      // ゲームスタート
      draw();
      
    </script>
  </body>
</html>