asked on

A promising Javascript game on Youtube nearly works. What am I missing?

Hi
I found a very promising looking javascript youtube for beginning a javascript game done in the window.requestAnimtionFrame method system , which appears to be best.

My transcribing it from video to Atom IDE loads the mutalisk I substituted for their GIF in the animation,
but it doesn't move after the requestAnimation x,y individual incrementation in my helper method movement statements.

I'm confident it will be obvious to a JS master on sight where my code is lacking

The Youtube that moves a GIF is here

I was pleased my code appeared to be promising, but the moving of said mutalisk doesn't happen

MY CODE ATTEMPT IS HERE:

<!DOCTYPE html>
<html>

<head>
  <title> Title something something</title>
  <style type = "text/css">
    body {
      background-color: #FFF;
      margin: 30px;
      margin-top: 10px;

    }

    #contentContainer {

      width: 550px;
      height: 350px;
      border: 5px black solid;
      overflow: hidden;
      background-color: FFFF00
    }

    #thing {
      position: relative;
      left: :25px
      top: 50px
    }
    </style>
  </head>

  <body>
    <div id = "contentContainer">
      <img id = "mutalisk" src = "http://jamescomp.com/pics/mutalisk.gif"
      height="75" width="75">
    </div>

  <script>
      var theMutalisk = document.querySelector("#mutalisk");
      var currentPosition = 0;

      var requestAnimationFrame = window.requestAnimationFrame ||
                                  window.mozRequestAnimationFrame ||
                                  window.webkitRequestAnimationFrame ||
                                  window.msRequestAnimationFrame;
      funtion animate() {

        currentPosition+=3;
        theMutalisk.style.left = currentPosition + "px";


        requestAnimationFrame(animate);
      }
      animate();

  </script>
</body>
<html>

Open in new window

What might be the problem?

Thanks

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

James Hancock

ASKER

Excellent. Thanks!

Wouldn't it be best to put those 3 files in Atom separately? link them in for cleanliness?
What should I change in the HTML to load in the .js javascript file and the .css style sheet file? <??? src = ...>
What would it all become?

leakim971

script tag for js
link for stylesheet (css)

James Hancock

ASKER

So, it should be everything between the <script>< tags into a .js file,
everything between the <link>< tags into a .css file? or cut, including tags into external files,
with
<script src = "scriptFile.js:">
...
</script>

in the html,
same with link

<link src = "css.css">
</link>

Is the order crucial?

Thanks

leakim971

So, it should be everything between the <script>< tags into a .js file,

yes, simply :
<script src = "scriptFile.js:"></script>

everything between the <link>< tags into a .css file? or cut, including tags into external files,

no, style tag
<style type="text/css">
css here
</style>

replaced by :

<link href="styles.css" rel="stylesheet" />

Is the order crucial?

no but we usualy put style before javascript
if multiple links, last style overwrite the previous one
if multiple scripts you need to declare javascript variables before using them in another javascript

James Hancock

ASKER

Thanks.
This is confounding. I follow your instructions and I always do the same something wrong!
The mutalisk doesn't move.
These are my new files...
What was my mistake?

index.htm

<!DOCTYPE html>
<html>

<head>
  <title> Mutalisk flap party</title>

  </head>

  <body>

    <link href="mutaCSS.css" rel="stylesheet" />
    <div id = "contentContainer">
      <img id = "mutalisk" src = "http://jamescomp.com/pics/mutalisk.gif"
      height="75" width="75">
    </div>

  <script src = "mutaJS.js"></script>
</body>
<html>

Open in new window

and mutaCSS.css

body {
  background-color: #FFF;
  margin: 30px;
  margin-top: 10px;

}

#contentContainer {

  width: 550px;
  height: 350px;
  border: 5px black solid;
  overflow: hidden;
  background-color: FFFF00
}

#mutalisk {
  position: relative;
  left: :25px
  top: 50px
}

Open in new window

and mutaJS.js

    var theMutalisk = document.querySelector("#mutalisk");
    var currentPositionX = 0;
    var currentPositionY = 0;
    var TargetPositionX = 100;
    var TargetPositionY = 100;
    var mutaPixelRate = 3;

    var requestAnimationFrame = window.requestAnimationFrame ||
                                window.mozRequestAnimationFrame ||
                                window.webkitRequestAnimationFrame ||
                                window.msRequestAnimationFrame;
    function animate() {

      if (currentPositionX<TargetPositionX) currentPositionX+=mutaPixelRate;
      if (currentPositionY<TargetPositionY) currentPositionY+=mutaPixelRate;
      if (currentPositionX>TargetPositionX) currentPositionX-=mutaPixelRate;
      if (currentPositionY>TargetPositionY) currentPositionY-=mutaPixelRate;


      theMutalisk.style.left = currentPositionX + "px";
      theMutalisk.style.top = currentPositionY + "px";


      requestAnimationFrame(animate);
    }
    animate();

Open in new window

Thanks

leakim971

it worked fine for me.
you probably have a cache issue

James Hancock

ASKER

Awesome.
Thanks, I'm back on track.. I recreated all the files and pasted again..
Now it's just finger selection, mouse and destination touch/click ..

Obviously they might share a method that does the work.

Does this page look suitable? here

I suppose I should instantiate the listener right after the #theMutalisk is created? Can a listener be added to a #mutalisk ?
It looks like it expects a distinct object to add the listener to.

What could I get wrong? Mistakes in order?
Must the worker method be created before? Does that complicate anything? Is a 'forward' usage recommendable, or does the interpreter work it out?

leakim971

I believe we're far away the OP where your main issue is resolved.
If you've new "issue", could you create a new thread, thanks.

James Hancock

ASKER

Thanks