asked on

How is css linking with a Javascript game best done?

Hi,

I'm asking a more refined Question, as suggested, after my other JS / css Q strayed...

I'm trying to connect an html that loads javascript code that is wrapped in a css style sheet.

The code works as I want it for now in jsfiddle, a mutalisk flight exercise, point and click movement. Small movement point and click works.
But I cant load it in Xcode IDE, or a browser, the same way. (no big, black rectangle border appears, as in the css, and the mutalisk doesn't move)
I need to know how to explicitly connect a style sheet with javascript.
The jsfiddle working initial html, css and JS code is here

In xcode, the mutalisk flies, but can't be click-moved, like in jsfiddle.

No black rectangle - means that the CSS isn't connecting.
I found this page below on how to explicitly include a style sheet into javascript. Nowhere in the jsfiddle code does the stylesheet get loaded.
Is this, below, the best/correct way to go?

here
?
Thanks

leakim971

in a browser like Chrome, Edge, Safari or Firefox, do a right click inside the rectangle and select "inspect element"
here a picture when we see all CSS and JavaScript code :

if you do a right click on the html tag inside the iframe and choose "copy outerHTML" you get the whole jsfiddle code (without the doctype ok)
lines 6 to 12, 115 to 126 are jsfiddle stuff

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script type="text/javascript" src="/js/lib/dummy.js"></script>

    <link rel="stylesheet" type="text/css" href="/css/result-light.css">


  <style id="compiled-css" type="text/css">
      
#contentContainer {

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

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


  
</head>
<body>
    


    <title> Mutalisk flap party</title>


<div id="contentContainer">
    <img id="mutalisk" src="http://jamescomp.com/pics/mutalisk.gif" style="left: 3px; top: 3px;">
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>



  <!-- TODO: Missing CoffeeScript 2 -->

  <script type="text/javascript">//<![CDATA[

    
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);
}

 requestAnimationFrame(animate);


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


  //]]></script>

  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "Lkdwtue7"
      }], "*")
    }

    // always overwrite window.name, in case users try to set it manually
    window.name = "result"
  </script>


</body></html>

Open in new window

James Hancock

ASKER

Thanks
I cant find the line in the jsfiddle project where the project's style sheet or the JS is specifically loaded.
How is it loaded in?
Does jfiddle just include it all automatically?
I think that might be my main fail in my web-space...linking the correct JS and CSS.

I am not using Xcode...above, sorry, that was a slip. I am trying to use Atom for javascript. Is that a decent choice? or should I stick with jsfiddle temporarily?

leakim971

I cant find the line in the jsfiddle project where the project's style sheet or the JS is specifically loaded.
How is it loaded in?

check line 15 t o 31

Does jfiddle just include it all automatically?

this is the purpose of the site, to split, html, js, css and it add/render all of them in the bottom right iframe window

or should I stick with jsfiddle temporarily?

no your favorite editor is fine, jsfiddle is ok to share a small demo/test page with people in public

James Hancock

ASKER

Thanks

If lines 6 to 12, 115 to 126 are jsfiddle stuff,

must I just comment them out, and put that in an index.htm in my web-space?
Should it work if it is a local file?

?

leakim971

must I just comment them out,

remove, delete

put that in an index.htm in my web-space?
Should it work if it is a local file?

yes, save it to index.htm and it will work as local file, no problem

James Hancock

ASKER

Thanks

below is my local file

indexMuta.htm
It loads, but click move doesn't move the mutalisk in Safari:

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  


  <style id="compiled-css" type="text/css">

#contentContainer {

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

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



</head>
<body>



    <title> Mutalisk flap party</title>


<div id="contentContainer">
    <img id="mutalisk" src="http://jamescomp.com/pics/mutalisk.gif" style="left: 3px; top: 3px;">
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>



  <!-- TODO: Missing CoffeeScript 2 -->

  <script type="text/javascript">//<![CDATA[


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);
}

 requestAnimationFrame(animate);


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


  //]]></script>




</body></html>

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

Awesome.
Thanks.
It is unclear as to why the flapper doesn't fly continuously, but only in stutter steps.
I understand it is a game-loop, but it calls itself at the end, so should be a smooth loop.
Is there a line that can be tweaked?

This is almost at the point where I'm ready to go.

leakim971

why do it move? this is the question.
it move EVERY click/touch
it doesn't move INDEFINITELY on click or touch
you want it to move the same direction asap the user let it pointer-clicked/finger-on-screen and stop when the user release the click/finger
I believe we're again far away you initial question....

James Hancock

ASKER

Thanks