问循环浏览并在多个位置显示一个精灵或多个重复图像

EN

const ctx = canvas.getContext("2d");

const U = undefined; 
const doFor = (count, callback) => {var i = 0; while (i < count && callback(i ++) !== true ); };
const randI = (min, max = min + (min = 0)) => (Math.random() * (max - min) + min) | 0;
const rand  = (min, max = min + (min = 0)) => Math.random() * (max - min) + min;

const mouse  = {x : 0, y : 0, button : false}
function mouseEvents(e){
	mouse.x = e.pageX;
	mouse.y = e.pageY;
	mouse.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : mouse.button;
}
["down","up","move"].forEach(name => document.addEventListener("mouse"+name,mouseEvents));


const list = {
  items : null,
  add(item){ this.items.push(item); return item },
  empty(){ this.items.length = 0 },
  eachItem(callback){
    var i;
    for(i = 0; i < this.items.length; i++){
      callback(this.items[i],i);
    }
  },
}
const spriteSheet = {
  image : null,
  ready : false,
  load(URL){
    this.image = new Image;
    this.image.src = URL;
    this.image.onload = ()=>{
      const sprites = [];
      const w = this.image.width;
      const h = this.image.height;
      for(var i = 0; i < w/h; i++){
        sprites.push({x : i * h, y : 0, w : h,h : h});
      }
      this.image.sprites = sprites;
      this.ready = true;
    }
  },
  create(index,x,y,scale,rot){
     return Object.assign({},sprite,{image:this.image,index,x,y,scale,rot} );
  },
}
const sprite = {
  draw(){
    ctx.setTransform(this.scale,0,0,this.scale,this.x,this.y);
    ctx.rotate(this.rot);
    const spr = this.image.sprites[this.index];
    const w = spr.w;
    const h = spr.h;
    ctx.drawImage(this.image,spr.x,spr.y,w,h,-w/2,-h/2,w,h);
  }
}
function FChase(val,accel,drag){
    this.val = val;
    this.valChase = 0;
    this.valReal = 0;
    this.accel = accel;
    this.drag = drag;
    
}
FChase.prototype = {
    update(val = this.valReal){
        this.valChase += (this.val-this.valReal) * this.accel;
        this.valChase *= this.drag;
        this.valReal += this.valChase;
        return this.valReal;
    },
    kick(amount){
        this.valChase += amount;
    },
    
}
const accel = 0.15;
const drag = 0.7;
const animSpeed = 100;
const wobble = {
    init(){
        this.xc = new FChase(this.x,accel,drag);
        this.yc = new FChase(this.y,accel,drag);
        this.rc = new FChase(this.rot,accel,drag);
        this.sc = new FChase(this.scale,accel,drag);
        this.animSpeed = rand(0.2,1.2);
        this.animOffset = rand(1);
        return this;
    },
    update(){
        this.index = (((globalTime / animSpeed) * this.animSpeed + this.animOffset * this.image.sprites.length) | 0) % this.image.sprites.length;
        this.x = this.xc.update(this.x);
        this.y = this.yc.update(this.x);
        this.scale = this.sc.update(this.scale);
        this.rot = this.rc.update(this.rot);
    },
    kick(){
        this.xc.kick(rand(-40,40));
        this.yc.kick(rand(-40,40));
       // this.sc.kick(rand(-0.1,0.1));
        this.rc.kick(rand(-1,1));
    }
}
// create a sprite sheet and load media
const walkSprites = Object.assign({},spriteSheet);
walkSprites.load("https://cdn.codeandweb.com/blog/2016/05/10/how-to-create-a-sprite-sheet/spritestrip.png");

// create a list for the sprites.
const spriteList = Object.assign({},list,{items:[]});  

// create 100 sprites
const spriteCount = 100;
function createSprites(){
  spriteList.empty();
  doFor(spriteCount,i=>{
    var spr = spriteList.add(
      walkSprites.create(
        randI(6),  // image may not have loaded, but I know how many sprites there are
        randI(canvas.width ), // pos
        randI(canvas.height),
        rand(0.25,0.5), // scale
        rand(Math.PI*2), // rotation
      )
    );
    spr = Object.assign(spr,wobble).init();
  })
}
// use requestAnimationFrame to animate
var w = canvas.width;
var h = canvas.height;
var cw = w / 2;  // center 
var ch = h / 2;
var globalTime;
var frameCount = 0;
// main update function
function update(timer){
    globalTime = timer;
    frameCount += 1;
    ctx.setTransform(1,0,0,1,0,0); // reset transform
    ctx.globalAlpha = 1;           // reset alpha
    if(w !== innerWidth || h !== innerHeight){
      cw = (w = canvas.width = innerWidth) / 2;
      ch = (h = canvas.height = innerHeight) / 2;
      createSprites();
    }else{
      ctx.clearRect(0,0,w,h);
    }
    if(walkSprites.ready){
        if(mouse.button){
            spriteList.eachItem((sprite,i)=>{
              if(frameCount % 20 === i % 20){
                sprite.kick()
              }
            });
        }
        spriteList.eachItem(sprite=>sprite.update());
        spriteList.eachItem(sprite=>sprite.draw());
    }
    requestAnimationFrame(update);
}
requestAnimationFrame(update);

canvas, span{ position : absolute; top : 0px; left 0px; }
span {
  z-index:10;
  font-family:arial black;
  font-size:34px;
  color : yellow;
 }

<span >CLICK HOLD to KICK animations</span>
<canvas id="canvas"></canvas>