AI game creator

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

No:1417

274

←

Prev Next

→

shooting game
Developer User3336｜Date and time 23/6/18 15:10:40
Build time 43.007 sec｜Game capacity 4.191KB｜

Script

以下が、1枚のhtmlファイルに含まれるJavaScriptを用いたシューティングゲームの例です。

このゲームは、自機を操作して、敵を倒しながら生き残るシューティングゲームです。自機は、スマホの操作に合わせて動くようになっています。また、敵は、定期的に出現するように設定されています。操作方法やルールは、簡単に説明されているものとします。

←

Prev　Next

→ 　

Back　

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

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

以下が、1枚のhtmlファイルに含まれるJavaScriptを用いたシューティングゲームの例です。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>シューティングゲーム</title> 
<style> 
canvas { 
  width: 100%; 
  height: 100%; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas"></canvas>

let player = { 
  x: canvas.width/2, 
  y: canvas.width/2, 
  r: 20, 
  dx: 0, 
  dy: 0, 
  speed: 5 
}; 
let bullets = []; 
let enemies = [];

function drawPlayer() { 
  ctx.beginPath(); 
  ctx.arc(player.x, player.y, player.r, 0, 2*Math.PI); 
  ctx.fillStyle = 'yellow'; 
  ctx.fill(); 
}

function drawBullets() { 
  for(let i=0; i<bullets.length; i++) { 
    ctx.beginPath(); 
    ctx.arc(bullets[i].x, bullets[i].y, 5, 0, 2*Math.PI); 
    ctx.fillStyle = 'white'; 
    ctx.fill(); 
  } 
}

function drawEnemies() { 
  for(let i=0; i<enemies.length; i++) { 
    ctx.beginPath(); 
    ctx.arc(enemies[i].x, enemies[i].y, 20, 0, 2*Math.PI); 
    ctx.fillStyle = 'red'; 
    ctx.fill(); 
  } 
}

function movePlayer() { 
  player.x += player.dx*player.speed; 
  player.y += player.dy*player.speed;

if(player.x < player.r) player.x = player.r; 
  if(player.x > canvas.width - player.r) player.x = canvas.width - player.r; 
  if(player.y < player.r) player.y = player.r; 
  if(player.y > canvas.height - player.r) player.y = canvas.height - player.r; 
}

function moveBullets() { 
  for(let i=0; i<bullets.length; i++) { 
    bullets[i].x += bullets[i].dx*10; 
    bullets[i].y += bullets[i].dy*10;

if(bullets[i].x < -5 || bullets[i].x > canvas.width+5 || bullets[i].y < -5 || bullets[i].y > canvas.height+5) { 
      bullets.splice(i, 1); 
      i--; 
    } 
  } 
}

function moveEnemies() { 
  for(let i=0; i<enemies.length; i++) { 
    enemies[i].x += enemies[i].dx*3; 
    enemies[i].y += enemies[i].dy*3;

if(enemies[i].x < -20 || enemies[i].x > canvas.width+20 || enemies[i].y < -20 || enemies[i].y > canvas.height+20) { 
      enemies.splice(i, 1); 
      i--; 
    } 
  } 
}

function collisionDetection(obj1, obj2) { 
  if(Math.sqrt((obj1.x-obj2.x)*(obj1.x-obj2.x) + (obj1.y-obj2.y)*(obj1.y-obj2.y)) < obj1.r+obj2.r) return true; 
  else return false; 
}

function updateGame() { 
  ctx.clearRect(0, 0, canvas.width, canvas.height); 
  drawPlayer(); 
  drawBullets(); 
  drawEnemies(); 
  movePlayer(); 
  moveBullets(); 
  moveEnemies();

for(let i=0; i<enemies.length; i++) { 
    if(collisionDetection(player, enemies[i])) { 
      alert('ゲームオーバー！'); 
      location.reload(); 
    } 
  }

for(let i=0; i<bullets.length; i++) { 
    for(let j=0; j<enemies.length; j++) { 
      if(collisionDetection(bullets[i], enemies[j])) { 
        bullets.splice(i, 1); 
        i--; 
        enemies.splice(j, 1); 
        j--; 
      } 
    } 
  }

requestAnimationFrame(updateGame); 
}

function startGame() { 
  canvas.addEventListener('pointermove', function(e) { 
    let angleRadians = Math.atan2(e.clientY-player.y, e.clientX-player.x); 
    player.dx = Math.cos(angleRadians); 
    player.dy = Math.sin(angleRadians); 
  });

canvas.addEventListener('click', function(e) { 
    let angleRadians = Math.atan2(e.clientY-player.y, e.clientX-player.x); 
    bullets.push({ 
      x: player.x + player.r*Math.cos(angleRadians), 
      y: player.y + player.r*Math.sin(angleRadians), 
      dx: Math.cos(angleRadians), 
      dy: Math.sin(angleRadians) 
    }); 
  });

setInterval(function() { 
    enemies.push({ 
      x: Math.random()*canvas.width, 
      y: Math.random()*canvas.height, 
      dx: Math.random()-0.5, 
      dy: Math.random()-0.5 
    }); 
  }, 1500);

updateGame(); 
}

startGame(); 
</script> 
</body> 
</html>