根據游戲javascript的級別更改背景圖像？

Question

因此，我正在構建一個水管游戲，可以在這里http://www.mckenziedave.co.uk/client_files/gabi_pipes/看到，我認為id是發布它而不是解釋它。

我正在使用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;
}

Answer 2

我可以考慮一些其他方法，具體取決於您的其余代碼。

1）當級別改變時，在主體上設置一個類。

JS

document.getElementsByTagName('body')[0].className = 'level-whatever';

的CSS

body.level-whatever {
    background: do-what-you-want
}

2）只需使用JS更改背景。

var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url("whatever-url")';

Answer 3

我注意到您的main.js具有以下配置：

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

每次您訪問不同的arcade.html#*頁面時arcade.html#*被調用。 您可能會添加其他配置設置：

background: level*,

並在此基礎上進行更改。 老實說，這是一個相當廣泛的問題，它有許多不同的方法來完成當前的任務。 根據您的級別應用CSS規則（如下所示）：

var currentLevel = parseInt(window.location.hash.substring(1)) || 1;

if(currentLevel == 1){
  $("body").addClass("last-level");
  $("body").style(...);
} // Use as a Case Statement or have an array of level backgrounds, etc

似乎是這里的共識。