EffectHub.com: your best source for gaming

Recommendation

More Effects...

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Game variables
const snake = {
  x: canvas.width / 2,
  y: canvas.height / 2,
  size: 20,
  dx: 0,
  dy: 0,
  body: [],
  growAmount: 3,
  bullets: [],
};

const enemies = [];
let score = 0;

// Create enemy snakes
function spawnEnemy() {
  const enemy = {
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    size: 20,
    color: 'red',
  };
  enemies.push(enemy);
}

// Move snake
function moveSnake() {
  snake.x += snake.dx;
  snake.y += snake.dy;

// Add the current position to the body
  snake.body.unshift({ x: snake.x, y: snake.y });

// Remove extra segments
  if (snake.body.length > snake.size) {
    snake.body.pop();
  }
}

// Draw snake
function drawSnake() {
  snake.body.forEach((segment, index) => {
    ctx.fillStyle = index === 0 ? 'lime' : 'green';
    ctx.fillRect(segment.x, segment.y, snake.size, snake.size);
  });
}

// Handle shooting
function shootBullet() {
  snake.bullets.push({
    x: snake.x + snake.size / 2,
    y: snake.y + snake.size / 2,
    dx: snake.dx * 5,
    dy: snake.dy * 5,
  });
}

// Draw bullets
function drawBullets() {
  snake.bullets.forEach((bullet, index) => {
    bullet.x += bullet.dx;
    bullet.y += bullet.dy;

// Remove bullets off-screen
    if (
      bullet.x < 0 ||
      bullet.x > canvas.width ||
      bullet.y < 0 ||
      bullet.y > canvas.height
    ) {
      snake.bullets.splice(index, 1);
    } else {
      ctx.fillStyle = 'yellow';
      ctx.fillRect(bullet.x, bullet.y, 5, 5);
    }
  });
}

// Draw enemies
function drawEnemies() {
  enemies.forEach((enemy, index) => {
    ctx.fillStyle = enemy.color;
    ctx.fillRect(enemy.x, enemy.y, enemy.size, enemy.size);

// Check collision with bullets
    snake.bullets.forEach((bullet, bulletIndex) => {
      if (
        bullet.x < enemy.x + enemy.size &&
        bullet.x + 5 > enemy.x &&
        bullet.y < enemy.y + enemy.size &&
        bullet.y + 5 > enemy.y
      ) {
        // Remove enemy and bullet
        enemies.splice(index, 1);
        snake.bullets.splice(bulletIndex, 1);

// Grow snake
        snake.size += snake.growAmount;
        score++;
        spawnEnemy(); // Spawn a new enemy
      }
    });
  });
}

// Check for collisions
function checkCollisions() {
  if (
    snake.x < 0 ||
    snake.x > canvas.width ||
    snake.y <

CSS

HTML

Recommendation

Join Effecthub.com