は、ゲームではJavaScript

Question

にCodePenの私のコードへのリンクは終わらない - Javascriptが以下であるhttp://codepen.io/PartTimeCoder/pen/RaMZop?editors=0010

、増加関数で、ユーザのを防ぐ必要がある場合はコマンドがありますマウスが画面から離れることはありませんが、動作しません。また、ページが読み込まれると、スコアの追加が開始されますが、クリック後にのみ開始されます。これが発生する理由はありません。

$(document).ready(function() { 
    var canvas = document.getElementById("canvas") 
    var ctx = canvas.getContext("2d") 

    var height = window.innerHeight 
    var width = window.innerWidth 

    var mouse = {}; 
    var hover; 

    var redDots = 2; 
    var score = 0; 

    canvas.width = width 
    canvas.height = height 

    var circle_count = 10; 
    var circles = []; 

    var generate = function() { 
     for (var i = 0; i < circle_count; i++) { 
      circles.push(new circle()); 
     } 
    } 

    setInterval(generate, 100); 

    canvas.addEventListener('mousedown', mousePos, false); 
    canvas.addEventListener('touch', mousePos, false); 

    function mousePos(e) { 
     mouse.x = e.pageX; 
     mouse.y = e.pageY; 
    } 

    function circle() { 
     this.speed = { 
      x: 2.5 + Math.random() * 5, 
      y: 2.5 + Math.random() * 5 
     } 

     this.location = { 
      x: 0 - Math.random() * width, 
      y: 0 - Math.random() * height 
     } 

     this.accel = { 
      x: -1.5 + Math.random() * 3, 
      y: -1.5 + Math.random() * 3 
     } 
     this.radius = 5 + Math.random() * 10 
    } 

    var draw = function() { 
     ctx.globalCompositeOperation = "source-over"; 
     ctx.fillStyle = "black"; 
     ctx.fillRect(0, 0, width, height); 
     ctx.globalCompositeOperation = "lighter"; 

     for (var i = 0; i < circles.length; i++) { 
      var c = circles[i]; 

      ctx.beginPath(); 
      ctx.fillStyle = "red"; 
      ctx.arc(c.location.x, c.location.y, c.radius, Math.PI * 2, false); 
      ctx.fill(); 

      c.speed.x += c.accel.x; 
      c.speed.y += c.accel.y; 

      c.location.x += c.speed.x; 
      c.location.y += c.speed.y; 

      if (mouse.x > c.location.x - c.radius && mouse.x < c.location.x + c.radius && mouse.y > c.location.y - c.radius && mouse.y < c.location.y + c.radius) { 
       hover = true; 
      } 

      if (hover) { 
       $("canvas").hide(); 
       $("#message").html("Sorry you lost. You finished with a score of " + score + "!"); 
      } 
     } 
    } 

    setInterval(draw, 33); 

    var increase = function() { 
     if (mouse.x > 1 && mouse.y > 1 && !hover) { 
      score++; 
      redDots += 25; 
      $("#score").html("Score - " + score); 
      console.log(redDots); 
     } 

     if (mouse.x > canvas.width || mouse.y > canvas.height || mouse.x < 0 || mouse.y < 0) { 
      hover = true; 
     } 
    } 

    setInterval(increase, 1000); 
}); 

すべてのご協力をお願いいたします。前もって感謝します！

Answer 1

をロードし終わっているときに、関数pageLoadFunctionを実行しますキャンバス上

canvas.ready(pageLoadFunction); 

を準備（）関数を使用しますa mouseoutイベントリスナー、シンプル！

まず、マウスをクリックして、最初にクリックしてゲームを開始しないようにする必要があります。私は以下の例を持っています。代わりにmousedownイベントリスナーの

canvas.addEventListener('mousemove', mousePos, false);

使用。

第2に、ゲームを中止する問題をmouseoutに解決する。ここ が、これは何例

canvas.addEventListener('mouseout', function() { 
     $("canvas").hide(); 
     $("#message").html("Sorry you lost. You finished with a score of " + score + "!"); 
    }, false); 

であるあなたのマウスは赤い点に触れたときと同じものですが、それはキャンバスを残して、あなたのマウス時にメッセージが表示されます。そこに行く！ここで

が作業バージョンのcodepen例です。Avoid The Red Dots

Answer 2

私の提案は、マウスがドキュメント内にあるかどうかを追跡し、それをif文でも使用することです。このコードは、マウスが文書であるかどうかを追跡（またはそれは、文書の完全な高さと幅ではない場合、あなたのゲーム画面要素のセレクターを使用）します：mouseInはtrueに評価された場合

var mouseIn = false; 
$(document).on('mouseenter mouseover', function(){ 
    if(!mouseIn)mouseIn = true; 
}); 
$(document).on('mouseleave', function(){ 
    if(mouseIn)mouseIn = false; 
}); 

は、それからちょうどチェックユーザーのカーソルがゲーム画面上にあるかどうかを確認します。 mouseInの変更を示すフィードールは次のとおりです。https://jsfiddle.net/sk23cssc/

Answer 3

マウスの動きを追跡するのではなく、イベントリスナーを追加します。

canvas.addEventListener('mouseout', mouseOutFunction, false); 

これは、マウスが画面を離れるときに2番目の引数として指定した機能を実行します。

あなたは、ページのロード時のスコアの追跡を開始したい場合は、キャンバスはあなただけの必要