AI game creator

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

No:45338

←

Prev Next

→

0>Shooting Game
Developer WinnerWiener1332｜Date and time 24/2/20 12:12:44
Build time 14.955 sec｜Game capacity 2.955KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Shooting Game</title>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Player variables
let playerX = canvas.width / 2;
let playerY = canvas.height - 50;
let playerWidth = 50;
let playerHeight = 50;

// Bullet variables
let bulletRadius = 5;
let bullets = [];
let bulletSpeed = 5;

// Enemy variables
let enemies = [];
let enemyWidth = 50;
let enemyHeight = 50;
let enemySpeed = 2;

// Controls variables
let rightPressed = false;
let leftPressed = false;

document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);

function keyDownHandler(event) {
  if(event.key === 'Right' || event.key === 'ArrowRight') {
    rightPressed = true;
  } else if(event.key === 'Left' || event.key === 'ArrowLeft') {
    leftPressed = true;
  }
}

function keyUpHandler(event) {
  if(event.key === 'Right' || event.key === 'ArrowRight') {
    rightPressed = false;
  } else if(event.key === 'Left' || event.key === 'ArrowLeft') {
    leftPressed = false;
  }
}

function drawPlayer() {
  ctx.beginPath();
  ctx.rect(playerX, playerY, playerWidth, playerHeight);
  ctx.fillStyle = 'blue';
  ctx.fill();
  ctx.closePath();
}

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

function drawEnemy() {
  for(let i = 0; i < enemies.length; i++) {
    ctx.beginPath();
    ctx.rect(enemies[i].x, enemies[i].y, enemyWidth, enemyHeight);
    ctx.fillStyle = 'green';
    ctx.fill();
    ctx.closePath();
  }
}

function updatePlayer() {
  if(rightPressed && playerX < canvas.width - playerWidth) {
    playerX += 7;
  } else if(leftPressed && playerX > 0) {
    playerX -= 7;
  }
}

function updateBullet() {
  for(let i = 0; i < bullets.length; i++) {
    bullets[i].y -= bulletSpeed;
    if(bullets[i].y < 0) {
      bullets.splice(i, 1);
    }
  }
}

function updateEnemy() {
  for(let i = 0; i < enemies.length; i++) {
    enemies[i].y += enemySpeed;
    if(enemies[i].y > canvas.height) {
      enemies.splice(i, 1);
    }
  }
}

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
  drawBullet();
  drawEnemy();

collisionDetection();
  updatePlayer();
  updateBullet();
  updateEnemy();

requestAnimationFrame(gameLoop);
}

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