Welcome Guest, Not a member yet? Register   Sign In
[JavaScript] Impossible to see the animated sprites

(This post was last modified: 11-24-2018, 04:02 PM by ciadmin.)


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">
   <meta charset="utf-8">
body style="margin:0px; overflow: hidden">
       <canvas id='canvas'></canvas><br />
       <button onclick='moveRight()' style="border-radius:50px; width: 50px; height: 50px; border:none;">Faire bouger</button>
           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";
           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;
               ctx.drawImage(charactersrcXsrcYwidthheight22width 2height 2);
           function moveRight() {
               right true;
               speed speed 12;

Thanks for your help !

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

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

(11-25-2018, 04: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 ?

how do you use document.ready pls

It depends on what JavaScript you are using.

// 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" ) {

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

// 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 )

Theme © iAndrew 2016 - Forum software by © MyBB