graphics, use express static, reorganize files/filders
graphics, use express static, reorganize files/filders

file:a/index.js -> file:b/index.js
--- a/index.js
+++ b/index.js
@@ -1,4 +1,5 @@
-var app = require('express')();
+var express = require('express');
+var app = express();
 var http = require('http').Server(app);
 var io = require('socket.io')(http);
 
@@ -8,9 +9,8 @@
 app.get('/play.html', function(req, res){
     res.sendFile(__dirname + '/public/play.html');
 });
-app.get('/public/pong.js', function(req, res){
-    res.sendFile(__dirname + '/public/pong.js');
-});
+
+app.use(express.static(__dirname + '/'));
 
 var users = [];
 

 Binary files /dev/null and b/public/img/background.jpg differ
 Binary files /dev/null and b/public/img/background2.jpg differ
 Binary files /dev/null and b/public/img/ball.png differ
 Binary files /dev/null and b/public/img/paddlel.png differ
 Binary files /dev/null and b/public/img/paddlep.png differ
--- a/public/index.html
+++ b/public/index.html
@@ -8,26 +8,26 @@
 </head>
 <body>
 <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
-<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
-<script type="text/javascript" src="public/pong.js"></script>
+<script type="text/javascript" src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
+<script type="text/javascript" src="/public/js/pong.js"></script>
 <div class="score"></div>
 
-<script>
-var socket = io();
-socket.emit('send:connect', 'game');
+<script type="text/javascript">
+    var socket = io();
+    socket.emit('send:connect', 'game');
 
-socket.on('send:message', function(msg){
-    console.log (msg);
-});
-socket.on('send:connect', function(msg){
-    console.log (msg);
-});
-socket.on('send:move', function(msg){
-    playersMove[msg.player] = msg.msg;
-});
-socket.on('users', function(msg){
-    console.log ('users : ' + msg);
-});
+    socket.on('send:message', function(msg){
+        console.log (msg);
+    });
+    socket.on('send:connect', function(msg){
+        console.log (msg);
+    });
+    socket.on('send:move', function(msg){
+        playersMove[msg.player] = msg.msg;
+    });
+    socket.on('users', function(msg){
+        console.log ('users : ' + msg);
+    });
 </script>
 
 </body>

file:b/public/js/pong.js (new)
--- /dev/null
+++ b/public/js/pong.js
@@ -1,1 +1,434 @@
-
+var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
+        window.setTimeout(callback, 1000 / 60)
+};
+var canvas = document.createElement("canvas");
+var width = 800;
+var height = 800;
+canvas.width = width;
+canvas.height = height;
+var context = canvas.getContext('2d');
+var player1 = new Player1();
+var player2 = new Player2();
+var player3 = new Player3();
+var player4 = new Player4();
+//var wall = new Wall();
+var ball = new Ball(400, 400);
+var score = new Score();
+
+var keysDown = {};
+var playersMove = {1:{},2:{},3:{},4:{}};
+var offset = {1:0,2:0,3:0,4:0};
+
+var image = new Image();
+image.src = '/public/img/ball.png';
+var paddleImageL = new Image();
+paddleImageL.src = '/public/img/paddlel.png';
+var paddleImageP = new Image();
+paddleImageP.src = '/public/img/paddlep.png';
+var backgroundImage = new Image();
+backgroundImage.src = '/public/img/background.jpg';
+var backgroundImage2 = new Image();
+backgroundImage2.src = '/public/img/background2.jpg';
+
+var render = function () {
+    context.drawImage(backgroundImage2, 0, 0);
+    player1.render();
+    player2.render();
+    player3.render();
+    player4.render();
+    //wall.render();
+
+    ball.render();
+    score.display();
+};
+
+var update = function () {
+    player1.update();
+    player2.update();
+    player3.update();
+    player4.update();
+    ball.update(player1.paddle, player2.paddle, player3.paddle, player4.paddle);
+};
+
+var step = function () {
+    update();
+    render();
+    animate(step);
+};
+
+function Paddle(x, y, width, height, orientation) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.x_speed = 0;
+    this.y_speed = 0;
+    this.orientation = orientation;
+}
+
+Paddle.prototype.render = function (player) {
+    if (this.orientation == 'l') {
+        context.drawImage(paddleImageL, this.x, this.y);
+    } else {
+        context.drawImage(paddleImageP, this.x, this.y);
+    }
+
+    //context.lineWidth=1;
+    context.fillStyle="#fff";
+    //context.lineStyle="#ffff00";
+    context.font="12px sans-serif";
+    context.textAlign="center";
+    if (player == 1) {
+        context.fillText("P1", this.x+50, this.y+15);
+    } else if (player == 2) {
+        context.fillText("P2", this.x+50, this.y+15);
+    } else if (player == 3) {
+        context.fillText("P3", this.x+12, this.y+50);
+    } else if (player == 4) {
+        context.fillText("P4", this.x+12, this.y+50);
+    }
+};
+
+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 > 800) {
+        this.x = 800 - this.width;
+        this.x_speed = 0;
+    } else if (this.y < 0) {
+        this.y = 0;
+        this.x_speed = 0;
+    } else if (this.y + this.height > 800) {
+        this.y = 800 - this.height;
+        this.y_speed = 0;
+    }
+};
+
+function Block(x, y, width, height) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.x_speed = 0;
+    this.y_speed = 0;
+}
+
+Block.prototype.render = function () {
+    context.fillStyle = "#5BA3E3";
+    context.fillRect(this.x, this.y, this.width, this.height);
+};
+
+function Player1() {
+    this.paddle = new Paddle(350, 765, 100, 25, 'l');
+}
+
+Player1.prototype.render = function () {
+    this.paddle.render(1);
+};
+
+Player1.prototype.update = function (move) {
+    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);
+        }
+    }
+    var y = playersMove[1].y;
+    if (y) {
+        offset = y / 10;
+        if (y <= -5) {
+            this.paddle.move(-4 + offset, 0);
+        } else if (y >= 5) {
+            this.paddle.move(4 + offset, 0);
+        } else {
+            this.paddle.move(0, 0);
+        }
+    }
+    //AI(this.paddle);
+};
+
+function Player2() {
+    this.paddle = new Paddle(350, 10, 100, 25, 'l');
+}
+
+Player2.prototype.render = function () {
+    this.paddle.render(2);
+};
+
+Player2.prototype.update = function () {
+    for (var key in keysDown) {
+        var value = Number(key);
+        if (value == 90) {
+            this.paddle.move(-4, 0);
+        } else if (value == 67) {
+            this.paddle.move(4, 0);
+        } else {
+            this.paddle.move(0, 0);
+        }
+    }
+    var y = playersMove[2].y;
+    if (y) {
+        offset = y / 10;
+        if (y <= -5) {
+            this.paddle.move(-4 + offset, 0);
+        } else if (y >= 5) {
+            this.paddle.move(4 + offset, 0);
+        } else {
+            this.paddle.move(0, 0);
+        }
+    }
+    //AI(this.paddle);
+};
+
+function Player3() {
+    this.paddle = new Paddle(10, 350, 25, 100, 'p');
+}
+
+Player3.prototype.render = function () {
+    this.paddle.render(3);
+};
+
+Player3.prototype.update = function () {
+    for (var key in keysDown) {
+        var value = Number(key);
+        if (value == 38) {
+            this.paddle.move(0, -4);
+        } else if (value == 40) {
+            this.paddle.move(0, 4);
+        } else {
+            this.paddle.move(0, 0);
+        }
+    }
+    var y = playersMove[3].y;
+    if (y) {
+        offset = y / 10;
+        if (y <= -5) {
+            this.paddle.move(-4 + offset, 0);
+        } else if (y >= 5) {
+            this.paddle.move(4 + offset, 0);
+        } else {
+            this.paddle.move(0, 0);
+        }
+    }
+    //AI2(this.paddle);
+};
+
+function Player4() {
+    this.paddle = new Paddle(765, 350, 25, 100, 'p');
+}
+
+Player4.prototype.render = function () {
+    this.paddle.render(4);
+};
+
+Player4.prototype.update = function () {
+    for (var key in keysDown) {
+        var value = Number(key);
+        if (value == 83) {
+            this.paddle.move(0, -4);
+        } else if (value == 88) {
+            this.paddle.move(0, 4);
+        } else {
+            this.paddle.move(0, 0);
+        }
+    }
+    var y = playersMove[4].y;
+    if (y) {
+        offset = y / 10;
+        if (y <= -5) {
+            this.paddle.move(-4 + offset, 0);
+        } else if (y >= 5) {
+            this.paddle.move(4 + offset, 0);
+        } else {
+            this.paddle.move(0, 0);
+        }
+    }
+    //AI2(this.paddle);
+};
+
+function Score() {
+    this.players = [];
+    this.players[1] = {name: 'P1', score : 0};
+    this.players[2] = {name: 'P2', score : 0};
+    this.players[3] = {name: 'P3', score : 0};
+    this.players[4] = {name: 'P4', score : 0};
+}
+
+Score.prototype.increase = function (player) {
+    if (player == 1) {
+        this.players[1].score++;
+    } else if (player == 2) {
+        this.players[2].score++;
+    } else if (player == 3) {
+        this.players[3].score++;
+    } else if (player == 4) {
+        this.players[4].score++;
+    }
+    //console.log (this);
+    this.display();
+};
+
+Score.prototype.display = function () {
+    $('.score').html("");
+    for(player in this.players) {
+        $('.score').append(this.players[player].name + ':' + this.players[player].score + '<br />');
+    }
+}
+
+function Wall() {
+    this.wall = new Block(0, 560, 500, 10);
+}
+
+Wall.prototype.render = function () {
+    this.wall.render();
+};
+
+function Ball(x, y) {
+    this.x = x;
+    this.y = y;
+    this.x_speed = 0; //SpeedX();
+    this.y_speed = 3; //SpeedY();
+}
+
+Ball.prototype.render = function () {
+
+    context.drawImage(image, this.x-10, this.y-10);
+    context.beginPath();
+    context.arc(this.x, this.y, 10, 2 * Math.PI, false);
+    //context.strokeStyle = 'black';
+    //context.stroke();
+};
+
+Ball.prototype.update = function (paddle1, paddle2, paddle3, paddle4, wall) {
+    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 > 800) {
+        this.x = 795;
+        this.x_speed = -this.x_speed;
+    }
+
+    // reset ball
+    if (this.y < 0 || this.y > 800) {
+        if (this.y < 0) {
+            score.increase(2);
+        } else if (this.y > 800) {
+            score.increase(1);
+        }
+        this.x_speed = SpeedX();
+        this.y_speed = SpeedY();
+        this.x = 400;
+        this.y = 300;
+    } else if (this.x < 0 || this.x > 800) {
+        if (this.x < 0) {
+            score.increase(3);
+        } else if (this.x > 800) {
+            score.increase(4);
+        }
+        this.x_speed = SpeedX();
+        this.y_speed = SpeedY();
+        this.x = 400;
+        this.y = 300;
+    }
+
+    if (top_y > 700) {
+        if (top_y < (paddle1.y + paddle1.height) && bottom_y > paddle1.y && top_x < (paddle1.x + paddle1.width) && bottom_x > paddle1.x) {
+
+            this.y_speed = -SpeedX();
+            this.x_speed += (paddle1.x_speed / 2);
+            this.y += this.y_speed;
+        }
+    } else if (top_y < 100) {
+        if (top_y < (paddle2.y + paddle2.height) && bottom_y > paddle2.y && top_x < (paddle2.x + paddle2.width) && bottom_x > paddle2.x) {
+            this.y_speed = SpeedY();
+            this.x_speed += (paddle2.x_speed / 2);
+            this.y += this.y_speed;
+        }
+    }
+
+    if (top_x < 400) {
+        if (top_y < (paddle3.y + paddle3.height) && bottom_y > paddle3.y && top_x < (paddle3.x + paddle3.width) && bottom_x > paddle3.x) {
+            this.x_speed = SpeedX();
+            this.y_speed += (paddle3.y_speed / 2);
+            this.y += this.y_speed;
+        }
+    } else {
+        if (top_y < (paddle4.y + paddle4.height) && bottom_y > paddle4.y && top_x < (paddle4.x + paddle4.width) && bottom_x > paddle4.x) {
+            this.x_speed = -SpeedX();
+            this.y_speed += (paddle4.y_speed / 2);
+            this.y += this.y_speed;
+        }
+    }
+};
+
+function SpeedX()
+{
+    var arr = [3,3.5];
+    return arr[Math.floor(Math.random()*arr.length)];
+}
+
+function SpeedY()
+{
+    var arr = [3,3.5];
+    return arr[Math.floor(Math.random()*arr.length)];
+}
+
+function AI(paddle){
+    var x_pos = ball.x;
+    var diff = -((paddle.x + (paddle.width / 2)) - x_pos);
+    if (diff < 0 && diff < -4) {
+        diff = -5;
+    } else if (diff > 0 && diff > 4) {
+        diff = 5;
+    }
+    paddle.move(diff, 0);
+    if (paddle.x < 0) {
+        paddle.x = 0;
+    } else if (paddle.x + paddle.width > 800) {
+        paddle.x = 800 - paddle.width;
+    }
+}
+
+function AI2(paddle){
+    var y_pos = ball.y;
+    var diff = -((paddle.y + (paddle.width / 2)) - y_pos);
+    if (diff < 0 && diff < -4) {
+        diff = -5;
+    } else if (diff > 0 && diff > 4) {
+        diff = 5;
+    }
+    paddle.move(0, diff);
+    if (paddle.y < 0) {
+        paddle.y = 0;
+    } else if (paddle.y + paddle.height > 800) {
+        paddle.y = 800 - paddle.height;
+    }
+}
+
+document.body.appendChild(canvas);
+animate(step);
+
+window.addEventListener("keydown", function (event) {
+    keysDown[event.keyCode] = true;
+});
+
+window.addEventListener("keyup", function (event) {
+    delete keysDown[event.keyCode];
+});
+

file:a/public/pong.js (deleted)
--- a/public/pong.js
+++ /dev/null
@@ -1,400 +1,1 @@
-var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
-        window.setTimeout(callback, 1000 / 60)
-};
-var canvas = document.createElement("canvas");
-var width = 800;
-var height = 800;
-canvas.width = width;
-canvas.height = height;
-var context = canvas.getContext('2d');
-var player = new Player();
-var player2 = new Player2();
-var player3 = new Player3();
-var player4 = new Player4();
-//var wall = new Wall();
-//var computer = new Computer();
-var ball = new Ball(400, 400);
-var score = new Score();
 
-var debug = true;
-
-var keysDown = {};
-var playersMove = {1:{},2:{},3:{},4:{}};
-
-var render = function () {
-    context.fillStyle = "#EDF0CC";
-    context.fillRect(0, 0, width, height);
-    player.render();
-    player2.render();
-    player3.render();
-    player4.render();
-    //wall.render();
-
-    ball.render();
-    score.display();
-    //computer.render();
-};
-
-var update = function () {
-    player.update();
-    player2.update();
-    player3.update();
-    player4.update();
-    //computer.update(ball);
-    ball.update(player.paddle, player2.paddle, player3.paddle, player4.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 = "#7BA6E3";
-    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 > 800) {
-        this.x = 800 - this.width;
-        this.x_speed = 0;
-    } else if (this.y < 0) {
-        this.y = 0;
-        this.x_speed = 0;
-    } else if (this.y + this.height > 800) {
-        this.y = 800 - this.height;
-        this.y_speed = 0;
-    }
-};
-
-function Block(x, y, width, height) {
-    this.x = x;
-    this.y = y;
-    this.width = width;
-    this.height = height;
-    this.x_speed = 0;
-    this.y_speed = 0;
-}
-
-Block.prototype.render = function () {
-    context.fillStyle = "#5BA3E3";
-    context.fillRect(this.x, this.y, this.width, this.height);
-};
-
-/*
-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(350, 780, 100, 10);
-}
-
-Player.prototype.render = function () {
-    this.paddle.render();
-};
-
-Player.prototype.update = function (move) {
-    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);
-        }
-    }
-    var offset = playersMove[1].y / 10;
-    if (playersMove[1].y <= -8) {
-        this.paddle.move(-4 + offset, 0);
-    } else if (playersMove[1].y >= 8) {
-        this.paddle.move(4 + offset, 0);
-    } else {
-        this.paddle.move(0, 0);
-    }
-    //AI(this.paddle);
-};
-
-function Player2() {
-    this.paddle = new Paddle(350, 10, 100, 10);
-}
-
-Player2.prototype.render = function () {
-    this.paddle.render();
-};
-
-Player2.prototype.update = function () {
-    for (var key in keysDown) {
-        var value = Number(key);
-        if (value == 90) {
-            this.paddle.move(-4, 0);
-        } else if (value == 67) {
-            this.paddle.move(4, 0);
-        } else {
-            this.paddle.move(0, 0);
-        }
-    }
-    if (playersMove[2].y <= -5) {
-        this.paddle.move(-4, 0);
-    } else if (playersMove[2].y >= 5) {
-        this.paddle.move(4, 0);
-    } else {
-        this.paddle.move(0, 0);
-    }
-    //AI(this.paddle);
-};
-
-function Player3() {
-    this.paddle = new Paddle(10, 350, 10, 100);
-}
-
-Player3.prototype.render = function () {
-    this.paddle.render();
-};
-
-Player3.prototype.update = function () {
-    for (var key in keysDown) {
-        var value = Number(key);
-        if (value == 38) {
-            this.paddle.move(0, -4);
-        } else if (value == 40) {
-            this.paddle.move(0, 4);
-        } else {
-            this.paddle.move(0, 0);
-        }
-    }
-    //AI2(this.paddle);
-};
-
-function Player4() {
-    this.paddle = new Paddle(780, 350, 10, 100);
-}
-
-Player4.prototype.render = function () {
-    this.paddle.render();
-};
-
-Player4.prototype.update = function () {
-    for (var key in keysDown) {
-        var value = Number(key);
-        if (value == 83) {
-            this.paddle.move(0, -4);
-        } else if (value == 88) {
-            this.paddle.move(0, 4);
-        } else {
-            this.paddle.move(0, 0);
-        }
-    }
-    //AI2(this.paddle);
-};
-
-function Score() {
-    this.player1 = 0;
-    this.player2 = 0;
-    this.player3 = 0;
-    this.player4 = 0;
-}
-
-Score.prototype.increase = function (player) {
-    if (player == 1) {
-        this.player1++;
-    } else if (player == 2) {
-        this.player2++;
-    } else if (player == 3) {
-        this.player3++;
-    } else if (player == 4) {
-        this.player4++;
-    }
-    //console.log (this);
-    this.display();
-};
-
-Score.prototype.display = function () {
-    $('.score').html (this.player1 + ' / ' + this.player2 + ' / ' +  this.player3 + ' / ' + this.player4);
-}
-
-function Wall() {
-    this.wall = new Block(0, 560, 500, 10);
-}
-
-Wall.prototype.render = function () {
-    this.wall.render();
-};
-
-function Ball(x, y) {
-    this.x = x;
-    this.y = y;
-    this.x_speed = 0; //SpeedX();
-    this.y_speed = 3; //SpeedY();
-}
-
-Ball.prototype.render = function () {
-    context.beginPath();
-    context.arc(this.x, this.y, 5, 2 * Math.PI, false);
-    context.fillStyle = "#000000";
-    context.fill();
-};
-
-Ball.prototype.update = function (paddle1, paddle2, paddle3, paddle4, wall) {
-    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 > 800) {
-        this.x = 795;
-        this.x_speed = -this.x_speed;
-    }
-
-    // reset ball
-    if (this.y < 0 || this.y > 800) {
-        if (this.y < 0) {
-            score.increase(2);
-        } else if (this.y > 800) {
-            score.increase(1);
-        }
-        this.x_speed = SpeedX();
-        this.y_speed = SpeedY();
-        this.x = 400;
-        this.y = 300;
-    } else if (this.x < 0 || this.x > 800) {
-        if (this.x < 0) {
-            score.increase(3);
-        } else if (this.x > 800) {
-            score.increase(4);
-        }
-        this.x_speed = SpeedX();
-        this.y_speed = SpeedY();
-        this.x = 400;
-        this.y = 300;
-    }
-
-    if (top_y > 700) {
-        if (top_y < (paddle1.y + paddle1.height) && bottom_y > paddle1.y && top_x < (paddle1.x + paddle1.width) && bottom_x > paddle1.x) {
-
-            this.y_speed = -SpeedX();
-            this.x_speed += (paddle1.x_speed / 2);
-            this.y += this.y_speed;
-        }
-    } else if (top_y < 100) {
-        if (top_y < (paddle2.y + paddle2.height) && bottom_y > paddle2.y && top_x < (paddle2.x + paddle2.width) && bottom_x > paddle2.x) {
-            this.y_speed = SpeedY();
-            this.x_speed += (paddle2.x_speed / 2);
-            this.y += this.y_speed;
-        }
-    }
-
-    if (top_x < 400) {
-        if (top_y < (paddle3.y + paddle3.height) && bottom_y > paddle3.y && top_x < (paddle3.x + paddle3.width) && bottom_x > paddle3.x) {
-            this.x_speed = SpeedX();
-            this.y_speed += (paddle3.y_speed / 2);
-            this.y += this.y_speed;
-        }
-    } else {
-        if (top_y < (paddle4.y + paddle4.height) && bottom_y > paddle4.y && top_x < (paddle4.x + paddle4.width) && bottom_x > paddle4.x) {
-            this.x_speed = -SpeedX();
-            this.y_speed += (paddle4.y_speed / 2);
-            this.y += this.y_speed;
-        }
-    }
-};
-
-function SpeedX()
-{
-    var arr = [3,3.5];
-    return arr[Math.floor(Math.random()*arr.length)];
-}
-
-function SpeedY()
-{
-    var arr = [3,3.5];
-    return arr[Math.floor(Math.random()*arr.length)];
-}
-
-function AI(paddle){
-    var x_pos = ball.x;
-    var diff = -((paddle.x + (paddle.width / 2)) - x_pos);
-    if (diff < 0 && diff < -4) {
-        diff = -5;
-    } else if (diff > 0 && diff > 4) {
-        diff = 5;
-    }
-    paddle.move(diff, 0);
-    if (paddle.x < 0) {
-        paddle.x = 0;
-    } else if (paddle.x + paddle.width > 800) {
-        paddle.x = 800 - paddle.width;
-    }
-}
-
-function AI2(paddle){
-    var y_pos = ball.y;
-    var diff = -((paddle.y + (paddle.width / 2)) - y_pos);
-    if (diff < 0 && diff < -4) {
-        diff = -5;
-    } else if (diff > 0 && diff > 4) {
-        diff = 5;
-    }
-    paddle.move(0, diff);
-    if (paddle.y < 0) {
-        paddle.y = 0;
-    } else if (paddle.y + paddle.height > 800) {
-        paddle.y = 800 - paddle.height;
-    }
-}
-
-document.body.appendChild(canvas);
-animate(step);
-
-window.addEventListener("keydown", function (event) {
-    keysDown[event.keyCode] = true;
-});
-
-window.addEventListener("keyup", function (event) {
-    delete keysDown[event.keyCode];
-});
-

comments