JavaScript - Canvas - Controlling Animations with the Keyboard(BOUNCING OFF THE WALLS, CONTROLLING THE SPEED, FLEXIBLE CONTROLS)

Javascript for Kids

開発環境

• OS X El Capitan - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• jQuery (Library)
• Safari(Web browser)

Javascript for Kids (Nick Morgan 著、Angus Croll 寄稿、Miran Lipovaca イラスト、No Starch Press)のPart 3(Canvas)、Chapter 15(Controlling Animations with the Keyboard)、PROGRAMMING CHALLENGES、#1, #2, #3:BOUNCING OFF THE WALLS, CONTROLLING THE SPEED, FLEXIBLE CONTROLS(No. 4339)を取り組んでみる。

PROGRAMMING CHALLENGES、#1, #2, #3:BOUNCING OFF THE WALLS, CONTROLLING THE SPEED, FLEXIBLE CONTROLS(No. 4339)

コード(Emacs)

<canvas id="canvas0" width="650" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="ball.js"></script>

var canvas = document.querySelector('#canvas0'),
    ctx = canvas.getContext('2d'),
    width = canvas.width,
    height = canvas.height,
    circle,
    Ball,
    ball,
    keyActions,
    speeds;

circle = function (x, y, radius, fillCircle) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
    if (fillCircle) {
        ctx.fill();
    } else {
        ctx.stroke();
    }
};
Ball = function () {
    this.x = width / 2;
    this.y = height / 2;
    this.speed = 5;
    this.xSpeed = this.speed;
    this.ySpeed = 0;
    this.radius = 10;
};
Ball.prototype.move = function () {
    this.x += this.xSpeed;
    this.y += this.ySpeed;

    if (this.x < 0) {        
        this.xSpeed *= -1;
    } else if (this.x > width) {
        this.xSpeed *= -1;
    } else if (this.y < 0) {
        this.ySpeed *= -1;
    } else if (this.y > height) {
        this.ySpeed *= -1;
    }
};
Ball.prototype.draw = function () {
    circle(this.x, this.y, this.radius, true);
};
keyActions = {
    32: 'stop',
    37: 'left',
    38: 'up',
    39: 'right',
    40: 'down',
};
Ball.prototype.setDirection = function (direction) {
    if (direction === 'up') {
        this.xSpeed = 0;
        this.ySpeed = -this.speed;
    } else if (direction === 'down') {
        this.xSpeed = 0;
        this.ySpeed = this.speed;
    } else if (direction === 'left') {
        this.xSpeed = -this.speed;
        this.ySpeed = 0;
    } else if (direction === 'right') {
        this.xSpeed = this.speed;
        this.ySpeed = 0;
    } else if (direction === 'stop') {
        this.xSpeed = 0;
        this.ySpeed = 0;
    }
};
speeds = {
    49: 1,
    50: 2,
    51: 3,
    52: 4,
    53: 5,
    54: 6,
    55: 7,
    56: 8,
    57: 9,
};
Ball.prototype.setSpeed = function(speed) {
    if (speed < 1 || 100 < speed) {
        return;
    }
    this.speed = speed;
    if (this.xSpeed < 0) {
        this.xSpeed = -this.speed;
    } else if (this.xSpeed > 0) {
        this.xSpeed = this.speed;
    } else if (this.ySpeed < 0) {
        this.ySpeed = -this.speed;
    } else if (this.ySpeed > 0) {
        this.ySpeed = this.ySpeed;
    }
};
controls = {
    67: 'c',
    86: 'v',    
    88: 'x',
    90: 'z',
};
Ball.prototype.setControl = function (control) {
    if (control === 'z') {
        this.setSpeed(this.speed * 0.8);
    } else if (control === 'x') {
        this.setSpeed(this.speed * 1.2);
    } else if (control === 'c') {
        if (this.radius > 1) {
            this.radius -= 0.5;
        }
    } else if (control === 'v') {
        this.radius += 0.5;
    }
};
ball = new Ball();

$('body').keydown(function (event) {
    var direction = keyActions[event.keyCode],
        speed = speeds[event.keyCode],
        control = controls[event.keyCode];

    console.log(event.keyCode);
    if (direction !== undefined) {        
        ball.setDirection(direction);
    }
    if (speed !== undefined) {
        ball.setSpeed(speed);
    }
    if (control !== undefined) {
        ball.setControl(control);
    }
});

setInterval(function () {
    ctx.clearRect(0, 0, width, height);
    
    ball.draw();
    ball.move();
    ctx.strokeRect(0, 0, width, height);    
}, 30);