-1
我試圖將p5.js腳本居中放置在頁面中間。我試圖用一個div包裹它，定心，但它不工作居中包含腳本的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;
}
}
對不起，糟糕的格式，我這裏是新的
什麼是在snakegame.js？ –
我認爲你的代碼應該圍繞你的#game div。有沒有可能您的JavaScript文件不會將內容添加到該div，而是添加到其他元素（如body）？您可以使用瀏覽器開發工具檢查遊戲內容是否在您的元素中。 – dading84
@ R.Mazarei我編輯了主要問題 –