javascript - JS游戏(Duck Hunt)将.png文件添加到特定级别

Question

我试图在经典游戏 Duck Hunt 中将不同的 Angular 色添加到不同的级别。我从 git hub ( https://github.com/MattSurabian/DuckHunt-JS ) 获得了原始源代码，现在有 3 个级别，并通过将它们添加到 css 来为级别创建不同的 .png 文件，但是我不确定在 JS 脚本中的何处调整代码以便每个级别有不同的特征？我猜我需要一个使用每个关卡 ID 的 if 语句。

这是它在 JS 中捡起鸭子 (duckA/B) 的地方

{var e=t%2===0?"duckA":"duckB";this.duckMax++,this.liveDucks.push(new Duck(this.duckMax.toString(),e,this.level.speed,this.playfield).fly())}},
killDuck:function(t){this.levelStats.ducksKilled+=1,this.liveDucks=_(this.liveDucks).reject(function(e){return e.id===t.id}),
0===this.liveDucks.length&&this.playfield.trigger("wave:end",this.curWave)},
drawDucks:function(){var t="",e=this.level.ducks*this.curWave-this.levelStats.ducksKilled;e=e>25?25:e;

这些是关卡

levels=[
{id:1,title:"Level 1",waves:1,ducks:10,pointsPerDuck:100,speed:2,bullets:15,time:25},
{id:2,title:"Level 2",waves:1,ducks:10,pointsPerDuck:150,speed:4,bullets:15,time:20},
{id:3,title:"Level 3",waves:1,ducks:10,pointsPerDuck:200,speed:6,bullets:15,time:18}],

我希望能够在第 2 级(id 2)上使用 duckC/D，在第 3 级(id 3)上使用 duckE/F......有人能帮忙吗？

编辑:

所以我调整了 duckhunt.min.js 中的代码部分如下，但是只有默认的两只鸭子正在加载？知道为什么吗？

Duck.prototype.hatch=function(){
$('<div id="'+this.id+'" class="duck1 '+this.className+'"></div>').appendTo(this.game),
this.DOM=$("#"+this.id),
this.bindEvents()
$('<div id="'+this.id+'" class="duck2 '+this.className+'"></div>').appendTo(this.game),
this.DOM=$("#"+this.id),
this.bindEvents()},

releaseDucks:function(){
for(var t=0;t<this.level.ducks;t++)
{var e=t%2===0?"duckA":"duckB";
this.duckMax++,
this.liveDucks.push(new Duck(this.duckMax.toString(),e,this.level.speed,this.playfield).fly())
}
{var e=t%2===0?"duckC":"duckD";
this.duckMax++,
this.liveDucks.push(new Duck(this.duckMax.toString(),e,this.level.speed,this.playfield).fly())
}
},

Answer 1

您可以在 duck.js 中看到正在创建鸭子的 DOM 元素

Duck.prototype.hatch = function(){

    $('<div id="'+this.id+'" class="duck '+this.className+'"></div>').appendTo(this.game);
    this.DOM = $("#"+this.id);
    this.bindEvents();
};

Duck 构造函数通过 this.className 传递给游戏中内置的两种 duck 变体 'duckA' 或 'duckB'，因此将 duckhunt.js 修改为改为考虑关卡数据:

releaseDucks : function(){
    for(var i=0;i<this.level.ducks;i++){
        var duckClass = "duck"+this.level.id; //This is different!
        this.duckMax++;
        this.liveDucks.push(new Duck(this.duckMax.toString(),duckClass,this.level.speed,this.playfield).fly());
    }
},

然后，将您的类命名为 duck1、duck2、duck3，...并像原始 repo 中一样设置它们的样式!