JavaScriptを使ってキャンバスで爆発するのに問題がある

私はここで新しく情報学科の学生です。来週予定しているプロジェクトの一部で問題が発生しています。私たちは、これらのすべての要件を含むプロジェクトを行うように求められました。JavaScriptを使ってキャンバスで爆発するのに問題がある

フルスクリーンとWebアプリケーション有効
タッチとマウスイベント
キャンバス要素のxとyの挙動に影響を与える配列と機能
使用イベント場所（pageX & pageY）を使用
ビジュアルを継続的に生成する必要があります。アニメーションの終了は許可されません。

さまざまなサイズのボールがキャンバスページの下部から入ってきて、上から約1/3に飛んで飛び出して爆発が起こるような、ある種の花火ショー同時に。サークルが爆発する間に、新しいものがキャンバスの底に生成され、それが続くなどとなります。

私は、マウスのイベント/タッチイベントを追加するだけでなく、トップの3分の1に達すると、爆発（円の中心から離れて爆発する小さな円を作成する）を助ける必要があります早期にサークルを爆発させてください。どんな助けでも大変感謝しています。

<html> 
    <head> 

     <meta name="apple-mobile-web-app-capable" content="yes"/> 
     <meta name="apple-mobile-web-app-status-bar-style" content="black"/> 
     <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> 

     <title>basic_canvas</title> 
     <style> 
      #mycanvas { 
       margin: 0 auto; 
       background-color: black; 
      } 
      body { 
       margin: 0 
      } 
     </style> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <script> 

      //global variables 
      var mycanvas; 
      var ctx; 

      //make an array of balls shooting from the bottom of the page to the middle of the page 

      var Balls = []; 
      var fireworks = []; 

      //make a ready handler for our page to tirgger my javascript 
      $(document).ready(function() { 

       mycanvas = document.getElementById('mycanvas'); 
//    mycanvas = $('#mycanvas'); 
       ctx = mycanvas.getContext('2d'); 

       mycanvas.width = window.innerWidth; 
       mycanvas.height = window.innerHeight; 

       setInterval(draw, 33); 

       //make the balls here 
       for (var i = 0; i < 30; i++) { 
        Balls[i] = new Ball(getRandomFloat(0, mycanvas.width), mycanvas.height, getRandomFloat(20, 70), getRandomFloat(0.1, 1)); 
       } 
       // event listeners here 

      }); 
      function draw() { 
       ctx.clearRect(0, 0, mycanvas.width, mycanvas.height); 
       for (var i = 0; i < Balls.length; i++) { 
        Balls[i].makeCirc(); 
        Balls[i].moveCirc(); 

       } 
      } 

      function degToRad(deg) { 
       radians = (deg * Math.PI/180) - Math.PI/2; 
       return radians; 
      } 
      function getRandomFloat(min, max) { 
       return Math.random() * (max - min) + min; 
      } 
      function getRandomInt(min, max) { 
       return Math.floor(Math.random() * (max - min + 1)) + min; 
      } 

      //make my flying balls here 
      //ball(x start value, y start value, radius, speed) 
      function Ball(xin, yin, radin, spin) { 
       //make all the variables for the Ball 

       var x = xin; 
       var y = yin; 
       var r = radin; 
       var sp = spin; 

       //generating random colors for the circles 
       var c = 'rgb(' + 
         getRandomInt(0, 255) + 
         ',' + 
         getRandomInt(0, 255) + 
         ',' + 
         getRandomInt(0, 255) + 
         ')'; 
       //draw the circle 
       this.makeCirc = function() { 
        ctx.fillStyle = c; 
        ctx.beginPath(); 
        ctx.arc(x, y, r, 0, Math.PI * 2); 
        ctx.fill(); 
       } 
       this.moveCirc = function() { 
        y -= sp; 

        if (y + r < mycanvas.height/3) { 

//      fireworks[fireworks.length] = new Fireworks(x,y,2); 
         Balls.splice(Balls.indexOf(this), 1); 
        } 
       } 
      } 

//   function Firework(xin,yin,rin){ 
//    var x = xin; 
//    var y = yin; 
//    var r = rin; 
//     
//   } 


     </script> 

    </head> 
    <body> 

     <canvas id="mycanvas"></canvas> 

    </body> 
</html>

出典

2016-10-30 RAGNAROK 227

爆発=新しいサークルを作成しますか？ –

より大きな円が爆発し消えた地点から爆発する小さな円の束を作ります –

私のプロジェクトを修正できました。他の誰かが似たようなものを必要とする場合に備えて私は固定コードを掲示しています。

<html> 
    <head> 

     <meta name="apple-mobile-web-app-capable" content="yes"/> 
     <meta name="apple-mobile-web-app-status-bar-style" content="black"/> 
     <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> 

     <title>Balloon_Fireworks</title> 
     <style> 
      #mycanvas { 
       margin: 0 auto; 
       background-color: black; 
      } 
      body { 
       margin: 0 
      } 

      #score_card { 

       position:absolute; 
       top:25px; 
       left:25px; 
       padding-top:25px; 
       padding-left:25px; 
       width:100px; 
       height:75px; 
       background-color: rgb(112,200,112); 
       color:rgba(50,50,50,0.5); 
       font-size:50px; 
       font-family: sans-serif; 
      } 
     </style> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <script> 

      //global variables 
      var mycanvas; 
      var ctx; 

      //make an array of balls shooting from the bottom of the page to the middle of the page 

      var Balls = []; 
      var Fireworks = []; 

      //global keep track of where i click 
      var mouseX; 
      var mouseY; 

      //Counts the number of fireworks popped 
      var point_counter = 0; 


      //make a ready handler for our page to tirgger my javascript 
      $(document).ready(function() { 

       mycanvas = document.getElementById('mycanvas'); 
//    mycanvas = $('#mycanvas'); 
       ctx = mycanvas.getContext('2d'); 

       mycanvas.width = window.innerWidth; 
       mycanvas.height = window.innerHeight; 

       mycanvas.addEventListener('mousedown', explodeThis); 
       mycanvas.addEventListener('touchstart', explodeThis); 

       setInterval(draw, 33); 

       //make the balls here 

       //new Ball(x, y, rad, speedx, speedy); 
       for (var i = 0; i < 30; i++) { 
        Balls[i] = new Ball(getRandomFloat(0, mycanvas.width), mycanvas.height, getRandomFloat(50, 70), getRandomFloat(-3, -1)); 
       } 
       // event listeners here 

      }); 
      function draw() { 
       ctx.clearRect(0, 0, mycanvas.width, mycanvas.height); 
       for (var i = 0; i < Balls.length; i++) { 
        Balls[i].makeCirc(); 
        Balls[i].moveCirc(); 
       } 

       for (var i = 0; i< Fireworks.length; i++){ 
        Fireworks[i].drawFire(); 
        Fireworks[i].moveFire(); 
       } 
      } 

      function explodeThis(e){ 
       e.preventDefault(); 

       mouseX = e.pageX || e.targetTouches[0].pageX; 
       mouseY = e.pageY || e.targetTouches[0].pageY; 

       for (var i = 0; i< Balls.length; i++){ 
        Balls[i].hit(); 
       } 
      } 

      function degToRad(deg) { 
       radians = (deg * Math.PI/180) - Math.PI/2; 
       return radians; 
      } 
      function getRandomFloat(min, max) { 
       return Math.random() * (max - min) + min; 
      } 
      function getRandomInt(min, max) { 
       return Math.floor(Math.random() * (max - min + 1)) + min; 
      } 

      //make my flying balls here 
      //ball(x start value, y start value, radius, speed) 
      function Ball(xin, yin, radin, spyin, spxin, cin){ 
       //make all the variables for the Ball 

       var x = xin; 
       var y = yin; 
       var r = radin; 
       var spy = spyin; 
       var spx = spxin || 0; 

       //make a gravity for me 
       var g = getRandomFloat(.0001,.05); 

       //generating random colors for the circles 
       var c = cin || 'rgb(' + 
         getRandomInt(0, 255) + 
         ',' + 
         getRandomInt(0, 255) + 
         ',' + 
         getRandomInt(0, 255) + 
         ')'; 
       //draw the circle 
       this.makeCirc = function() { 
        ctx.fillStyle = c; 
        ctx.beginPath(); 
        ctx.arc(x,y,r,0,Math.PI * 2); 
        ctx.fill(); 
       }; 

       this.moveCirc = function() { 
        y += spy; 
        x += spx; 
        // At 1/3 from the top the balls will explode 
        if (y+r < mycanvas.height/3) { 
        } 
       }; 

       this.gravityMe = function() { 
        spy += g; 
       }; 

       this.hit = function() { 
        var d = Math.sqrt((x-mouseX)*(x-mouseX) + (y-mouseY)*(y-mouseY)); 
        if (d < r){ 
         //when it hits 


         spy = 0; 

         //make a new set of fireworks using the last place 
         Fireworks[Fireworks.length] = new Firework (x, y, r, c); 
         //access that last one you just made, and add in particles 
         Fireworks[Fireworks.length-1].makeFire(); 
         c = 'rgba(255,255,255,0)'; 
         r = 0; 

         point_counter ++; 
//      console.log(point_counter); 
         document.getElementById('score_card').innerHTML = point_counter; 

         //make a new one 
         Balls[Balls.length] = new Ball(getRandomFloat(0, mycanvas.width), mycanvas.height+70, getRandomFloat(50, 70), getRandomFloat(-5, -2)); 
        } 
       }; 

      } 
      // make the circles that explode out 
      //firework(x value, y value, radius) 
      function Firework(xin,yin,rin, cin){ 
       var x = xin; 
       var y = yin; 
       var r = rin; 
       var color = cin; 

       //make an array 
       var particles = new Array(getRandomInt(10,30)); 

       this.makeFire = function() { 
        for (var i = 0; i < particles.length; i++){ 
         particles[i] = new Ball(getRandomFloat(x-r,x+r), getRandomFloat(y-r, y+r), getRandomInt(2,10), getRandomFloat(-1,1), getRandomFloat(-3, 3), color); 
        } 
       }; 

       this.drawFire = function() { 
        for (var i = 0; i < particles.length; i++){ 
         particles[i].makeCirc(); 
        } 
       }; 

       this.moveFire = function() { 
        for (var i = 0; i < particles.length; i++){ 
         particles[i].moveCirc(); 
         particles[i].gravityMe(); 
        } 
       }; 

      } 


     </script> 

    </head> 
    <body> 

     <canvas id="mycanvas"></canvas> 
     <div id = "score_card"></div> 

    </body> 
</html>

出典

2016-10-31 17:25:39

JavaScriptを使ってキャンバスで爆発するのに問題がある

答えて

関連する問題