## 課題: ゲームオーバーシーンの作成 ## タスク: ゲームオーバーシーンを作成します。 "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>