## 課題: ゲームオーバーシーンの作成
## タスク:
ゲームオーバーシーンを作成します。
"Game Over"というテキストを中心に配置してください。
## ヒント
Sceneクラス(gameOverScene)と
Labelクラス(GOlabel)
を使用して、ゲームオーバーシーンとテキストを作成します。
## 使用コード
Labelクラス(GOlabel)の画面の中心
GOlabel.x = (SIZE - GOlabel.width) / 2;
GOlabel.y = (SIZE - GOlabel.height) / 2;
### 開始コード:
enchant();
document.onkeyup = function (e) {
core.press = false;
return true;
};
function keyPress(key) {
var press = false;
if(key && !core.press) {
core.press = true;
press = true;
}
return press;
}
window.onload = function() {
const SIZE = 640;
const FPS = 60;
const MOVE = 50;
const MOVE_SIZE = (SIZE - (SIZE % MOVE)) - MOVE;
const PADDLE = "res/paddle.png";
const BALL = "res/ball.png";
const BRICK = "res/brick.png";
core = new Core(SIZE, SIZE);
core.preload(PADDLE, BALL, BRICK);
core.fps = FPS;
core.onload = function() {
var rootScene = new Scene();
rootScene.backgroundColor = 'black';
core.pushScene(rootScene);
rootScene.on('enterframe', function() {
if(keyPress(core.input.Space)) {
core.pushScene(playScene); // Change replaceScene to pushScene
}
});
var gameStartLabel = new Label("Game Start");
gameStartLabel.color = 'white';
gameStartLabel.font = '48px sans-serif';
gameStartLabel.x = (SIZE - gameStartLabel.width) / 2;
gameStartLabel.y = (SIZE - gameStartLabel.height) / 2;
rootScene.addChild(gameStartLabel);
var playScene = new Scene();
playScene.backgroundColor = 'black';
playScene.on("enter", function() {
for(var i = 0; i < 6; i++) {
for(var j = 0; j < 5; j++) {
var brick = new Brick(i*110, j*55);
playScene.addChild(brick);
bricks.push(brick);
}
}
});
var paddle = new Sprite(200, 20);
paddle.image = core.assets[PADDLE];
paddle.x = (SIZE - paddle.width * paddle.scaleX ) / 2 ;
paddle.y = 500
playScene.addChild(paddle);
paddle.on("enterframe", function() {
if(keyPress(core.input.Left)) {
this.x -= MOVE;
if(this.x <= 0) {
this.x = 0;
}
}
if(keyPress(core.input.Right)) {
this.x += MOVE;
if(this.x >= MOVE_SIZE) {
this.x = MOVE_SIZE;
}
}
});
var ball = new Sprite(50, 50);
ball.x = (SIZE - ball.width * ball.scaleX) / 2;
ball.y = (SIZE - ball.height * ball.scaleY) / 2;
ball.image = core.assets[BALL];
ball.dx = 3;
ball.dy = -3;
playScene.addChild(ball);
ball.on("enterframe", function() {
this.x += this.dx;
this.y += this.dy;
if(this.x < 0 || this.x > SIZE-this.width) {
this.dx *= -1;
}
if(this.y < 0) {
this.dy *= -1;
}
if(this.y > SIZE-this.height) {
core.pushScene(gameOverScene);
}
// Check if ball is touching top of paddle
if(this.intersect(paddle) && this.dy > 0) {
let offset = this.x - paddle.x;
let tolerance = paddle.width * paddle.scaleX * 0.1; // 10% of the paddle width is added as tolerance
if(offset >= -tolerance && offset <= paddle.width * paddle.scaleX + tolerance) {
let diff = this.x - (paddle.x + paddle.width / 2);
let normDiff = diff / (paddle.width / 2);
this.dx = 3 * normDiff;
this.dy *= -1;
}
}
playScene.childNodes.forEach(function(node) {
if(node instanceof Brick) {
if(ball.intersect(node)) {
ball.dy *= -1;
playScene.removeChild(node);
let index = bricks.indexOf(node);
if (index > -1) {
bricks.splice(index, 1);
}
}
}
});
if (bricks.length === 0) {
core.pushScene(gameOverScene);
}
});
var Brick = Class.create(Sprite,{
initialize: function(x, y){
Sprite.call(this,50,50);
this.image = core.assets[BRICK];
this.x = x;
this.y = y;
}
});
}
core.start();
}
<details>
<summary>解答</summary>
enchant();
document.onkeyup = function (e) {
core.press = false;
return true;
};
function keyPress(key) {
var press = false;
if(key && !core.press) {
core.press = true;
press = true;
}
return press;
}
window.onload = function() {
const SIZE = 640;
const FPS = 60;
const MOVE = 50;
const MOVE_SIZE = (SIZE - (SIZE % MOVE)) - MOVE;
const PADDLE = "res/paddle.png";
const BALL = "res/ball.png";
const BRICK = "res/brick.png";
core = new Core(SIZE, SIZE);
core.preload(PADDLE, BALL, BRICK);
core.fps = FPS;
core.keybind(37, "Left");
core.keybind(39, "Right");
core.keybind(32, "Space"); // Add space key binding
core.onload = function() {
let bricks = [];
var rootScene = new Scene();
rootScene.backgroundColor = 'black';
core.pushScene(rootScene);
rootScene.on('enterframe', function() {
if(keyPress(core.input.Space)) {
core.pushScene(playScene); // Change replaceScene to pushScene
}
});
var gameStartLabel = new Label("Game Start");
gameStartLabel.color = 'white';
gameStartLabel.font = '48px sans-serif';
gameStartLabel.x = (SIZE - gameStartLabel.width) / 2;
gameStartLabel.y = (SIZE - gameStartLabel.height) / 2;
rootScene.addChild(gameStartLabel);
var playScene = new Scene();
playScene.backgroundColor = 'black';
playScene.on("enter", function() {
for(var i = 0; i < 6; i++) {
for(var j = 0; j < 5; j++) {
var brick = new Brick(i*110, j*55);
playScene.addChild(brick);
bricks.push(brick);
}
}
});
var paddle = new Sprite(200, 20);
paddle.image = core.assets[PADDLE];
paddle.x = (SIZE - paddle.width * paddle.scaleX ) / 2 ;
paddle.y = 500
playScene.addChild(paddle);
paddle.on("enterframe", function() {
if(keyPress(core.input.Left)) {
this.x -= MOVE;
if(this.x <= 0) {
this.x = 0;
}
}
if(keyPress(core.input.Right)) {
this.x += MOVE;
if(this.x >= MOVE_SIZE) {
this.x = MOVE_SIZE;
}
}
});
var ball = new Sprite(50, 50);
ball.x = (SIZE - ball.width * ball.scaleX) / 2;
ball.y = (SIZE - ball.height * ball.scaleY) / 2;
ball.image = core.assets[BALL];
ball.dx = 3;
ball.dy = -3;
playScene.addChild(ball);
ball.on("enterframe", function() {
this.x += this.dx;
this.y += this.dy;
if(this.x < 0 || this.x > SIZE-this.width) {
this.dx *= -1;
}
if(this.y < 0) {
this.dy *= -1;
}
if(this.y > SIZE-this.height) {
core.pushScene(gameOverScene);
}
// Check if ball is touching top of paddle
if(this.intersect(paddle) && this.dy > 0) {
let offset = this.x - paddle.x;
let tolerance = paddle.width * paddle.scaleX * 0.1; // 10% of the paddle width is added as tolerance
if(offset >= -tolerance && offset <= paddle.width * paddle.scaleX + tolerance) {
let diff = this.x - (paddle.x + paddle.width / 2);
let normDiff = diff / (paddle.width / 2);
this.dx = 3 * normDiff;
this.dy *= -1;
}
}
playScene.childNodes.forEach(function(node) {
if(node instanceof Brick) {
if(ball.intersect(node)) {
ball.dy *= -1;
playScene.removeChild(node);
let index = bricks.indexOf(node);
if (index > -1) {
bricks.splice(index, 1);
}
}
}
});
if (bricks.length === 0) {
core.pushScene(gameOverScene);
}
});
var Brick = Class.create(Sprite,{
initialize: function(x, y){
Sprite.call(this,50,50);
this.image = core.assets[BRICK];
this.x = x;
this.y = y;
}
});
var gameOverScene = new Scene();
gameOverScene.backgroundColor = 'black';
var GOlabel = new Label();
GOlabel.x = (SIZE - GOlabel.width) / 2;
GOlabel.y = (SIZE - GOlabel.height) / 2;
GOlabel.font = '40px Hiragino';
GOlabel.text = "GAME OVER";
GOlabel.color = 'white';
gameOverScene.addChild(GOlabel);
}
core.start();
}
</details>