main.js

var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
    window.setTimeout(callback, 1000 / 60);
};

var canvas = document.createElement('canvas');
var width = 400;
var height = 600;
canvas.width = width;
canvas.height = height;
var context = canvas.getContext('2d');
var player = new Player();
var computer = new Computer();
var ball = new Ball(200, 300);

var keysDown = {};
var deviceOrientation = '';
var computerBallColor = '#fff';

var render = function() {
    context.fillStyle = '#88B550';
    context.fillRect(0, 0, width, height);
    player.render();
    computer.render();
    ball.render(computerBallColor);
};

var update = function() {
    player.update();
    computer.update(ball);
    ball.update(player.paddle, computer.paddle);
};

var step = function() {
    update();
    render();
    animate(step);
};

function Paddle(x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.x_speed = 0;
    this.y_speed = 0;
}

Paddle.prototype.render = function() {
    context.fillStyle = '#000';
    context.fillRect(this.x, this.y, this.width, this.height);
};

Paddle.prototype.move = function(x, y) {
    this.x += x;
    this.y += y;
    this.x_speed = x;
    this.y_speed = y;
    if (this.x < 0) {
        this.x = 0;
        this.x_speed = 0;
    } else if (this.x + this.width > 400) {
        this.x = 400 - this.width;
        this.x_speed = 0;
    }
};

function Computer() {
    this.paddle = new Paddle(175, 10, 50, 10);
}

Computer.prototype.render = function() {
    this.paddle.render();
};

Computer.prototype.update = function(ball) {
    var x_pos = ball.x;
    var diff = -((this.paddle.x + (this.paddle.width / 2)) - x_pos);
    if (diff < 0 && diff < -4) {
        diff = -5;
    } else if (diff > 0 && diff > 4) {
        diff = 5;
    }
    this.paddle.move(diff, 0);
    if (this.paddle.x < 0) {
        this.paddle.x = 0;
    } else if (this.paddle.x + this.paddle.width > 400) {
        this.paddle.x = 400 - this.paddle.width;
    }
};

function Player() {
    this.paddle = new Paddle(175, 580, 50, 10);
}

Player.prototype.render = function() {
    this.paddle.render();
};

Player.prototype.update = function() {
    for (var key in keysDown) {
        var value = Number(key);
        if (value == 37) {
            this.paddle.move(-4, 0);
        } else if (value == 39) {
            this.paddle.move(4, 0);
        } else {
            this.paddle.move(0, 0);
        }
    }

    if (deviceOrientation === 'left') {
        this.paddle.move(-4, 0);
        deviceOrientation = '';
    } else if (deviceOrientation === 'right') {
        this.paddle.move(4, 0);
    }
};

function Ball(x, y) {
    this.x = x;
    this.y = y;
    this.x_speed = 0;
    this.y_speed = 3;
}

Ball.prototype.render = function(computerBallColor) {
    context.beginPath();
    context.arc(this.x, this.y, 5, 2 * Math.PI, false);
    context.fillStyle = computerBallColor;
    context.fill();
};

Ball.prototype.update = function(paddle1, paddle2) {
    this.x += this.x_speed;
    this.y += this.y_speed;
    var top_x = this.x - 5;
    var top_y = this.y - 5;
    var bottom_x = this.x + 5;
    var bottom_y = this.y + 5;

    if (this.x - 5 < 0) {
        this.x = 5;
        this.x_speed = -this.x_speed;
    } else if (this.x + 5 > 400) {
        this.x = 395;
        this.x_speed = -this.x_speed;
    }

    if (this.y < 0 || this.y > 600) {
        this.x_speed = 0;
        this.y_speed = 3;
        this.x = 200;
        this.y = 300;
    }

    if (top_y > 300) {
        if (top_y < (paddle1.y + paddle1.height) && bottom_y > paddle1.y && top_x < (paddle1.x + paddle1.width) && bottom_x > paddle1.x) {
            this.y_speed = -3;
            this.x_speed += (paddle1.x_speed / 2);
            this.y += this.y_speed;
        }
    } else {
        if (top_y < (paddle2.y + paddle2.height) && bottom_y > paddle2.y && top_x < (paddle2.x + paddle2.width) && bottom_x > paddle2.x) {
            this.y_speed = 3;
            this.x_speed += (paddle2.x_speed / 2);
            this.y += this.y_speed;
        }
    }
};

document.body.appendChild(canvas);
animate(step);

window.addEventListener('keydown', function(event) {
    keysDown[event.keyCode] = true;
});

window.addEventListener('keyup', function(event) {
    delete keysDown[event.keyCode];
});

// ------------------------------
// Device Orientation
// ------------------------------

window.addEventListener('deviceorientation', function(event) {
    if (event.gamma < -5) {
        deviceOrientation = 'left';
    } else if (event.gamma > 5) {
        deviceOrientation = 'right';
    } else {
        deviceOrientation = '';
    }
});

// ------------------------------
// Speech
// ------------------------------

if ('webkitSpeechRecognition' in window) {
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = true;
    recognition.interimResults = true;

    var speechRecognitionList = new webkitSpeechGrammarList();

    var grammar = '#JSGF V1.0; grammar cores; public <cor> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;';
    speechRecognitionList.addFromString(grammar, 1);

    recognition.grammars = speechRecognitionList;

    var recognizing;
    
    recognition.onstart = function() {
        recognizing = true;
        body.className += 'recognition-start';
        console.log('speech starting...');
        console.log('How do you say BLACK in Portuguese?');
    };

    recognition.onend = function() {
        recognizing = false;
        body.classList.remove('recognition-start');
    };

    recognition.onresult = function(event) {
        if (typeof(event.results) == 'undefined') {
            recognition.onend = null;
            recognition.stop();
        }

        var color = event.results[0][0].transcript;
        recognition.stop();

        if (color.trim() == 'Preto' || color.trim() == 'preto') {
            computerBallColor = '#000';
        } else if (color.trim() == 'Amarelo' || color.trim() == 'amarelo') {
            computerBallColor = '#FFFF00';
        } else if (color.trim() == 'Branco' || color.trim() == 'branco') {
            computerBallColor = '#FFFFFF';
        }
    };

} else {
    console.log("Não suporta speech.");
}


var body = document.getElementById('body'),
    button;

button = document.getElementById('btnSpeech').onclick = function() {
    if (recognizing) {
        recognition.stop();
    }
    recognition.start();
};