자바 스크립트를 사용하여 캔버스에서 폭발 할 때 문제가 발생했습니다.

저는 이곳에서 새로 왔으며 정보 과학 학위 과정 학생입니다. 다음 주에 내 프로젝트 중 하나의 일부에 문제가 있습니다. 우리는 이러한 모든 요구 사항을 포함하는 프로젝트를 수행하도록 요청 받았습니다.자바 스크립트를 사용하여 캔버스에서 폭발 할 때 문제가 발생했습니다.

전체 화면 및 웹 애플리케이션을 사용
터치와 마우스 이벤트
캔버스 요소의 x와 y의 행동에 영향을 배열과 기능
사용 이벤트 위치 (페이지 X & 페이지 Y)를 사용
지속적으로 비주얼을 생성해야 함 - 애니메이션의 끝은 허용되지 않음

그래서 어떤 작업을 수행하기로 결정했습니다. 일종의 불꽃 놀이로 다양한 크기의 생성 된 볼이 캔버스 페이지의 바닥에서 들어 와서 위로부터 1/3 정도 위로 올라와 튀어 나와 폭발 할 것입니다. 동시에. 원은 폭발 할 것이지만 새로운 원은 캔버스 바닥에 생성되며 계속 진행됩니다.

그래서 나는 그들이 마우스 이벤트/터치 이벤트를 추가하는 것뿐만 아니라 상단 1/3까지 올라갈 때 (폭발하는 원의 중심에서 멀리 떨어져 나가는 작은 원을 만들어서) 폭발을하는 데 도움이 필요합니다. 조기에 원을 폭발 시키십시오. 어떤 도움이라도 대단히 감사 할 것입니다.

<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

자바 스크립트를 사용하여 캔버스에서 폭발 할 때 문제가 발생했습니다.

답변

관련 문제