AI game creator

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

No:1397

202

←

Prev Next

→

shooting game
Developer User3326｜Date and time 23/6/18 13:32:19
Build time 44.977 sec｜Game capacity 4.442KB｜

Script

シューティングゲームは、プレイヤーが上下左右に操作可能な円型のキャラクターを操作して、画面上部に出現する敵を弾で撃ち落とし、スコアを稼いでいくゲームです。敵に当たってしまった場合はゲームオーバーとなります。左右の矢印キーで移動し、スペースキーで弾を発射します。スマホでもプレイできるように画面サイズを調整し、文字には絵文字を多めに使用しました。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>シューティングゲーム</title>
    <style>
      #canvas{
        background-color: black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <p id="score"></p>

//シューティングゲームの実装
      const ctx = canvas.getContext("2d");
      const score = document.getElementById("score");
      let playerScore = 0;
      let playerX = width / 2;
      let playerY = height - 50;
      let bullets = [];
      let enemies = [];

//プレイヤーの描画
      function drawPlayer(){
        ctx.beginPath();
        ctx.fillStyle = "yellow";
        ctx.arc(playerX, playerY, 20, 0, 2*Math.PI);
        ctx.fill();
        ctx.closePath();
      }

//弾の描画
      function drawBullets(){
        for(let i=0; i<bullets.length; i++){
          ctx.beginPath();
          ctx.fillStyle = "white";
          ctx.arc(bullets[i].x, bullets[i].y, 5, 0, 2*Math.PI);
          ctx.fill();
          ctx.closePath();
          bullets[i].y -= 30;
          //弾が画面外に出たら削除
          if(bullets[i].y < 0){
            bullets.splice(i, 1);
          }
        }
      }

//敵の描画
      function drawEnemies(){
        for(let i=0; i<enemies.length; i++){
          ctx.beginPath();
          ctx.fillStyle = "red";
          ctx.arc(enemies[i].x, enemies[i].y, 20, 0, 2*Math.PI);
          ctx.fill();
          ctx.closePath();
          enemies[i].y += 5;
          //敵が画面外に出たら削除
          if(enemies[i].y > height){
            enemies.splice(i, 1);
          }
        }
      }

//プレイヤーが敵にぶつかった時の処理
      function playerHitTest(){
        for(let i=0; i<enemies.length; i++){
          const distance = Math.sqrt((enemies[i].x - playerX)**2 + (enemies[i].y - playerY)**2);
          if(distance < 40){
            alert("ゲームオーバー");
            window.location.reload();
          }
        }
      }

//弾が敵に当たった時の処理
      function bulletHitTest(){
        for(let i=0; i<bullets.length; i++){
          for(let j=0; j<enemies.length; j++){
            const distance = Math.sqrt((bullets[i].x - enemies[j].x)**2 + (bullets[i].y - enemies[j].y)**2);
            if(distance < 25){
              enemies.splice(j, 1);
              bullets.splice(i, 1);
              playerScore++;
            }
          }
        }
      }

//スコアの描画
      function drawScore(){
        score.innerHTML = "Score:" + playerScore;
      }

//ゲームループ
      function loop(){
        ctx.clearRect(0, 0, width, height);
        drawPlayer();
        drawBullets();
        drawEnemies();
        playerHitTest();
        bulletHitTest();
        drawScore();
        requestAnimationFrame(loop);
      }

//キー入力時のプレイヤー移動
      document.addEventListener("keydown", function(e){
        if(e.key === "ArrowLeft" && playerX > 25){
          playerX -= 20;
        }else if(e.key === "ArrowRight" && playerX < width - 25){
          playerX += 20;
        }else if(e.key === " "){
          bullets.push({x: playerX, y: playerY - 20});
        }
      });

//敵の出現
      setInterval(function(){
        const enemyX = Math.floor(Math.random() * (width - 50)) + 25;
        enemies.push({x: enemyX, y: 0});
      }, 1000);

//ゲームスタート
      loop();
    </script>
  </body>
</html>