• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[JavaScript] Impossible to see the animated sprites

#1
Hello,

So here, as the title indicates I would like to display an animated image with a script built into my view.php.

So I started by creating and launching my .php page out CodeIgniter (there is no problem all works) but as soon as I try to open my view the script starts but the image does not appear.However, I have checked that the path of the image in the script is good, so if someone sees what the problem is?

Here is my view.php:
PHP Code:
<!DOCTYPE html>
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
 
<
head>
 
   <meta charset="utf-8">
 
   <title></title>
</
head>
 
<
header>
 
</
header>
 
<
body style="margin:0px; overflow: hidden">
 
 
   <main>
 
 
       <canvas id='canvas'></canvas><br />
 
 
       <button onclick='moveRight()' style="border-radius:50px; width: 50px; height: 50px; border:none;">Faire bouger</button>
 
 
       <script>
 
           var speed2 12;
 
 
           var canvasWidth window.innerWidth 80;
 
           var canvasHeight window.innerHeight 100;
 
 
           var spriteWidth 280;
 
           var spriteHeight 50;
 
 
           var rows 1;
 
           var cols 4;
 
 
           var trackRight 0;
 
           var trackLeft 1;
 
 
           var width spriteWidth cols;
 
           var height spriteHeight;
 
 
           var curFrame 1;
 
           var frameCount 4;
 
 
           var x = -80;
 
           var y 200;
 
           var srcX 0;
 
           var srcY 0;
 
 
           var right false;
 
 
           var speed 0;
 
 
           var canvas document.getElementById('canvas');
 
 
           canvas.width canvasWidth;
 
           canvas.height canvasHeight;
 
 
           var ctx canvas.getContext("2d");
 
 
           var character = new Image();
 
 
           character.src "MonImage.png";
 
 
           setInterval(draw60);
 
 
 
           function updateFrame() {
 
 
               curFrame = ++curFrame frameCount;
 
 
               srcX curFrame width;
 
 
               ctx.clearRect(22width 2height 2);
 
 
               if (right && canvasWidth width) {
 
                   srcY trackRight height;
 
                   x speed;
 
               }
 
 
 
           }
 
 
           function draw() {
 
               if (window.innerWidth) {
 
                   x = -80;
 
                   right false;
 
                   speed 0;
 
                   alert(1);
 
               }
 
               updateFrame();
 
 
               ctx.drawImage(charactersrcXsrcYwidthheight22width 2height 2);
 
 
           }
 
 
 
 
           function moveRight() {
 
               right true;
 
               speed speed 12;
 
 
           }
 
 
       </script>
         
    </main>
 
</body>
 
</html> 

Thanks for your help !
Reply

#2
Place your script in document.ready
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply

#3
(11-25-2018, 05:40 AM)InsiteFX Wrote: Place your script in document.ready


Thx but I don't understand the syntax ... can you show me an example without reciting all my code?

I have to do that in my view.php ?
Reply

#4
how do you use document.ready pls
Reply

#5
It depends on what JavaScript you are using.

Code:
// For plain JavaScript.

(function(funcName, baseObj) {
   // The public function name defaults to window.docReady
   // but you can pass in your own object and own function name and those will be used
   // if you want to put them in a different namespace
   funcName = funcName || "docReady";
   baseObj = baseObj || window;
   var readyList = [];
   var readyFired = false;
   var readyEventHandlersInstalled = false;

   // call this when the document is ready
   // this function protects itself against being called more than once
   function ready() {
       if (!readyFired) {
           // this must be set to true before we start calling callbacks
           readyFired = true;
           for (var i = 0; i < readyList.length; i++) {
               // if a callback here happens to add new ready handlers,
               // the docReady() function will see that it already fired
               // and will schedule the callback to run right after
               // this event loop finishes so all handlers will still execute
               // in order and no new ones will be added to the readyList
               // while we are processing the list
               readyList[i].fn.call(window, readyList[i].ctx);
           }
           // allow any closures held by these functions to free
           readyList = [];
       }
   }

   function readyStateChange() {
       if ( document.readyState === "complete" ) {
           ready();
       }
   }

   // This is the one public interface
   // docReady(fn, context);
   // the context argument is optional - if present, it will be passed
   // as an argument to the callback
   baseObj[funcName] = function(callback, context) {
       if (typeof callback !== "function") {
           throw new TypeError("callback for docReady(fn) must be a function");
       }
       // if ready has already fired, then just schedule the callback
       // to fire asynchronously, but right away
       if (readyFired) {
           setTimeout(function() {callback(context);}, 1);
           return;
       } else {
           // add the function and context to the list
           readyList.push({fn: callback, ctx: context});
       }
       // if document already ready to go, schedule the ready function to run
       if (document.readyState === "complete") {
           setTimeout(ready, 1);
       } else if (!readyEventHandlersInstalled) {
           // otherwise if we don't have event handlers installed, install them
           if (document.addEventListener) {
               // first choice is DOMContentLoaded event
               document.addEventListener("DOMContentLoaded", ready, false);
               // backup is window load event
               window.addEventListener("load", ready, false);
           } else {
               // must be IE
               document.attachEvent("onreadystatechange", readyStateChange);
               window.attachEvent("onload", ready);
           }
           readyEventHandlersInstalled = true;
       }
   }
})("docReady", window);

// Usage:

// pass a function reference
docReady(fn);

// use an anonymous function
docReady(function() {
   // code here
});

// pass a function reference and a context
// the context will be passed to the function as the first argument
docReady(fn, context);

// use an anonymous function with a context
docReady(function(context) {
   // code here that can use the context argument that was passed to docReady
}, ctx);

// If your using jQuery then it is like this:

// A $( document ).ready() block.

$( document ).ready(function() {
   console.log( "ready!" );
});

But there you go.
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


Users browsing this thread:
1 Guest(s)


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2019 MyBB Group.