Meme shooter with shop and coins's game

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

No:21137

←

Prev Next

→

Meme shooter with shop and coins
Developer User9353｜Date and time 23/10/13 19:19:29
Build time 114.477 sec｜Game capacity 4.832KB｜

Script

Score: 0

Shop:

Coins: 0

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Meme Shooter</title>
  <style>
    canvas {
      border: 1px solid black;
      background-color: lightblue;
    }
    #score {
      font-size: 24px;
      font-family: sans-serif;
      margin-top: 10px;
    }
    #shop {
      font-size: 18px;
      font-family: sans-serif;
      margin-top: 10px;
    }
    #coins {
      font-size: 18px;
      font-family: sans-serif;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>
  <div id="score">Score: 0</div>
  <div id="shop">Shop:</div>
  <div id="coins">Coins: 0</div>

// Game variables
    let score = 0;
    let coins = 0;

// Player variables
    let player = {
      x: canvas.width / 2,
      y: canvas.height - 50,
      width: 50,
      height: 50,
      speed: 5
    };

// Projectile variables
    let projectiles = [];
    const projectileSpeed = 5;

// Enemy variables
    let enemies = [];
    const enemySpeed = 2;

// Shop items
    const shopItems = [
      { name: 'Frog', cost: 50, image: '🐸' },
      { name: 'Dog', cost: 100, image: '🐶' },
      { name: 'Cat', cost: 150, image: '🐱' },
      { name: 'Monkey', cost: 200, image: '🐵' }
    ];

// Update score on the page
    function updateScore() {
      document.getElementById('score').innerHTML = `Score: ${score}`;
    }

// Update coins on the page
    function updateCoins() {
      document.getElementById('coins').innerHTML = `Coins: ${coins}`;
    }

// Draw player on the canvas
    function drawPlayer() {
      ctx.fillStyle = 'red';
      ctx.fillRect(player.x, player.y, player.width, player.height);
    }

// Draw projectiles on the canvas
    function drawProjectiles() {
      ctx.fillStyle = 'blue';
      projectiles.forEach((projectile) => {
        ctx.fillRect(projectile.x, projectile.y, 10, 10);
      });
    }

// Draw enemies on the canvas
    function drawEnemies() {
      ctx.fillStyle = 'green';
      enemies.forEach((enemy) => {
        ctx.fillText(enemy.image, enemy.x, enemy.y);
      });
    }

// Shoot projectiles from the player's position
    function shoot() {
      projectiles.push({
        x: player.x + player.width / 2 - 5,
        y: player.y - 10
      });
    }

// Move projectiles upwards
    function moveProjectiles() {
      projectiles.forEach((projectile, index) => {
        projectile.y -= projectileSpeed;

// Remove projectiles that are out of the canvas
        if (projectile.y < 0) {
          projectiles.splice(index, 1);
        }
      });
    }

// Move enemies downwards
    function moveEnemies() {
      enemies.forEach((enemy, index) => {
        enemy.y += enemySpeed;

// Remove enemies that reach the bottom of the canvas
        if (enemy.y > canvas.height) {
          enemies.splice(index, 1);
        }
      });
    }

// Check for collision between projectiles and enemies
    function checkCollision() {
      enemies.forEach((enemy, enemyIndex) => {
        projectiles.forEach((projectile, projectileIndex) => {
          if (
            projectile.x < enemy.x + 20 &&
            projectile.x + 10 > enemy.x &&
            projectile.y < enemy.y + 20 &&
            projectile.y + 10 > enemy.y
          ) {
            // Remove collided projectile and enemy
            projectiles.splice(projectileIndex, 1);
            enemies.splice(enemyIndex, 1);

// Increase score and coins
            score += 10;
            coins += 1;
            
            // Update score and coins on the page
            updateScore();
            updateCoins();
          }
        });
      });
    }

// Main game loop
    function gameLoop() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
      drawPlayer();

// Draw projectiles
      drawProjectiles();

// Draw enemies
      drawEnemies();

// Move projectiles
      moveProjectiles();

// Move enemies
      moveEnemies();

// Check for collision
      checkCollision();

// Request animation frame for the next game loop iteration
      requestAnimationFrame(gameLoop);
    }

// Event listener for player movement
    document.addEventListener('keydown', (event) => {
      if (event.key === 'ArrowLeft' && player.x > 0) {
        player.x -= player.speed;
      } else if (event.key === 'ArrowRight' && player.x + player.width < canvas.width) {
        player.x += player.speed;
      } else if (event.key === ' ') {
        shoot();
      }
    });

// Initialize game loop
    gameLoop();
  </script>
</body>
</html>