Tuval oyunu

Question

siz atlatmak mermilere zorunda nerede kaçırmak her merminin için, bir oyun oluşturma

Sorun 1 puan kazanırlar. Şu anda elime geçen her mermi var, skor yükseliyor.

skor sizi özlüyor her merminin için artar, böylece

Bunu nasıl değiştirebilirim Soru?

Böyle "yakın özlüyor" test edebilirsiniz

 function init() { 

      level = 1; 
      total_projectiles = 0; 
      projectiles = []; 

      c = document.getElementById("c"); 
      ctx = c.getContext("2d"); 
      ctx.fillStyle = "#ff6600"; 
      ctx.fillRect(0, 0, 500, 600); 

      c.addEventListener("mousemove", function (e) { 
       //moving over the canvas. 
       var bounding_box = c.getBoundingClientRect(); 
       player.x = (e.clientX - bounding_box.left) * (c.width/bounding_box.width) - player_img.width/2; 
      }, false); 

      setupProjectiles(); 
      requestAnimationFrame(tick); 
     } 

     function setupProjectiles() { 
      var max_projectiles = level * projectiles_per_level; 
      while (projectiles.length < max_projectiles) { 
       initProjectile(projectiles.length); 
      } 
     } 

     function initProjectile(index) { 
      var max_speed = max_speed_per_level * level; 
      var min_speed = min_speed_per_level * level; 
      projectiles[index] = { 
       x: Math.round(Math.random() * (width - 2 * projectile_w)) + projectile_w, 
       y: -projectile_h, 
       v: Math.round(Math.random() * (max_speed - min_speed)) + min_speed, 
       delay: Date.now() + Math.random() * delay 
      } 
      total_projectiles++; 
     } 

     function collision(projectile) { 
      if (projectile.y + projectile_img.height < player.y + 74) { 
       return false; 
      } 
      if (projectile.y > player.y + 74) { 
       return false; 
      } 
      if (projectile.x + projectile_img.width < player.x + 177) { 
       return false; 
      } 
      if (projectile.x > player.x + 177) { 
       return false; 
      } 

      return true; 
     } 

     function maybeIncreaseDifficulty() { 
      level = Math.max(1, Math.ceil(player.score/10)); 
      setupProjectiles(); 
     } 

     function tick() { 
      var i; 
      var projectile; 
      var dateNow = Date.now(); 
      c.width = c.width; 
      for (i = 0; i < projectiles.length; i++) { 
       projectile = projectiles[i]; 
       if (dateNow > projectile.delay) { 
        projectile.y += projectile.v; 
        if (collision(projectile)) { 
         initProjectile(i); 
         player.score++; 
        } else if (projectile.y > height) { 
         initProjectile(i); 
        } else { 
         ctx.drawImage(projectile_img, projectile.x, projectile.y); 
        } 
       } 
      } 

Answer 1

Kodu:

• mermi nesneye bir nearRadius özellik ekleyin. nearRadius, merminin gerçek yarıçapından daha büyüktür ve mermi oyuncuya yaklaştığında vurmak için kullanılır. Mermi nesnesine isNear özelliği ekleyin. isNear, nearRadius'un oynatıcıyla çarpıştığını gösteren gerçek/yanlış bir özelliktir.

• Merminin isNear özelliği true değerinden false değerine değiştiğinde, mermi oyuncuyu bir yakın hanede geçirmiştir. Bu olduğunda oyuncunun skorunu artırabilirsiniz.

Örnek kod ve Demo:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
function reOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top;   
 
} 
 
var offsetX,offsetY; 
 
reOffset(); 
 
window.onscroll=function(e){ reOffset(); } 
 
window.onresize=function(e){ reOffset(); } 
 

 
var player={x:cw/2,y:50,radius:15,score:0}; 
 
var projectile={x:-30,y:30,radius:5,nearRadius:35,isNear:false} 
 
var gameOver=false; 
 

 
ctx.textAlign='center'; 
 
ctx.textBaseline='middle'; 
 
ctx.font='14px verdana'; 
 

 
draw(); 
 

 
$("#canvas").mousemove(function(e){handleMouseMove(e);}); 
 

 
function draw(){ 
 
    ctx.clearRect(0,0,cw,ch); 
 
    // player 
 
    ctx.beginPath(); 
 
    ctx.arc(player.x,player.y,player.radius,0,Math.PI*2); 
 
    ctx.fillStyle='green'; 
 
    ctx.fill(); 
 
    // players score 
 
    ctx.fillStyle='white'; 
 
    ctx.fillText(player.score,player.x,player.y); 
 
    // projectile 
 
    ctx.beginPath(); 
 
    ctx.arc(projectile.x,projectile.y,projectile.radius,0,Math.PI*2); 
 
    ctx.fillStyle='red'; 
 
    ctx.fill(); 
 
    // projectile near 
 
    ctx.beginPath(); 
 
    ctx.arc(projectile.x,projectile.y,projectile.nearRadius,0,Math.PI*2); 
 
    ctx.strokeStyle=projectile.isNear?'green':'red'; 
 
    ctx.stroke(); 
 
    // if game over 
 
    if(gameOver){ 
 
     ctx.font='30px verdana'; 
 
     ctx.fillStyle='blue'; 
 
     ctx.fillText('Game Over',cw/2,35); 
 
    } 
 
} 
 

 
function handleMouseMove(e){ 
 
    if(gameOver){return;} 
 
    
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    projectile.x=parseInt(e.clientX-offsetX); 
 
    projectile.y=parseInt(e.clientY-offsetY); 
 

 
    var dx=projectile.x-player.x; 
 
    var dy=projectile.y-player.y; 
 

 
    // test projectile hits player 
 
    var rr=projectile.radius+player.radius; 
 
    gameOver=(dx*dx+dy*dy)<(rr*rr); 
 
    
 
    // test projectile nearly misses player 
 
    var rr=projectile.nearRadius+player.radius; 
 
    var isNearNow=(dx*dx+dy*dy)<(rr*rr); 
 
    if(projectile.isNear && !isNearNow){ 
 
     player.score++; 
 
    } 
 
    projectile.isNear=isNearNow; 
 
    draw(); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Move red projectile with mouse<br>Score when outer ring passes by player.</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>