クリック可能なスプライトシートの作成方法は？

Question

私はクリック可能なスプライトシート50px * 300pxを持っていますので、3枚の写真にはそれぞれ1,2,3という変数が必要です。これをクリックすると、変数myVarは2番目の画像に移動します。 myVar=2;となり、それをクリックするとmyVarはmyVar=3;となるはずです。

Answer 1

var spriteSheetIndex = 0; // Using a 0-indexed variable is easier 
 

 
    // Assuming you can split your sprites into 3 separate images 
 
    var imageSources = [ 
 
     "https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/96/keycap-digit-one_31-fe0f-20e3.png", 
 
     "https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/96/keycap-digit-two_32-fe0f-20e3.png", 
 
     "https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/96/keycap-digit-three_33-fe0f-20e3.png", 
 
    ] 
 
    var imageAlts = ["image1", "image2", "image3"]; 
 
    function nextImage() { 
 
     spriteSheetIndex = (spriteSheetIndex + 1) % 3; 
 
     var spriteImage = document.getElementById("spritesheetimage"); 
 
     spriteImage.src = imageSources[spriteSheetIndex]; 
 
     spriteImage.alt = imageAlts[spriteSheetIndex]; 
 
    }

<img id="spritesheetimage" 
 
    src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/96/keycap-digit-one_31-fe0f-20e3.png" 
 
    alt="image1" height="100" width="100" onclick="nextImage()">