shooter mobile. game's game

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

No:2385

6877

←

Prev Next

→

shooter mobile. game
Developer User3554｜Date and time 23/6/21 7:01:58
Build time 49.411 sec｜Game capacity 5.695KB｜

Script

اللعبة سوف تكون لعبة shooter إلى الهواتف المحمولة. يمكن للمستخدم التحكم بالشخصية باستخدام الأسهم في لوحة المفاتيح للتحرك وزر المسافة لاطلاق النار. يجب على اللاعب الحذر من الأعداء التي تظهر في الجزء العلوي من الشاشة والتي يجب عليهم اطلاق النار عليها. إذا اصطدم مطلق النار بأي من الأعداء أو لم يكن لديه أخرى من الأرواح ، سوف يفقد اللعبة. يمكن للمستخدم جمع النقاط عندما يتم تدمير الأعداء.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Shooter Mobile</title>
   <style>
       canvas {
           border: 1px solid black; 
       }
       .game-over {
           font-size: 20px;
           text-align: center;
           padding-top: 50px;
       }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="500"></canvas>
   <div id="score"></div>
   <script>
       //set up canvas
       const canvas = document.getElementById("canvas");
       const ctx = canvas.getContext("2d");

//set up player
       let player = {
           x: canvas.width/2,
           y: canvas.height-60,
           speed: 5,
           lives: 3,
           score: 0
       };

//set up bullets
       let bullets = [];

//set up enemies
       let enemies = [];
       let enemySpeed = 1;

//update player position based on arrow keys
       document.addEventListener("keydown", event => {
           if (event.key === "ArrowLeft" && player.x >= 30) {
               player.x -= player.speed;
           } else if (event.key === "ArrowRight" && player.x <= canvas.width-50) {
               player.x += player.speed;
           } else if (event.key === "ArrowUp" && player.y >= 30) {
               player.y -= player.speed;
           } else if (event.key === "ArrowDown" && player.y <= canvas.height-80) {
               player.y += player.speed;
           } else if (event.key === " ") {
               bullets.push({x: player.x+17, y: player.y-10});
           }
       });

//set up score display
       const scoreDisplay = document.getElementById("score");
       scoreDisplay.textContent = `Score: ${player.score}`;

//create random enemy positions and speeds
       function createEnemies() {
           setInterval(() => {
               let randX = Math.floor(Math.random() * canvas.width-30) + 30;
               enemies.push({x: randX, y: 0, speed: Math.floor(Math.random() * 3) + enemySpeed});
           }, 500);
       }

//update positions of objects and check for collisions
       function update() {
           ctx.clearRect(0, 0, canvas.width, canvas.height);
           //draw player
           ctx.beginPath();
           ctx.arc(player.x+15, player.y+15, 15, 0, Math.PI*2);
           ctx.fillStyle = "red";
           ctx.fill();
           ctx.closePath();

//draw bullets and check for collision with enemies
           bullets.forEach((bullet, index) => {
               ctx.beginPath();
               ctx.rect(bullet.x, bullet.y, 3, 10);
               ctx.fillStyle = "black";
               ctx.fill();
               ctx.closePath();
               bullet.y -= 5;
               enemies.forEach((enemy, eIndex) => {
                   if (bullet.x >= enemy.x-17 && bullet.x <= enemy.x+17 && bullet.y <= enemy.y+17) {
                       player.score += 10;
                       scoreDisplay.textContent = `Score: ${player.score}`;
                       bullets.splice(index, 1);
                       enemies.splice(eIndex, 1);
                   }
               });
               if (bullet.y <= 0) {
                   bullets.splice(index, 1);
               }
           });

//draw enemies and check for collision with player
           enemies.forEach((enemy, index) => {
               ctx.beginPath();
               ctx.arc(enemy.x+15, enemy.y+15, 15, 0, Math.PI*2);
               ctx.fillStyle = "blue";
               ctx.fill();
               ctx.closePath();
               enemy.y += enemy.speed;
               if (enemy.y >= canvas.height-50 && enemy.x >= player.x-30 && enemy.x <= player.x+30) {
                   player.lives--;
                   if (player.lives === 0) {
                       clearInterval(gameInterval);
                       ctx.fillStyle = "white";
                       ctx.font = "30px Arial";
                       ctx.fillText("Game Over!", canvas.width/2-70, canvas.height/2);
                   } else {
                       player.x = canvas.width/2;
                       player.y = canvas.height-60;
                       enemies = [];
                       bullets = [];
                   }
               } else if (enemy.y >= canvas.height-20) {
                   enemies.splice(index, 1);
               }
           });

//display remaining lives
           for (let i=0; i<player.lives; i++) {
               ctx.beginPath();
               ctx.arc(canvas.width-25-i*20, 25, 7, 0, Math.PI*2);
               ctx.fillStyle = "red";
               ctx.fill();
               ctx.closePath();
           }

//increase enemy speed every 10 seconds
           if (player.score % 100 === 0 && player.score > 0) {
               enemySpeed += 0.2;
           }
       }

//start game
       createEnemies();
       let gameInterval = setInterval(update, 30);
   </script>
</body>
</html>