initial commit
initial commit

file:b/.gitignore (new)
--- /dev/null
+++ b/.gitignore
@@ -1,1 +1,2 @@
+node_modules
 

file:b/index.js (new)
--- /dev/null
+++ b/index.js
@@ -1,1 +1,52 @@
+var app = require('express')();
+var http = require('http').Server(app);
+var io = require('socket.io')(http);
 
+app.get('/', function(req, res){
+    res.sendFile(__dirname + '/public/index.html');
+});
+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');
+});
+
+var users = [];
+
+io.on('connection', function(socket){
+    var player;
+    socket.on('send:message', function(msg){
+        io.emit('send:message', msg + ' player');
+    });
+    socket.on('send:connect', function(connection){
+        player = users.length;
+        if (connection == 'player' && player < 4) {
+            users.push(socket);
+            io.emit('send:connect', 'connected users :' + users.length);
+            console.log ('connected users ' + users.length);
+            console.log ('connected player ' + player);
+        } else if (connection == 'game') {
+            // to disconnect users on refresh
+            users = [];
+        }
+    });
+    socket.on('disconnect', function () {
+        socket.emit('send:disconnected', users.length);
+        var index = users.indexOf(socket);
+        users.splice(index, 1);
+        if (player) {
+            console.log ('disconnected player ' + player);
+        }
+    });
+
+    socket.on('send:move', function(msg){
+        io.emit('send:move', {player : player, msg : msg});
+        //console.log ('moved player' + player);
+    });
+});
+
+http.listen(3000, function(){
+    console.log('listening on *:3000');
+});
+

file:b/package.json (new)
--- /dev/null
+++ b/package.json
@@ -1,1 +1,10 @@
+{
+  "name": "pong-4-players",
+  "version": "0.0.1",
+  "description": "play pong with your mobile phone as controller",
+  "dependencies": {
+    "express": "4.10.2",
+    "socket.io": "1.2.0"
+  }
+}
 

file:b/public/index.html (new)
--- /dev/null
+++ b/public/index.html
@@ -1,1 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='utf-8'>
+<meta content='IE=edge' http-equiv='X-UA-Compatible'>
+<meta content='width=device-width,initial-scale=1' name='viewport'>
+<title>Pong 4</title>
+</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>
+<div class="score"></div>
 
+<script>
+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);
+});
+</script>
+
+</body>
+</html>

file:b/public/play.html (new)
--- /dev/null
+++ b/public/play.html
@@ -1,1 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='utf-8'>
+<meta content='IE=edge' http-equiv='X-UA-Compatible'>
+<meta content='width=device-width,initial-scale=1' name='viewport'>
+<title>Pong 4</title>
+</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">
+    var socket = io();
+    socket.emit('send:connect', 'player');
+</script>
 
+<script type="text/javascript">
+   if (window.DeviceOrientationEvent) {
+        window.addEventListener("deviceorientation", function(event) {
+            var y = Math.round(event.beta);
+            var x = Math.round(event.gamma);
+            socket.emit('send:move', {x:x, y:y});
+        });
+    };
+</script>
+
+</body>
+</html>

file:b/public/pong.js (new)
--- /dev/null
+++ b/public/pong.js
@@ -1,1 +1,400 @@
-
+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