pixi

https://github.com/Zainking/learningPixi

game1

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>lala</title>
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,target-densitydpi=device-dpi">
    <meta name="apple-mobile-web-app-capable" content="yes">

</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script>
    <script>
       //Create the renderer
        var renderer = PIXI.autoDetectRenderer(256, 256);

        //Add the canvas to the HTML document
        document.body.appendChild(renderer.view);

        //Create a container object called the `stage`
        var stage = new PIXI.Container();

        //Tell the `renderer` to `render` the `stage`
        renderer.render(stage);
    </script>
</body>

</html>

game2

<! DOCTYPE HTML> 
<HTML lang = "Zn"> 

<head> 
    <Meta charset = "UTF-8"> 
    <title> Animation Wizard </ title> 
</ head> 

<body> 
    <div the above mentioned id = "PX-the render "> </ div> 

    <Script src =" https://www.kkkk1000.com/js/pixi4.8.2.js "> </ Script> 
    <Script> // create a Pixi application needs some parameters 
        let option = { 
            width: 400 , 
            height: 300 , 
            transparent: to true , 
        } // create a Pixi application of 
        the let App = new new PIXI.
        The Application (the Option); // get the renderer
        
        
        the renderer = the let app.renderer; 
        the let Playground = document.getElementById ( 'the render-PX' );
         // add to the canvas Pixi created page 
        playground.appendChild (renderer.view); 

        // set the alias 
        the let TextureCache = PIXI. utils.TextureCache; 
        the let the Texture = PIXI.Texture; 
        the let the Rectangle = PIXI.Rectangle; 
        the let AnimatedSprite = PIXI.extras.AnimatedSprite; 

        // address to be loaded FIG Sprite (the cross-domain image processing has been done on the server side) 
        the let imgUrl = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png" ; 
 
        //Loading the image, after the completion of loading the setup function performed 
        PIXI.loader.add (imgUrl) .load (setup); 
        
        function setup () {  
             // Get texture 
            the let Base = TextureCache [imgUrl]; 
            
            // first texture 
            the let texture0 = new new the texture (Base); 
            texture0.frame = new new the Rectangle (0, 0, 80, 143 );
             // second texture 
            the let texture1 = new new the texture (Base); 
            texture1.frame = new new the Rectangle (80, 0, 80, 143 );
             // third texture 
            the let texture2 = new newThe Texture (Base); 
            texture2.frame = new new the Rectangle (160., 0, 80, 143 );
             // fourth texture 
            the let texture3 = new new the Texture (Base); 
            texture3.frame = new new the Rectangle (240, 0, 80, 143 ); 

            // create an array of textures 
            the let textures = [texture0, texture1, texture2, texture3];
             // create animated sprites 
            the let Pixie = new new PIXI.extras.AnimatedSprite (textures); 
             // animate the sprite speed 
            pixie.animationSpeed = 0.1 ; 
            
            // add animated sprites to the stage
            app.stage.addChild (Pixie);
             // Play animated sprites 
            pixie.play (); 
        }
     </ Script> 
</ body> 

</ HTML>

Guess you like