-1
私は、ページの中央にp5.jsスクリプトを集中させようとしています。スクリプトを含むdivを中心にする
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;
}
}
#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;
}
を実行しようとしました何であるの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>
動作しませんみました
ひどい書式設定には申し訳ありませんが、私はここに新しいです
snakegame.jsには何ですか？ –
あなたの#game divを中心にするべきだと思います。 JavaScriptファイルがそのdivにコンテンツを追加するのではなく、本文のような別の要素にコンテンツを追加することは可能でしょうか？ブラウザの開発者ツールを調べて、ゲームコンテンツが要素内にあることを確認することができます。 – dading84
@ R.Mazarei私は主な質問を編集しました –