Question

我正在使用JavaScript和canvas API创建游戏。我想在画布顶部实现一个乐谱，它是由精灵表上的一组精灵构成的。我有一张精灵表，其中包含0到9之间的数字图像。我想知道如何从图像集中将玩家当前得分显示到画布上。这将包括超过9的数字（我认为最让我困惑）。你能不能在这里注释每一行代码，这样我才能完全理解。感谢所有回复的人。

Answer 1

这是一个使用对象属性名称查找要绘制的每个字符的图像详细信息的快速简单解决方案。

将得分转换为字符串，然后找到字符串中每个字符的字符代码。使用字符代码查找图像详细信息，然后绘制图像。

var numbers = {  // for each character create a property that has its ASCII code
    c48:{
        image:imgForZero,  // the image for the character zero
        offx:0,  // x offset if needed
        offy:0,  // y offset if needed
        widthToNext: 10,  // distance to the next character so you can have
                          // variable spacing 
    },
    c49: ...   // do the same for each character you want to display
               // you can find the codes here     
               // http://www.w3schools.com/html/html_charset.asp
    },
    c50: ...
    .. and so on
}
var chars = score.toString(); // turn score to a string
var x = 10,y = 20;  // the top left of the score position
for(var i = 0; i < chars.length; i++){ // for each character
    var charCode = chars.charCodeAt(i); // get the character code
    var charData = numbers["c"+charCode];  // get the image details
    if(charData !== undefined){  // make sure it is in the data
        // draw the image with the offset
        ctx.drawImage(charData.image, x + charData.offx, y + charData.offy);
        // move to the next character position
        x += charData.widthToNext; // 
    }
}
// All done

我回答尝试并停止此评级，因为这是一个很好的问题，并展示了如何使用括号表示法进行查找而不是array.find

Javascript spritesheet得分显示

1 个答案: