3d zombie shooter game's game

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

No:16565

←

Prev Next

→

3d zombie shooter game
Developer User7380｜Date and time 23/9/19 14:30:19
Build time 49.855 sec｜Game capacity 6.142KB｜

Script

Sure, here's an example of a simple 3D zombie shooter game implemented as a single HTML file using JavaScript. Please note that this is a basic implementation and may require additional improvements and game mechanics to make it more enjoyable. Copy the code below and save it in a .html file to play the game:

To play the game, open the saved HTML file in a web browser on your smartphone. Use the arrow keys or the A, W, S, D keys to move the player. Click anywhere on the canvas to shoot bullets at the zombies. Your score is displayed at the top left corner of the screen. The game ends if a zombie collides with the player.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
   <title>3D Zombie Shooter</title>
   <style>
      #game {
         width: 100%;
         height: 80vh;
      }
   </style>
</head>
<body>
   <canvas id="game"></canvas>

// Initialize the game
      function init() {
         canvas = document.getElementById("game");
         ctx = canvas.getContext("2d");
         canvasWidth = canvas.width = window.innerWidth;
         canvasHeight = canvas.height = window.innerHeight * 0.8;

player = {
            x: canvasWidth / 2,
            y: canvasHeight / 2,
            radius: 10,
            speed: 5,
            color: "green"
         };

zombies = [];
         bullets = [];
         score = 0;
         isGameOver = false;

// Spawn initial zombies
         spawnZombies(5);

// Register event listeners
         document.addEventListener("keydown", handleKeyDown);
         document.addEventListener("click", handleMouseClick);

// Start game loop
         update();
      }

// Game update loop
      function update() {
         if (isGameOver) {
            return;
         }

// Clear the canvas
         ctx.clearRect(0, 0, canvasWidth, canvasHeight);

// Draw player
         drawCircle(player.x, player.y, player.radius, player.color);

// Draw bullets
         bullets.forEach(function (bullet) {
            bullet.x += bullet.dx;
            bullet.y += bullet.dy;
            
            drawCircle(bullet.x, bullet.y, bullet.radius, bullet.color);

// Check bullet collision with zombies
            zombies.forEach(function (zombie, zombieIndex) {
               var distance = Math.sqrt(
                  Math.pow(bullet.x - zombie.x, 2) +
                  Math.pow(bullet.y - zombie.y, 2)
               );

if (distance < bullet.radius + zombie.radius) {
                  // Remove bullet and zombie on collision
                  bullets.splice(bullets.indexOf(bullet), 1);
                  zombies.splice(zombieIndex, 1);

score += 10;
               }
            });

// Remove bullet if it goes out of bounds
            if (
               bullet.x < 0 ||
               bullet.y < 0 ||
               bullet.x > canvasWidth ||
               bullet.y > canvasHeight
            ) {
               bullets.splice(bullets.indexOf(bullet), 1);
            }
         });

// Draw zombies
         zombies.forEach(function (zombie) {
            var angle = Math.atan2(player.y - zombie.y, player.x - zombie.x);
            var dx = Math.cos(angle) * zombie.speed;
            var dy = Math.sin(angle) * zombie.speed;

zombie.x += dx;
            zombie.y += dy;

drawCircle(zombie.x, zombie.y, zombie.radius, zombie.color);

// Check player collision with zombies
            var distance = Math.sqrt(
               Math.pow(player.x - zombie.x, 2) +
               Math.pow(player.y - zombie.y, 2)
            );

if (distance < player.radius + zombie.radius) {
               gameOver();
            }
         });

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

// Call update again
         requestAnimationFrame(update);
      }

// Spawns a specified number of zombies randomly
      function spawnZombies(numZombies) {
         for (var i = 0; i < numZombies; i++) {
            var zombie = {
               x: Math.random() * canvasWidth,
               y: Math.random() * canvasHeight,
               radius: 8,
               speed: 1 + Math.random() * 2,
               color: "red"
            };

zombies.push(zombie);
         }
      }

// Handles keydown events
      function handleKeyDown(event) {
         var keyCode = event.keyCode;

// Move player based on arrow keys or WASD
         if (keyCode === 37 || keyCode === 65) {
            player.x -= player.speed;
         } else if (keyCode === 38 || keyCode === 87) {
            player.y -= player.speed;
         } else if (keyCode === 39 || keyCode === 68) {
            player.x += player.speed;
         } else if (keyCode === 40 || keyCode === 83) {
            player.y += player.speed;
         }
      }

// Handles mouse click events
      function handleMouseClick(event) {
         var angle = Math.atan2(event.clientY - player.y, event.clientX - player.x);
         var dx = Math.cos(angle) * 5;
         var dy = Math.sin(angle) * 5;

var bullet = {
            x: player.x,
            y: player.y,
            dx: dx,
            dy: dy,
            radius: 3,
            color: "blue"
         };

bullets.push(bullet);
      }

// Draw a circle on the canvas
      function drawCircle(x, y, radius, color) {
         ctx.beginPath();
         ctx.arc(x, y, radius, 0, Math.PI * 2, false);
         ctx.fillStyle = color;
         ctx.fill();
         ctx.closePath();
      }

// Game over logic
      function gameOver() {
         isGameOver = true;
         alert("Game Over! Your Score: " + score);
         document.removeEventListener("keydown", handleKeyDown);
         document.removeEventListener("click", handleMouseClick);
      }

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