You are a blue circle with red eyes sprite. You can shoot blue triangles in any direction by pressing shoot button. Your goal is to eat all 100 moving black circles. The more you devour the black circle the bigger you get . Your max size is 100. When you get bigger the triangles you shoot will also get bigger.up down left right controls. The triangles can damage the black circles.'s game

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

No:11371

←

Prev Next

→

You are a blue circle with red eyes sprite. You ca..ALL
Developer No｜Date and time 23/8/9 12:13:36
Build time 42.254 sec｜Game capacity 4.904KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<style>
canvas {
  border:1px solid #000000;
}
</style>
</head>
<body>
<script>
// Game variables
var canvas;
var ctx;
var screenWidth;
var screenHeight;

var player;
var bullets;
var enemies;
var score;

var gameLoop;

// Constants
var PLAYER_SIZE = 20;
var TRIANGLE_SIZE = 10;
var ENEMY_SIZE = 10;
var MAX_SIZE = 100;

// Player object
function Player(x, y) {
  this.x = x;
  this.y = y;
  this.size = PLAYER_SIZE;
  this.bulletSize = TRIANGLE_SIZE;
}

// Bullet object
function Bullet(x, y) {
  this.x = x;
  this.y = y;
  this.size = TRIANGLE_SIZE;
  this.speed = 5;
}

// Enemy object
function Enemy(x, y) {
  this.x = x;
  this.y = y;
  this.size = ENEMY_SIZE;
  this.speed = Math.random() + 1;
}

// Initialize game
function init() {
  canvas = document.createElement("canvas");
  ctx = canvas.getContext("2d");
  screenWidth = window.innerWidth;
  screenHeight = window.innerHeight;
  canvas.width = screenWidth;
  canvas.height = screenHeight;
  document.body.appendChild(canvas);

player = new Player(screenWidth / 2, screenHeight / 2);
  bullets = [];
  enemies = [];
  score = 0;

// Create enemies
  for (var i = 0; i < 100; i++) {
    var x = Math.random() * screenWidth;
    var y = Math.random() * screenHeight;
    var enemy = new Enemy(x, y);
    enemies.push(enemy);
  }

// Start game loop
  gameLoop = setInterval(update, 20);

// Keyboard controls
  document.addEventListener("keydown", handleKeyDown);
}

// Update game state
function update() {
  movePlayer();
  moveBullets();
  moveEnemies();
  checkCollisions();
  draw();
}

// Move the player
function movePlayer() {
  if (keys["ArrowUp"] && player.y > 0) {
    player.y -= 5;
  }
  if (keys["ArrowDown"] && player.y < screenHeight - player.size) {
    player.y += 5;
  }
  if (keys["ArrowLeft"] && player.x > 0) {
    player.x -= 5;
  }
  if (keys["ArrowRight"] && player.x < screenWidth - player.size) {
    player.x += 5;
  }
}

// Move the bullets
function moveBullets() {
  for (var i = 0; i < bullets.length; i++) {
    var bullet = bullets[i];
    bullet.y -= bullet.speed;
    if (bullet.y < 0) {
      bullets.splice(i, 1);
      i--;
    }
  }
}

// Move the enemies
function moveEnemies() {
  for (var i = 0; i < enemies.length; i++) {
    var enemy = enemies[i];
    enemy.x += Math.random() * 2 * enemy.speed - enemy.speed;
    enemy.y += Math.random() * 2 * enemy.speed - enemy.speed;

if (enemy.x < 0) {
      enemy.x = 0;
    }
    if (enemy.x > screenWidth - enemy.size) {
      enemy.x = screenWidth - enemy.size;
    }
    if (enemy.y < 0) {
      enemy.y = 0;
    }
    if (enemy.y > screenHeight - enemy.size) {
      enemy.y = screenHeight - enemy.size;
    }
  }
}

// Check for collisions
function checkCollisions() {
  for (var i = 0; i < bullets.length; i++) {
    var bullet = bullets[i];
    for (var j = 0; j < enemies.length; j++) {
      var enemy = enemies[j];
      if (
        bullet.x < enemy.x + enemy.size &&
        bullet.x + bullet.size > enemy.x &&
        bullet.y < enemy.y + enemy.size &&
        bullet.y + bullet.size > enemy.y
      ) {
        bullets.splice(i, 1);
        i--;
        enemies.splice(j, 1);
        j--;
        player.size += 1;
        score += 1;
        if (player.size > MAX_SIZE) {
          player.size = MAX_SIZE;
        }
        if (bullet.size < player.size) {
          bullet.size = Math.min(player.size, TRIANGLE_SIZE + 3);
        }
      }
    }
  }
}

// Draw game objects on canvas
function draw() {
  ctx.clearRect(0, 0, screenWidth, screenHeight);

// Draw player
  ctx.fillStyle = "blue";
  ctx.beginPath();
  ctx.arc(player.x + player.size / 2, player.y + player.size / 2, player.size / 2, 0, 2 * Math.PI);
  ctx.fill();
  ctx.closePath();
  
  // Draw bullets
  ctx.fillStyle = "blue";
  for (var i = 0; i < bullets.length; i++) {
    var bullet = bullets[i];
    ctx.beginPath();
    ctx.moveTo(bullet.x, bullet.y);
    ctx.lineTo(bullet.x + bullet.size, bullet.y);
    ctx.lineTo(bullet.x + bullet.size / 2, bullet.y - bullet.size);
    ctx.fill();
    ctx.closePath();
  }
  
  // Draw enemies
  ctx.fillStyle = "black";
  for (var i = 0; i < enemies.length; i++) {
    var enemy = enemies[i];
    ctx.beginPath();
    ctx.arc(enemy.x + enemy.size / 2, enemy.y + enemy.size / 2, enemy.size / 2, 0, 2 * Math.PI);
    ctx.fill();
    ctx.closePath();
  }

// Draw score
  ctx.fillStyle = "red";
  ctx.font = "24px Arial";
  ctx.fillText("Score: " + score, 10, 30);
}

// Keyboard event handlers
var keys = {};
function handleKeyDown(event) {
  keys[event.key] = true;

if (event.key === " ") {
    shoot();
  }
}

function handleKeyUp(event) {
  keys[event.key] = false;
}

// Shoot a bullet
function shoot() {
  var x = player.x + player.size / 2;
  var y = player.y;
  var bullet = new Bullet(x, y);
  bullets.push(bullet);
}

// Initialize the game
init();
</script>
</body>
</html>