2017 1-2期 の Programming Trainingのやつ

breakout.js

window.addEventListener('DOMContentLoaded', function () {
    console.log('breakout.js loaded!');
    // 実装
    class Paddle {
        constructor() {
            this.x = 240;
            this.y = 600;
        }

        draw(context) {
            context.save();

            context.fillStyle = 'royalblue';
            context.translate(this.x, this.y);
            context.fillRect(-50, -5, 100, 10);

            context.restore();
        }

        move() {
            if (isDownRight && !isDownLeft) {
                this.x += 5;
                if (this.x + 50 >= 480) {
                    this.x = 480 - 50;
                }
            } else if (isDownLeft && !isDownRight) {
                this.x -= 5;
                if (this.x - 50 <= 0) {
                    this.x = 50;
                }
            }
        }

        get left() {
            return this.x - 50;
        }

        get top() {
            return this.y - 5;
        }

        get right() {
            return this.x + 50;
        }

        get bottom() {
            return this.y + 5;
        }
    }

    class Ball {
        constructor() {
            this.x = 320;
            this.y = 320;
            this.dx = 2;
            this.dy = -2;
        }

        draw(context) {
            context.save();

            context.fillStyle = '#e85298';
            context.translate(this.x, this.y);
            context.beginPath();
            context.arc(0, 0, 5, 0, 2 * Math.PI);
            context.fill();

            context.restore();
        }

        move() {
            this.x += this.dx;
            this.y += this.dy;

            //右の壁に当たった判定
            const right = this.x + 5;
            if (right > 480) {
                this.x -= right - 480;
                this.dx *= -1;
            }
            //上の壁に当たった判定
            const top = this.y - 5;
            if (top < 0) {
                this.y -= top;
                this.dy *= -1;
            }
            //左の壁に当たった判定
            const left = this.x - 5;
            if (left < 0) {
                this.x -= left;
                this.dx *= -1;
            }

            //Paddleとの当たった判定
            if (right >= paddle.left && left <= paddle.right) {
                const bottom = this.y + 5;
                const beforeBottom = bottom - this.dy;
                if (beforeBottom <= paddle.top && bottom >= paddle.top) {
                    this.y -= bottom - paddle.top;
                    this.dy *= -1;
                }
            }
        }
    }

    class Block {
        constructor(x, y, color) {
            this.x = x;
            this.y = y;
            this.color = color;
        }

        draw(context) {
            context.save();

            context.fillStyle = this.color;
            context.translate(this.x, this.y);
            context.fillRect(-25, 10, 50, 20);

            context.restore();
        }
    }

    const colors = [
        '#f39700',
        '#e60012',
        '#9caeb7',
        '#00a7db',
        '#009944',
        '#d7c447',
        '#9b7cb6',
        '#00ada9',
        '#bb641d',
    ];

    function getRandomColor() {
        let i = parseInt(Math.random() * colors.length);
        return colors[i];
    }

    const canvas = document.getElementById('display');
    const context = canvas.getContext('2d');
    const paddle = new Paddle();
    const ball = new Ball();
    const blocks = [];
    let isDownLeft = false;
    let isDownRight = false;

    setInterval(function () {
        context.clearRect(0, 0, 480, 640);
        ball.move();
        ball.draw(context);
        paddle.move();
        paddle.draw(context);
        blocks.forEach(function (block) {
            block.draw(context);
        });
    }, 1000 / 60);
    document.addEventListener('keydown', function (evt) {
        if (evt.keyCode === 37) {
            // 左キー
            isDownLeft = true;
        } else if (evt.keyCode === 39) {
            // 右キー
            isDownRight = true;
        }
    });
    document.addEventListener('keyup', function (evt) {
        if (evt.keyCode === 37) {
            // 左キー
            isDownLeft = false;
        } else if (evt.keyCode === 39) {
            // 右キー
            isDownRight = false;
        }
    });

    // お試しコード
    for (let xOffset = 40; xOffset < 480; xOffset += 50) {
        blocks.unshift(
            new Block(xOffset, 25, getRandomColor()));
    }
});