AI game creator

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

No:39711

←

Prev Next

→

Shooting Game
Developer oljxtd｜Date and time 24/1/29 22:37:49
Build time 22.575 sec｜Game capacity 4.272KB｜

Script

Sure! Here's an example of a simple shooting game implemented as a single HTML file using JavaScript:

In this game, the player controls a blue square at the bottom of the canvas using the left and right arrow keys. The objective is to shoot down the green square enemies that fall from the top by pressing the SPACE bar. Please note that this is a basic implementation, and you can customize and enhance the game as per your requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple shooting game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Shooting Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>

// Player variables
    var playerSize = 40;
    var playerX = canvas.width/2 - playerSize/2;
    var playerY = canvas.height - playerSize;
  
    // Bullet variables
    var bulletSize = 10;
    var bulletX = playerX + playerSize/2 - bulletSize/2;
    var bulletY = playerY - bulletSize;
    var bulletSpeed = 5;
    var bulletIsActive = false;
  
    // Enemy variables
    var enemySize = 30;
    var enemyX = Math.random() * (canvas.width - enemySize);
    var enemyY = 0;
    var enemySpeed = 2;
  
    // Score variable
    var score = 0;

// Event listener for key presses
    document.addEventListener("keydown", keyDownHandler, false);
  
    // Keydown event handler
    function keyDownHandler(event) {
        if(event.keyCode === 32 && !bulletIsActive) { // Space key pressed and bullet is not active
            bulletX = playerX + playerSize/2 - bulletSize/2;
            bulletY = playerY - bulletSize;
            bulletIsActive = true;
        }
    }

// Function to draw the player
    function drawPlayer() {
        context.beginPath();
        context.rect(playerX, playerY, playerSize, playerSize);
        context.fillStyle = "blue";
        context.fill();
        context.closePath();
    }

// Function to draw the bullet
    function drawBullet() {
        context.beginPath();
        context.rect(bulletX, bulletY, bulletSize, bulletSize);
        context.fillStyle = "red";
        context.fill();
        context.closePath();
    }
  
    // Function to draw the enemy
    function drawEnemy() {
        context.beginPath();
        context.rect(enemyX, enemyY, enemySize, enemySize);
        context.fillStyle = "green";
        context.fill();
        context.closePath();
    }
  
    // Function to update the game state
    function updateGame() {
        // Clear the canvas
        context.clearRect(0, 0, canvas.width, canvas.height);
      
        // Update the player position
        if(playerX >= 0 && playerX <= canvas.width - playerSize){
            if(event.keyCode === 37) playerX -= 10; // Left arrow key, move left
            if(event.keyCode === 39) playerX += 10; // Right arrow key, move right
        }
      
        // Update the bullet position if active
        if(bulletIsActive) {
            bulletY -= bulletSpeed;
          
            // Check if bullet hits the enemy
            if(bulletY <= enemyY + enemySize && bulletX >= enemyX && bulletX <= enemyX + enemySize) {
                score++; // Increase score
                bulletIsActive = false; // Reset bullet
                enemyX = Math.random() * (canvas.width - enemySize); // Spawn new enemy
                enemyY = 0;
            }
          
            // Check if bullet is out of canvas bounds
            if(bulletY < 0) {
                bulletIsActive = false; // Reset bullet if missed
            }
        }
      
        // Update the enemy position
        enemyY += enemySpeed;
      
        // Check if enemy reaches the bottom
        if(enemyY > canvas.height) {
            enemyX = Math.random() * (canvas.width - enemySize); // Spawn new enemy
            enemyY = 0;
        }
      
        // Draw everything
        drawPlayer();
        if(bulletIsActive) drawBullet();
        drawEnemy();
      
        // Update the game state
        requestAnimationFrame(updateGame);
    }

// Start the game
    updateGame();
</script>
</body>
</html>
```

Please note that this is a basic implementation, and you can customize and enhance the game as per your requirements.