Question

javascript的新手（以及一般的编程），我正在尝试在我的网页游戏中生成不同的角色，这些角色在我的精灵中表示为不同的部分。

我想知道如何实现这个目标？

我试图至少改变坐标，因为得分会更高，但我无法破解它。

function Enemy(nX, nY) {
    this.srcX = nX;   //i was trying to sub 
    this.srcY = nY;     
    this.width = 172;
    this.height = 68;
    this.speed = 2; 
    this.drawX = Math.floor(Math.random() * 1000) + gameWidth; 
    this.drawY = Math.floor(Math.random() * 360); 
    this.rewardPoints = 5; 
}

这是另一半

    Enemy.prototype.draw = function () { 
        this.drawX -= this.speed; 
 ctxEnemy.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
        this.checkEscaped();
    };

你可以在这里看到完整的东西。 http://dev.yeahnah.tv/gina2/（公平警告：非常糟糕。）

干杯！

Answer 1

如何从spritesheet中有效地生成随机精灵

将每个精灵的位置和尺寸存储在对象的spritesheet中：

{x:50, y:15, width:170, height:200}

然后将所有精灵定义对象推送到数组

// store x/y/width/height of each sprite in an object
// add each object to the sprites array
var sprites=[]
sprites.push({x:50,y:15,width:170,height:200});
sprites.push({x:265,y:10,width:140,height:200});
sprites.push({x:460,y:10,width:180,height:200});
sprites.push({x:10,y:385,width:180,height:180});
sprites.push({x:225,y:395,width:200,height:200});
sprites.push({x:445,y:305,width:200,height:160});

然后当你想要一个随机精灵时，只需使用Math.random从sprite数组中拉出一个：

function spawnRandomSprite(){

    // choose a random sprite and draw it
   var sprite=sprites[parseInt(Math.random()*5)];

    // draw the sprite by using the spritesheet position and dimensions in the object
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.drawImage(spritesheet,
        sprite.x,sprite.y,sprite.width,sprite.height,
        0,0,sprite.width,sprite.height
    );
}

您还可以在精灵对象中存储速度和奖励积分，并使用它们来驱动您的动画和得分：

{ x:50, y:15, width:170, height:200, speed:3, rewardPoints:5 }

这是代码和小提琴：http://jsfiddle.net/m1erickson/YzUmv/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px;}
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        // store x/y/width/height of each sprite in an object
        // add each object to the sprites array
        var sprites=[]
        sprites.push({x:50,y:15,width:170,height:200});
        sprites.push({x:265,y:10,width:140,height:200});
        sprites.push({x:460,y:10,width:180,height:200});
        sprites.push({x:10,y:385,width:180,height:180});
        sprites.push({x:225,y:395,width:200,height:200});
        sprites.push({x:445,y:305,width:200,height:160});

        // choose a random sprite and draw it
        function spawnRandomSprite(){
            var sprite=sprites[parseInt(Math.random()*5)];
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.drawImage(spritesheet,
                sprite.x,sprite.y,sprite.width,sprite.height,
                0,0,sprite.width,sprite.height
            );
        }

        ctx.font="18pt Verdana";
        ctx.fillText("Loading spritesheet...",20,20);

        var spritesheet=document.createElement("img");
        spritesheet.onload=function(){
            spawnRandomSprite();
        }
        spritesheet.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/angryBirds.png";


        $("#canvas").click(function(){ spawnRandomSprite(); });


    }); // end $(function(){});
</script>

</head>

<body>
    <p>Click on the canvas for a random sprite</p>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

随机绘制画布部分

1 个答案: