javascript - 根据游戏 javascript 中的级别更改背景图像？

Question

所以我正在构建一个水管基础游戏，可以在这里看到 http://www.mckenziedave.co.uk/client_files/gabi_pipes/ 我认为我应该发布它而不是解释它。

我使用的是 HTML5 和 JS 脚本，但我遇到了一个小问题，我希望根据用户所处的级别更改背景。这最好由 CSS 完成还是我可以将其实现到 java 脚本中？我没有发布所有脚本，而是发布了关卡选择器和关卡创建者(游戏板在 0/1 的基础上工作)。

$(document).ready(function(){

    PipeGame.configure({
        cols: 4,
        rows: 6,
        startX:0,
        StartY:0,
        lastX:3,
        lastY:5,
        godMode: true,
        autoStart: null     
    });

    var board =[[[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]],
                [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]],
                [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]],
                [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]]];

    PipeGame.setGameBoard(board);

    var slider = new Slider($(".options"))

});

var Slider = function(el){
    this.el = el;
    this.dragging = false;
    this.startx = this.el.offset().left;
    this.el.on("touchstart",this.startDrag.bind(this));
    this.el.on("touchmove",this.drag.bind(this));
    this.el.on("touchend",this.stopDrag.bind(this));
}

Slider.prototype.startDrag = function(e){
    this.startx = e.originalEvent.touches[0].pageX;
    this.dragging = true;

}
Slider.prototype.stopDrag = function(e){
    this.dragging = false;
}
Slider.prototype.drag = function(e){

    var pos = Math.round($(".plumbing-creator").position().left - (this.startx - e.originalEvent.touches[0].pageX)  );


    if(this.dragging){

        this.el.css({left:  pos +"px"})
    }
}


var levels = {
    level1: [[["0","1","0","1"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"]],[["0","0","1","1"],["0","1","1","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"]],[["0","0","0","0"],["0","0","1","1"],["1","1","0","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"]],[["0","0","0","0"],["0","0","0","0"],["0","0","1","1"],["1","0","1","0"],["1","0","1","0"],["1","1","0","0"]]],
    level2: [[["0","1","1","0"],["0","1","1","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"]],[["0","0","0","0"],["0","1","1","0"],["0","1","1","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"]],[["0","0","0","0"],["0","0","0","0"],["0","1","1","0"],["0","1","1","0"],["0","0","0","0"],["0","0","0","0"]],[["0","0","0","0"],["0","0","0","0"],["0","0","0","0"],["0","1","1","0"],["0","1","0","1"],["0","1","1","0"]]],
    level3: [[["0","1","0","1"],["0","1","1","0"],["0","0","1","1"],["1","1","0","0"],["0","1","1","0"],["1","1","0","0"]],[["0","1","0","1"],["0","1","0","1"],["0","1","0","1"],["0","1","0","1"],["0","1","0","1"],["0","1","0","1"]],[["0","1","0","1"],["0","1","0","1"],["0","1","0","1"],["0","1","0","1"],["0","1","0","1"],["0","1","0","1"]],[["0","0","1","1"],["1","0","0","1"],["0","0","1","1"],["0","1","0","1"],["1","0","0","1"],["0","1","0","1"]]],
}

有人知道根据关卡更改背景的简单方法吗？谢谢:)

Answer 1

你应该使用 CSS。 对于每个级别，您可以创建不同的 CSS 类。

例子:

.level1
{
    background-color: red;
}
.level2
{
    background-color: blue;
}