asked on

Must Javascript game-related event listeners go in an expected spot?

Hi (code below)
I have animated GIF's on my Javascript game canvas ready to be selectable, mouse and touch, and tapped/clicked to a destination.

I found a page for how to do it, but is there a best and only practical place to load them in? must I use the once-loaded system? I don't want to interfere with browsers' expectations.
The example/instruction mouse/touch listener page is here
Also, must these games be tested with a mouse, thus assuming touch screen will be good - and share a do-er method?

My game code now, has a single mutalisk flyer ready to be selected. I bet I can set the border once it is selected/deselected? How are the listeners best added? To which object? The drop-down doesn't have .addlistener as an option.

My code is:

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

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

mutaJS.js:

var theMutalisk = document.querySelector("#mutalisk");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";

////////////////////////




////////////

var currentPositionX = 0;
var currentPositionY = 0;
var TargetPositionX = 100;
var TargetPositionY = 100;
var mutaPixelRate = 3;

var width = document.body.clientWidth;

var introText =
    {
        "Welcome To A New Day...": "75",
        "Full Service Web Design": "50",
        "by": "50",
        "J. David Hock": "50"
    };

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;
  //TargetPositionX+=15;

  


  theMutalisk.style.left = currentPositionX + "px";
  theMutalisk.style.top = currentPositionY + "px";
  
   CreateMessageArray(introText, ProcessMessageArray);

  requestAnimationFrame(animate);
}
animate();

Open in new window

Thanks

lenamtl

Hi,

there are some errors in your CSS
here is the fix

#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

James Hancock

ASKER

Thanks
And the listeners? where would they best be found?

just before the first req animated frame?

leakim971

add the following at the end of the mutaJS.js :

$(document).on("click touchstart", function (event) {
    TargetPositionX = event.pageX || event.touches[0].clientX;
    TargetPositionY = event.pageY || event.touches[0].clientY;
    animate();
});

Open in new window

and be sure to add the jQuery plugin in your page (line 11) :

<!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">
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="mutaJS.js"></script>
</body>
<html>

Open in new window

James Hancock

ASKER

Hi
I've made the changes you've suggested to the files. Maybe it is an issue w my IDE, -Atom, but it loads in the IDE and on my web-space, but the mouse-click or touch functionality doesn't trigger the movement of the mutalisk. The mutalisk appears, but doesn't move.
Have I missed something in the file alterations?
Thanks

I have:

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">
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="mutaJS.js"></script>
</body>
<html>

Open in new window

mutaJS.js

var theMutalisk = document.querySelector("#mutalisk");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";

////////////////////////




////////////

var currentPositionX = 0;
var currentPositionY = 0;
var TargetPositionX = 100;
var TargetPositionY = 100;
var mutaPixelRate = 3;

var width = document.body.clientWidth;

var introText =
    {
        "Welcome To A New Day...": "75",
        "Full Service Web Design": "50",
        "by": "50",
        "J. David Hock": "50"
    };

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;
  //TargetPositionX+=15;

  document).on("click touchstart", function (event) {
      TargetPositionX = event.pageX || event.touches[0].clientX;
      TargetPositionY = event.pageY || event.touches[0].clientY;


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

   CreateMessageArray(introText, ProcessMessageArray);

   requestAnimationFrame(animate);
}

 requestAnimationFrame(animate);


});

Open in new window

mutaCSS.css

#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

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

Thanks
Good to see the code can do something!
But, strangely, it works on jsfiddle, and not in Xcode, not in Safari, or Internet Explorer, not in my web-space, not on my iPhone browser, even if I cut and paste your working code into my web-space.

What do you use? I have a MacBook and PC's. Any ideas?

leakim971

line 3 and 4 removed/commented on the jsfiddle

James Hancock

ASKER

Thanks
I don't seem to get a black rectangle from my web-space, or in Xcode->browser.

How is the style sheet loaded in? In js-fiddle, does it do it on its own?
Is this correct? : What would this HTML formatting look like in my situation: example-here

?

leakim971

we're in a "new" conversation...
did it worked on your side after you removed the lines 3 and 4 ?
please, feel free to open new thread when you've new question

James Hancock

ASKER

Thanks, I'll refine some of the points in a new question..like you suggested.

leakim971

you welcome