---
# System prepended metadata

title: enchant.js 小テスト3-4
tags: [enchant.js 小テスト]

---

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