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#*页面时都会调用。您可以添加其他配置设置：

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

似乎是这里的共识。

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

3 个答案: