Speed up moving arrows in canvasCapture HTML Canvas as gif/jpg/png/pdf?How to move an element into another element?Binding arrow keys in JS/jQueryHow to clear the canvas for redrawingUsing HTML5/Canvas/JavaScript to take in-browser screenshotsJavaScript numbers to WordsDetecting arrow key presses in JavaScriptHTML5 Canvas vs. SVG vs. divECMAScript 6 arrow function that returns an objectAre 'Arrow Functions' and 'Functions' equivalent / exchangeable?

A famous scholar sent me an unpublished draft of hers. Then she died. I think her work should be published. What should I do?

Can you cure a Gorgon's Petrifying Breath before it finishes turning a target to stone?

How to compare integers in Tex?

Why is Pelosi so opposed to impeaching Trump?

How to say "respectively" in German when listing (enumerating) things

Is it mandatory to use contractions in tag questions and the like?

Top off gas with old oil, is that bad?

What is the meaning of colored vials next to some passive skills

Why is the population of post-Soviet states declining?

As a team leader is it appropriate to bring in fundraiser candy?

How to stop the death waves in my city?

Fix Ethernet 10/100 PoE cable with 7 out of 8 wires alive

Why isn't there armor to protect from spells in the Potterverse?

What is the logical distinction between “the same” and “equal to?”

Can an energy drink or chocolate before an exam be useful ? What sort of other edible goods be helpful?

Difference between two vector layer

Science fiction episode about the creation of a living pegasus, even though flightless

Impossible violin chord, how to fix this?

What is the climate impact of planting one tree?

Delete n lines skip 1 line script

What would happen if I build a half bath without permits?

Would a horse be sufficient buffer to prevent injury when falling from a great height?

How is the Apple Watch ECG disabled in certain countries?

Would a 737 pilot use flaps in nose dive?



Speed up moving arrows in canvas


Capture HTML Canvas as gif/jpg/png/pdf?How to move an element into another element?Binding arrow keys in JS/jQueryHow to clear the canvas for redrawingUsing HTML5/Canvas/JavaScript to take in-browser screenshotsJavaScript numbers to WordsDetecting arrow key presses in JavaScriptHTML5 Canvas vs. SVG vs. divECMAScript 6 arrow function that returns an objectAre 'Arrow Functions' and 'Functions' equivalent / exchangeable?






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








0















I am trying to speed up some moving arrow images that are moving horisontally across a canvas. I have made an array that temporarily saves classes with the arrows 'properties'. The moment before the last arrow in the array comes out, I add another.



When our combo count hits a number x, I want the speed to change. But when i do that no new arrows gets added to the array. I think the reason for this might be that when i change the speed, the x value for the last arrow does not match up with the check and therefore no new arrow is added to the array.(but I'm not sure)



Layout:



Illustration 1




var combo = 0;
var counter = 1;
var totalscore = 0;
var arrows = [];

buttonStart.onclick = function()

combo = 0;
counter = 1;
totalscore = 0;
arrows = [];

for(var i= 0; i<10; i++)
arrows.push(new ARR(counter));
arrows[i].x = i*(-275)-arrows[i].width;
;

intervall = setInterval(moveArrow, 1);
;



//ArrowClass
function ARR(speed)
this.width = 50;
this.x = 0 - this.width;
this.y = 85;
this.speed = speed;
this.code = Math.floor(Math.random()*(40-37+1)+37);
;


function drawArrows()
ctz.clearRect(0,0, width, height);

for(var i = 0; i<arrows.length; i++)
if(arrows[i].code == 37)
ctz.drawImage(pilHoyre, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

;
if(arrows[i].code == 38)
ctz.drawImage(pilOpp, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

;
if(arrows[i].code == 39)
ctz.drawImage(pilVenstre, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

;
if(arrows[i].code == 40)
ctz.drawImage(pilNed, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

;

;




function moveArrow()

//Adds a new arrow right before the last one pops up
if( arrows[arrows.length-1].x == -arrows[0].width)
arrows.push(new ARR(counter));
arrows[arrows.length-1].x = arrows[arrows.length-2].x - 275;
;

if(arrows[0].x >= width)
if(hit == false)
totalscore += miss;
;

arrows.splice(0,1);

;


//gives arrows a new position
for(var i = 0; i < arrows.length; i++)
arrows[i].x += arrows[i].speed;
;

drawArrows();
;

//points
var miss = -3;
var perfect = 10;
var great = 5;
var good = 1;

//OnKeyDown delay
var movelistener = null;

function delaytimer()
movelistener += 1;
return movelistener;
;



document.onkeydown = function(event)
totalScore.innerHTML = "";

//Onkeydown Delay
if( movelistener === null )
movelistener = setInterval(delaytimer, 1);
else if ( movelistener <= 200 )
text(totalscore, combo);
return;
else
movelistener = null;
;



//User click wrong button
if( event.keyCode !== arrows[0].code )
totalscore += miss;


else if ( event.keyCode == arrows[0].code ) arrows[0].x < 600) && (arrows[0].x >= 586-arrows[0].width) )

totalscore += good;
combo = 0;

else
totalscore += miss;
;
;
;









share|improve this question
































    0















    I am trying to speed up some moving arrow images that are moving horisontally across a canvas. I have made an array that temporarily saves classes with the arrows 'properties'. The moment before the last arrow in the array comes out, I add another.



    When our combo count hits a number x, I want the speed to change. But when i do that no new arrows gets added to the array. I think the reason for this might be that when i change the speed, the x value for the last arrow does not match up with the check and therefore no new arrow is added to the array.(but I'm not sure)



    Layout:



    Illustration 1




    var combo = 0;
    var counter = 1;
    var totalscore = 0;
    var arrows = [];

    buttonStart.onclick = function()

    combo = 0;
    counter = 1;
    totalscore = 0;
    arrows = [];

    for(var i= 0; i<10; i++)
    arrows.push(new ARR(counter));
    arrows[i].x = i*(-275)-arrows[i].width;
    ;

    intervall = setInterval(moveArrow, 1);
    ;



    //ArrowClass
    function ARR(speed)
    this.width = 50;
    this.x = 0 - this.width;
    this.y = 85;
    this.speed = speed;
    this.code = Math.floor(Math.random()*(40-37+1)+37);
    ;


    function drawArrows()
    ctz.clearRect(0,0, width, height);

    for(var i = 0; i<arrows.length; i++)
    if(arrows[i].code == 37)
    ctz.drawImage(pilHoyre, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

    ;
    if(arrows[i].code == 38)
    ctz.drawImage(pilOpp, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

    ;
    if(arrows[i].code == 39)
    ctz.drawImage(pilVenstre, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

    ;
    if(arrows[i].code == 40)
    ctz.drawImage(pilNed, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

    ;

    ;




    function moveArrow()

    //Adds a new arrow right before the last one pops up
    if( arrows[arrows.length-1].x == -arrows[0].width)
    arrows.push(new ARR(counter));
    arrows[arrows.length-1].x = arrows[arrows.length-2].x - 275;
    ;

    if(arrows[0].x >= width)
    if(hit == false)
    totalscore += miss;
    ;

    arrows.splice(0,1);

    ;


    //gives arrows a new position
    for(var i = 0; i < arrows.length; i++)
    arrows[i].x += arrows[i].speed;
    ;

    drawArrows();
    ;

    //points
    var miss = -3;
    var perfect = 10;
    var great = 5;
    var good = 1;

    //OnKeyDown delay
    var movelistener = null;

    function delaytimer()
    movelistener += 1;
    return movelistener;
    ;



    document.onkeydown = function(event)
    totalScore.innerHTML = "";

    //Onkeydown Delay
    if( movelistener === null )
    movelistener = setInterval(delaytimer, 1);
    else if ( movelistener <= 200 )
    text(totalscore, combo);
    return;
    else
    movelistener = null;
    ;



    //User click wrong button
    if( event.keyCode !== arrows[0].code )
    totalscore += miss;


    else if ( event.keyCode == arrows[0].code ) arrows[0].x < 600) && (arrows[0].x >= 586-arrows[0].width) )

    totalscore += good;
    combo = 0;

    else
    totalscore += miss;
    ;
    ;
    ;









    share|improve this question




























      0












      0








      0








      I am trying to speed up some moving arrow images that are moving horisontally across a canvas. I have made an array that temporarily saves classes with the arrows 'properties'. The moment before the last arrow in the array comes out, I add another.



      When our combo count hits a number x, I want the speed to change. But when i do that no new arrows gets added to the array. I think the reason for this might be that when i change the speed, the x value for the last arrow does not match up with the check and therefore no new arrow is added to the array.(but I'm not sure)



      Layout:



      Illustration 1




      var combo = 0;
      var counter = 1;
      var totalscore = 0;
      var arrows = [];

      buttonStart.onclick = function()

      combo = 0;
      counter = 1;
      totalscore = 0;
      arrows = [];

      for(var i= 0; i<10; i++)
      arrows.push(new ARR(counter));
      arrows[i].x = i*(-275)-arrows[i].width;
      ;

      intervall = setInterval(moveArrow, 1);
      ;



      //ArrowClass
      function ARR(speed)
      this.width = 50;
      this.x = 0 - this.width;
      this.y = 85;
      this.speed = speed;
      this.code = Math.floor(Math.random()*(40-37+1)+37);
      ;


      function drawArrows()
      ctz.clearRect(0,0, width, height);

      for(var i = 0; i<arrows.length; i++)
      if(arrows[i].code == 37)
      ctz.drawImage(pilHoyre, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

      ;
      if(arrows[i].code == 38)
      ctz.drawImage(pilOpp, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

      ;
      if(arrows[i].code == 39)
      ctz.drawImage(pilVenstre, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

      ;
      if(arrows[i].code == 40)
      ctz.drawImage(pilNed, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

      ;

      ;




      function moveArrow()

      //Adds a new arrow right before the last one pops up
      if( arrows[arrows.length-1].x == -arrows[0].width)
      arrows.push(new ARR(counter));
      arrows[arrows.length-1].x = arrows[arrows.length-2].x - 275;
      ;

      if(arrows[0].x >= width)
      if(hit == false)
      totalscore += miss;
      ;

      arrows.splice(0,1);

      ;


      //gives arrows a new position
      for(var i = 0; i < arrows.length; i++)
      arrows[i].x += arrows[i].speed;
      ;

      drawArrows();
      ;

      //points
      var miss = -3;
      var perfect = 10;
      var great = 5;
      var good = 1;

      //OnKeyDown delay
      var movelistener = null;

      function delaytimer()
      movelistener += 1;
      return movelistener;
      ;



      document.onkeydown = function(event)
      totalScore.innerHTML = "";

      //Onkeydown Delay
      if( movelistener === null )
      movelistener = setInterval(delaytimer, 1);
      else if ( movelistener <= 200 )
      text(totalscore, combo);
      return;
      else
      movelistener = null;
      ;



      //User click wrong button
      if( event.keyCode !== arrows[0].code )
      totalscore += miss;


      else if ( event.keyCode == arrows[0].code ) arrows[0].x < 600) && (arrows[0].x >= 586-arrows[0].width) )

      totalscore += good;
      combo = 0;

      else
      totalscore += miss;
      ;
      ;
      ;









      share|improve this question
















      I am trying to speed up some moving arrow images that are moving horisontally across a canvas. I have made an array that temporarily saves classes with the arrows 'properties'. The moment before the last arrow in the array comes out, I add another.



      When our combo count hits a number x, I want the speed to change. But when i do that no new arrows gets added to the array. I think the reason for this might be that when i change the speed, the x value for the last arrow does not match up with the check and therefore no new arrow is added to the array.(but I'm not sure)



      Layout:



      Illustration 1




      var combo = 0;
      var counter = 1;
      var totalscore = 0;
      var arrows = [];

      buttonStart.onclick = function()

      combo = 0;
      counter = 1;
      totalscore = 0;
      arrows = [];

      for(var i= 0; i<10; i++)
      arrows.push(new ARR(counter));
      arrows[i].x = i*(-275)-arrows[i].width;
      ;

      intervall = setInterval(moveArrow, 1);
      ;



      //ArrowClass
      function ARR(speed)
      this.width = 50;
      this.x = 0 - this.width;
      this.y = 85;
      this.speed = speed;
      this.code = Math.floor(Math.random()*(40-37+1)+37);
      ;


      function drawArrows()
      ctz.clearRect(0,0, width, height);

      for(var i = 0; i<arrows.length; i++)
      if(arrows[i].code == 37)
      ctz.drawImage(pilHoyre, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

      ;
      if(arrows[i].code == 38)
      ctz.drawImage(pilOpp, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

      ;
      if(arrows[i].code == 39)
      ctz.drawImage(pilVenstre, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

      ;
      if(arrows[i].code == 40)
      ctz.drawImage(pilNed, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

      ;

      ;




      function moveArrow()

      //Adds a new arrow right before the last one pops up
      if( arrows[arrows.length-1].x == -arrows[0].width)
      arrows.push(new ARR(counter));
      arrows[arrows.length-1].x = arrows[arrows.length-2].x - 275;
      ;

      if(arrows[0].x >= width)
      if(hit == false)
      totalscore += miss;
      ;

      arrows.splice(0,1);

      ;


      //gives arrows a new position
      for(var i = 0; i < arrows.length; i++)
      arrows[i].x += arrows[i].speed;
      ;

      drawArrows();
      ;

      //points
      var miss = -3;
      var perfect = 10;
      var great = 5;
      var good = 1;

      //OnKeyDown delay
      var movelistener = null;

      function delaytimer()
      movelistener += 1;
      return movelistener;
      ;



      document.onkeydown = function(event)
      totalScore.innerHTML = "";

      //Onkeydown Delay
      if( movelistener === null )
      movelistener = setInterval(delaytimer, 1);
      else if ( movelistener <= 200 )
      text(totalscore, combo);
      return;
      else
      movelistener = null;
      ;



      //User click wrong button
      if( event.keyCode !== arrows[0].code )
      totalscore += miss;


      else if ( event.keyCode == arrows[0].code ) arrows[0].x < 600) && (arrows[0].x >= 586-arrows[0].width) )

      totalscore += good;
      combo = 0;

      else
      totalscore += miss;
      ;
      ;
      ;






      javascript css class animation






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Mar 28 at 20:51







      Meek

















      asked Mar 28 at 19:53









      MeekMeek

      399 bronze badges




      399 bronze badges

























          0






          active

          oldest

          votes














          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );














          draft saved

          draft discarded
















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55405861%2fspeed-up-moving-arrows-in-canvas%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          0






          active

          oldest

          votes








          0






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes
















          draft saved

          draft discarded















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid …


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55405861%2fspeed-up-moving-arrows-in-canvas%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          How to preserve electronics (computers, tablets and phones) for hundreds of years Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) The network's official Twitter account is up and running again. What content…How might modern humans leave a message for 50,000 years?How would an aquatic race develop computers?How do we make computers care for human life?Keeping supplies for 1000 yearsWhat will cell phones become in 100 years?What body armor protects against a laser?Could a society attain 1800s technology if limited to using copper and bronze?Electricity power (magic) and electronicsScavenging metal resources in post-apocalypse after 100 yearsWhy would precursors create devices that can survive and still work after hundreds of years?

          155 수학 과학 기타 둘러보기 메뉴eh추가해eh문서를 완성해

          Convert JSON to MapSimplest way to convert a string representing JSON array into Java array List of key value pairsHow to take String JSON values into HashMapConvert a JSON String to a HashMapCreating BSON object from JSON stringJSONObject - How to get a value ?Better Map ConstructorReading JSON from Url javaUpdate columns if input values are not null otherwise ignore and keep the existing values of column in databaseHow to store object represented as Json string into Couchbase Lite?Go JSON into MapHow do I efficiently iterate over each entry in a Java Map?Sort a Map<Key, Value> by valuesHow to round a number to n decimal places in JavaCan comments be used in JSON?How do I read / convert an InputStream into a String in Java?How can I pretty-print JSON in a shell script?What is the correct JSON content type?How can I deserialize JSON to a simple Dictionary<string,string> in ASP.NET?Why does Google prepend while(1); to their JSON responses?Parse JSON in JavaScript?