Question

我正在尝试将p5.js脚本放在页面中间。我尝试用div包装它，并以中心为中心，但它不起作用

 <body>
    <div id="game"><script src="snakegame.js" type="text/javascript"></script></div>

    <div id="score_wrap"><h1 class="score">SCORE: <div id="score"></div></h1></div> 
    <div id="hscore_wrap"><h1 class="score">HI-SCORE: <div id="hiscore"></div></h1></div>     
</body>

这就是我试图做的事情

#game {
  width: 900px;
  height: 900px;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.score {
  font-family: "Bungee", sans-serif;
  float: left;
  color: #fff;
}

#score_wrap {
  float: left;
}

#hscore_wrap {
  float: right;
}

body {
  background-color : #1048a3;
}

这是内部的snakegame.js：

var s;
var scl = 20;
var food;
var pkeyCode = '';

// MAIN CODE FOR THE GAME
function setup() {
  frameRate(9);
  createCanvas(600, 600);
  s = new Snake();
  pickLocation();
}

function pickLocation () {
  var cols = floor(width/scl);
  var rows = floor(height/scl);
  food = createVector(floor(random(cols)), floor(random(rows)));
  food.mult(scl);

}

function draw() {
  background(51);
  s.update();
  s.show();
  if(s.eat(food)) {
      s.score += 1;
      if(s.score >= s.hiscore) s.hiscore = s.score;
      pickLocation();  
  }

  fill(255, 40, 100);
  rect(food.x, food.y, scl, scl);
 }

  function keyPressed() {
    if(keyCode === UP_ARROW && pkeyCode != 'DOWN_ARROW'){
        s.dir(0, -1);
        pkeyCode = 'UP_ARROW';
    } else if (keyCode === DOWN_ARROW && pkeyCode != 'UP_ARROW'){
        s.dir(0, 1);
        pkeyCode = 'DOWN_ARROW';
    } else if (keyCode === RIGHT_ARROW && pkeyCode != 'LEFT_ARROW'){
        s.dir(1, 0);
        pkeyCode = 'RIGHT_ARROW';
    } else if (keyCode === LEFT_ARROW && pkeyCode != 'RIGHT_ARROW'){
        s.dir(-1, 0);
      pkeyCode = 'LEFT_ARROW';
    } /* else if (keyCode === ENTER){
        console.log('Cheating');
        s.total++;
        s.score++;
    } */
  }



// FUNCTIONS RELATING TO THE SNAKE, AND SNAKE PARTS ARE DEFINED HERE
function Snake() {
  this.score = 0;
  this.hiscore = 0;
  this.x = 20;
  this.y = 20;
  this.xspeed = 1;
  this.yspeed = 0;
  this.total = 0;
  this.tail = [];

  this.dir = function(x, y) {
      this.xspeed = x;
      this.yspeed = y;
  }

  this.eat = function(pos) {
      var d = dist(this.x, this.y, pos.x, pos.y);
      if(d < 1) {
          this.total++;
          return true;   
      }
      else {
          return false;
      }
  }

  this.dying = function() {
      this.total = 0;
      this.tail = [];
      this.score = 0;
      this.x = scl*3;
      this.y = scl*3;
  }

  this.death = function() {
      for (var i = 0; i < this.tail.length; i++) {
          var pos = this.tail[i];
          var d = dist(this.x, this.y, pos.x, pos.y);
          if (d < 1) {
              this.dying();
          }
    }
    if(this.x >= width || this.y >= height) {
        this.dying();
    } else if (this.x < 0 || this.y < 0) {
        this.dying();
    }
}

this.update = function() {
    for (var i = 0; i < this.tail.length - 1; i++) {
        this.tail[i] = this.tail[i + 1];
    }
    this.tail[this.total - 1] = createVector(this.x, this.y);

    this.x += this.xspeed*scl;
    this.y += this.yspeed*scl;

    s.death();

    this.x = constrain(this.x, 0, width-scl);
    this.y = constrain(this.y, 0, height-scl);

}

this.show = function() {
    fill(200, 255, 200);
    for (var i = 0; i < this.total; i++){
        rect(this.tail[i].x, this.tail[i].y, scl, scl);

    }
    fill(255, 255, 255);
    rect(this.x, this.y, scl, scl);
    document.getElementById("score").innerHTML = this.score;
    document.getElementById("hiscore").innerHTML = this.hiscore;
  }


}

抱歉格式糟糕，我是新来的

Answer 1

这是你的意思吗？

我设置边框以便您可以看到它，因为 js文件未在此处加载

我还

将得分评论包装在div中，以便在更广泛的屏幕上播放得很好

#game {
  width: 900px;
  height: 900px;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid white;
}
.scorecontainer {
  max-width: 900px;
  margin: 0 auto
}
.score {
  font-family: "Bungee", sans-serif;
  color: #fff;
}
#score {
  float: left;
}
#hiscore {
  float: right;
}
body {
  background-color: #1048a3;
}

<body>
  <div id="game">
    <script src="snakegame.js" type="text/javascript"></script>
  </div>
  <div class="scorecontainer score">
    <h1 id="score">SCORE: </h1>
    <h1 id="hiscore">HI-SCORE: </h1>
  </div>
</body>

将包含脚本的div居中

1 个答案: