implemented sounds master
implemented sounds

module.exports = function(grunt) { module.exports = function(grunt) {
   
grunt.initConfig({ grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), pkg: grunt.file.readJSON('package.json'),
concat: { concat: {
options: { options: {
separator: ';' separator: ';'
}, },
dist: { dist: {
src: ['bower_components/jquery/dist/jquery.min.js', 'bower_components/socket.io-client/socket.io.js', 'public/js/*.js', 'bower_components/bootstrap/dist/js/bootstrap.min.js'], src: ['bower_components/jquery/dist/jquery.min.js', 'bower_components/socket.io-client/socket.io.js', 'public/js/*.js', 'bower_components/bootstrap/dist/js/bootstrap.min.js'],
dest: 'dist/<%= pkg.name %>.js' dest: 'dist/<%= pkg.name %>.js'
} }
}, },
uglify: { uglify: {
options: { options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
}, },
dist: { dist: {
files: { files: {
'dist/js/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>'] 'dist/js/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
} }
} }
}, },
cssmin: { cssmin: {
dist: { dist: {
options: { options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
}, },
files: { files: {
'dist/css/<%= pkg.name %>.min.css': ['bower_components/bootstrap/dist/css/bootstrap.min.css', 'public/css/*.css'] 'dist/css/<%= pkg.name %>.min.css': ['bower_components/bootstrap/dist/css/bootstrap.min.css', 'public/css/*.css']
} }
} }
}, },
  copy: {
  main: {
  files: [
  {expand: true, cwd: 'public/', src: ['audio/*.ogg'], dest: 'dist/'},
  ],
  },
  },
jshint: { jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'], files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: { options: {
globals: { globals: {
jQuery: true, jQuery: true,
console: true, console: true,
module: true, module: true,
document: true document: true
} }
} }
}, },
watch: { watch: {
files: ['<%= jshint.files %>'], files: ['<%= jshint.files %>'],
tasks: ['jshint'] tasks: ['jshint']
} }
}); });
   
grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-copy');
   
//grunt.registerTask('test', ['jshint']); //grunt.registerTask('test', ['jshint']);
   
grunt.registerTask('default', [/*'jshint', */'concat', 'uglify', 'cssmin']); grunt.registerTask('default', [/*'jshint', */'concat', 'uglify', 'cssmin', 'copy']);
}; };
{ {
"name": "pong-4-players", "name": "pong-4-players",
"version": "0.0.1", "version": "0.0.1",
"description": "play pong with your mobile phone as controller", "description": "play pong with your mobile phone as controller",
"dependencies": { "dependencies": {
"express": "4.10.2", "express": "4.10.2",
"socket.io": "1.2.0" "socket.io": "1.2.0"
  },
  "devDependencies": {
  "grunt-contrib-concat": "^0.5.1",
  "grunt-contrib-copy": "^0.8.2",
  "grunt-contrib-cssmin": "^0.14.0",
  "grunt-contrib-jshint": "^0.12.0",
  "grunt-contrib-uglify": "^0.11.0",
  "grunt-contrib-watch": "^0.6.1"
} }
} }
   
 Binary files /dev/null and b/public/audio/hit.ogg differ
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<meta content='IE=edge' http-equiv='X-UA-Compatible'> <meta content='IE=edge' http-equiv='X-UA-Compatible'>
<meta content='width=device-width,initial-scale=1' name='viewport'> <meta content='width=device-width,initial-scale=1' name='viewport'>
<title>Pong 4</title> <title>Pong 4</title>
<script type="text/javascript" src="/js/pong-4-players.min.js"></script> <script type="text/javascript" src="/js/pong-4-players.min.js"></script>
<link rel="stylesheet" href="/css/pong-4-players.min.css"> <link rel="stylesheet" href="/css/pong-4-players.min.css">
</head> </head>
<body> <body>
   
<nav class="navbar navbar-inverse navbar-fixed-top"> <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="#">Pong 4</a> <a class="navbar-brand" href="#">Pong 4</a>
</div> </div>
</div> </div>
</nav> </nav>
   
  <audio preload="true" id="hitSound">
  <source src="/audio/hit.ogg" />
  </audio>
   
<div class="container"> <div class="container">
<br /><br /><br /><br /> <br /><br /><br /><br />
<div class="row"> <div class="row">
<div class="col-xs-12 col-sm-12 col-md-8"> <div class="col-xs-12 col-sm-12 col-md-8">
<div class="game"></div> <div class="game"></div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-4"> <div class="col-xs-12 col-sm-12 col-md-4">
<h1>Score</h1> <h1>Score</h1>
<p class="score lead"></p> <p class="score lead"></p>
<p>Scan to play</p> <p>Scan to play</p>
<p class="play"></p> <p class="play"></p>
<p class="player"></p> <p class="player"></p>
</div> </div>
</div> </div>
</div><!-- /.container --> </div><!-- /.container -->
   
<script type="text/javascript"> <script type="text/javascript">
var socket = io(); var socket = io();
socket.emit('send:connect', 'game'); socket.emit('send:connect', 'game');
   
socket.on('send:message', function(msg){ socket.on('send:message', function(msg){
console.log (msg); console.log (msg);
}); });
socket.on('send:connect', function(msg){ socket.on('send:connect', function(msg){
console.log (msg); console.log (msg);
}); });
socket.on('send:connected', function(player){ socket.on('send:connected', function(player){
$('.player').append(player.username + ' = ' + player.index); $('.player').append(player.username + ' = ' + player.index);
currentPlayer = player.index; currentPlayer = player.index;
}); });
   
// mobile // mobile
socket.on('send:move', function(msg){ socket.on('send:move', function(msg){
playersMove[msg.player] = msg.msg; playersMove[msg.player] = msg.msg;
}); });
socket.on('send:startgame', function(msg){ socket.on('send:startgame', function(msg){
startGame = true; startGame = true;
}); });
socket.on('send:player', function(player){ socket.on('send:player', function(player){
playersData[player.index] = {username: player.username, score : 0}; playersData[player.index] = {username: player.username, score : 0};
$('.player').append(player.username + ' = ' + player.index); $('.player').append(player.username + ' = ' + player.index);
}); });
   
// tmp // tmp
var data = {type:'player', username:'P' + Math.random(1, 10000)}; var data = {type:'player', username:'P' + Math.random(1, 10000)};
socket.emit('send:connect', data); socket.emit('send:connect', data);
   
socket.on('send:moves', function(msg){ socket.on('send:moves', function(msg){
if (msg.player == 1) { if (msg.player == 1) {
player1.move(msg.x, msg.y); player1.move(msg.x, msg.y);
} else if (msg.player == 2) { } else if (msg.player == 2) {
player2.move(msg.x, msg.y); player2.move(msg.x, msg.y);
} else if (msg.player == 3) { } else if (msg.player == 3) {
player3.move(msg.x, msg.y); player3.move(msg.x, msg.y);
} else if (msg.player == 4) { } else if (msg.player == 4) {
player4.move(msg.x, msg.y); player4.move(msg.x, msg.y);
} }
}); });
   
socket.on('send:syncball', function(msg){ socket.on('send:syncball', function(msg){
ball.sync(msg.x, msg.y); ball.sync(msg.x, msg.y);
}); });
   
socket.on('send:hitball', function(msg){ socket.on('send:hitball', function(msg){
ball.hit(msg.x_speed, msg.y_speed); ball.hit(msg.x_speed, msg.y_speed);
}); });
   
socket.on('disconnect', function(){ socket.on('disconnect', function(){
playersData[player.index].bot = true; playersData[player.index].bot = true;
}); });
</script> </script>
   
</body> </body>
</html> </html>
var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60) window.setTimeout(callback, 1000 / 60)
}; };
var canvas = document.createElement("canvas"); var canvas = document.createElement("canvas");
var width = 800; var width = 800;
var height = 800; var height = 800;
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
var startGame = false; var startGame = false;
var player1 = new Player1(); var player1 = new Player1();
var player2 = new Player2(); var player2 = new Player2();
var player3 = new Player3(); var player3 = new Player3();
var player4 = new Player4(); var player4 = new Player4();
var ball = new Ball(400, 400); var ball = new Ball(400, 400);
   
var currentPlayer = 0; var currentPlayer = 0;
var playersData = {1:{},2:{},3:{},4:{}}; var playersData = {1:{},2:{},3:{},4:{}};
var score = new Score(); var score = new Score();
   
var keysDown = {}; var keysDown = {};
var playersMove = {1:{},2:{},3:{},4:{}}; var playersMove = {1:{},2:{},3:{},4:{}};
var offset = {1:0,2:0,3:0,4:0}; var offset = {1:0,2:0,3:0,4:0};
var rand = 0; var rand = 0;
   
  var hitSound;
   
var graphics = { var graphics = {
ball: {src: '/img/ball.png', instance: null}, ball: {src: '/img/ball.png', instance: null},
paddleL: {src: '/img/paddlel.png', instance: null}, paddleL: {src: '/img/paddlel.png', instance: null},
paddleP: {src: '/img/paddlep.png', instance: null}, paddleP: {src: '/img/paddlep.png', instance: null},
background: {src: '/img/background2.jpg', instance: null} background: {src: '/img/background2.jpg', instance: null}
}; };
for (graph in graphics) { for (graph in graphics) {
graphics[graph].instance = new Image(); graphics[graph].instance = new Image();
graphics[graph].instance.src = graphics[graph].src; graphics[graph].instance.src = graphics[graph].src;
} }
   
var render = function () { var render = function () {
context.drawImage(graphics['background'].instance, 0, 0); context.drawImage(graphics['background'].instance, 0, 0);
player1.render(); player1.render();
player2.render(); player2.render();
player3.render(); player3.render();
player4.render(); player4.render();
   
ball.render(); ball.render();
score.display(); score.display();
}; };
   
var update = function () { var update = function () {
player1.update(); player1.update();
player2.update(); player2.update();
player3.update(); player3.update();
player4.update(); player4.update();
if (startGame == true) { if (startGame == true) {
ball.update(player1.paddle, player2.paddle, player3.paddle, player4.paddle); ball.update(player1.paddle, player2.paddle, player3.paddle, player4.paddle);
} }
}; };
   
var step = function () { var step = function () {
update(); update();
render(); render();
animate(step); animate(step);
}; };
   
function Paddle(x, y, width, height, player) { function Paddle(x, y, width, height, player) {
this.x = x; this.x = x;
this.y = y; this.y = y;
this.width = width; this.width = width;
this.height = height; this.height = height;
this.x_speed = 0; this.x_speed = 0;
this.y_speed = 0; this.y_speed = 0;
this.player = player; this.player = player;
} }
   
Paddle.prototype.render = function () { Paddle.prototype.render = function () {
if (this.player == 1 || this.player == 2) { if (this.player == 1 || this.player == 2) {
context.drawImage(graphics['paddleL'].instance, this.x, this.y); context.drawImage(graphics['paddleL'].instance, this.x, this.y);
} else { } else {
context.drawImage(graphics['paddleP'].instance, this.x, this.y); context.drawImage(graphics['paddleP'].instance, this.x, this.y);
} }
   
context.fillStyle="#fff"; context.fillStyle="#fff";
context.font="12px sans-serif"; context.font="12px sans-serif";
context.textAlign="center"; context.textAlign="center";
if (this.player == 1) { if (this.player == 1) {
context.fillText("P1", this.x+50, this.y+15); context.fillText("P1", this.x+50, this.y+15);
} else if (this.player == 2) { } else if (this.player == 2) {
context.fillText("P2", this.x+50, this.y+15); context.fillText("P2", this.x+50, this.y+15);
} else if (this.player == 3) { } else if (this.player == 3) {
context.fillText("P3", this.x+12, this.y+50); context.fillText("P3", this.x+12, this.y+50);
} else if (this.player == 4) { } else if (this.player == 4) {
context.fillText("P4", this.x+12, this.y+50); context.fillText("P4", this.x+12, this.y+50);
} }
}; };
   
Paddle.prototype.move = function (x, y) { Paddle.prototype.move = function (x, y) {
this.x += x; this.x += x;
this.y += y; this.y += y;
this.x_speed = x; this.x_speed = x;
this.y_speed = y; this.y_speed = y;
if (this.x < 0) { if (this.x < 0) {
this.x = 0; this.x = 0;
this.x_speed = 0; this.x_speed = 0;
} else if (this.x + this.width > 800) { } else if (this.x + this.width > 800) {
this.x = 800 - this.width; this.x = 800 - this.width;
this.x_speed = 0; this.x_speed = 0;
} else if (this.y < 0) { } else if (this.y < 0) {
this.y = 0; this.y = 0;
this.x_speed = 0; this.x_speed = 0;
} else if (this.y + this.height > 800) { } else if (this.y + this.height > 800) {
this.y = 800 - this.height; this.y = 800 - this.height;
this.y_speed = 0; this.y_speed = 0;
} }
}; };
   
function Player1() { function Player1() {
this.paddle = new Paddle(350, 765, 100, 25, 1); this.paddle = new Paddle(350, 765, 100, 25, 1);
} }
   
Player1.prototype.render = function () { Player1.prototype.render = function () {
this.paddle.render(); this.paddle.render();
}; };
   
Player1.prototype.update = function () { Player1.prototype.update = function () {
for (var key in keysDown) { for (var key in keysDown) {
var value = Number(key); var value = Number(key);
if (value == 37) { if (value == 37) {
this.paddle.move(-4, 0); this.paddle.move(-4, 0);
socket.emit('send:moves', {player : 1, x:-4, y:0}); socket.emit('send:moves', {player : 1, x:-4, y:0});
} else if (value == 39) { } else if (value == 39) {
this.paddle.move(4, 0); this.paddle.move(4, 0);
socket.emit('send:moves', {player : 1, x:4, y:0}); socket.emit('send:moves', {player : 1, x:4, y:0});
} else { } else {
this.paddle.move(0, 0); this.paddle.move(0, 0);
socket.emit('send:moves', {player : 1, x:0, y:0}); socket.emit('send:moves', {player : 1, x:0, y:0});
} }
} }
var y = playersMove[1].y; var y = playersMove[1].y;
if (y) { if (y) {
offset = y / 10; offset = y / 10;
if (y <= -5) { if (y <= -5) {
this.paddle.move(-4 + offset, 0); this.paddle.move(-4 + offset, 0);
} else if (y >= 5) { } else if (y >= 5) {
this.paddle.move(4 + offset, 0); this.paddle.move(4 + offset, 0);
} else { } else {
this.paddle.move(0, 0); this.paddle.move(0, 0);
} }
} }
if (playersData[1].bot == true) { if (playersData[1].bot == true) {
AI(this.paddle); AI(this.paddle);
} }
}; };
   
Player1.prototype.move = function (x, y) { Player1.prototype.move = function (x, y) {
this.paddle.move(x, y); this.paddle.move(x, y);
} }
   
function Player2() { function Player2() {
this.paddle = new Paddle(350, 10, 100, 25, 2); this.paddle = new Paddle(350, 10, 100, 25, 2);
} }
   
Player2.prototype.render = function () { Player2.prototype.render = function () {
this.paddle.render(); this.paddle.render();
}; };
   
Player2.prototype.update = function () { Player2.prototype.update = function () {
for (var key in keysDown) { for (var key in keysDown) {
var value = Number(key); var value = Number(key);
if (value == 90) { if (value == 90) {
this.paddle.move(-4, 0); this.paddle.move(-4, 0);
socket.emit('send:moves', {player : 2, x:-4, y:0}); socket.emit('send:moves', {player : 2, x:-4, y:0});
} else if (value == 67) { } else if (value == 67) {
this.paddle.move(4, 0); this.paddle.move(4, 0);
socket.emit('send:moves', {player : 2, x:4, y:0}); socket.emit('send:moves', {player : 2, x:4, y:0});
} else { } else {
this.paddle.move(0, 0); this.paddle.move(0, 0);
socket.emit('send:moves', {player : 2, x:0, y:0}); socket.emit('send:moves', {player : 2, x:0, y:0});
} }
} }
var y = playersMove[2].y; var y = playersMove[2].y;
if (y) { if (y) {
offset = y / 10; offset = y / 10;
if (y <= -5) { if (y <= -5) {
this.paddle.move(-4 + offset, 0); this.paddle.move(-4 + offset, 0);
} else if (y >= 5) { } else if (y >= 5) {
this.paddle.move(4 + offset, 0); this.paddle.move(4 + offset, 0);
} else { } else {
this.paddle.move(0, 0); this.paddle.move(0, 0);
} }
} }
if (playersData[2].bot == true) { if (playersData[2].bot == true) {
AI(this.paddle); AI(this.paddle);
} }
}; };
   
Player2.prototype.move = function (x, y) { Player2.prototype.move = function (x, y) {
this.paddle.move(x, y); this.paddle.move(x, y);
} }
   
function Player3() { function Player3() {
this.paddle = new Paddle(10, 350, 25, 100, 3); this.paddle = new Paddle(10, 350, 25, 100, 3);
} }
   
Player3.prototype.render = function () { Player3.prototype.render = function () {
this.paddle.render(); this.paddle.render();
}; };
   
Player3.prototype.update = function () { Player3.prototype.update = function () {
for (var key in keysDown) { for (var key in keysDown) {
var value = Number(key); var value = Number(key);
if (value == 38) { if (value == 38) {
this.paddle.move(0, -4); this.paddle.move(0, -4);
socket.emit('send:moves', {player : 3, x:0, y:-4}); socket.emit('send:moves', {player : 3, x:0, y:-4});
} else if (value == 40) { } else if (value == 40) {
this.paddle.move(0, 4); this.paddle.move(0, 4);
socket.emit('send:moves', {player : 3, x:0, y:4}); socket.emit('send:moves', {player : 3, x:0, y:4});
} else { } else {
this.paddle.move(0, 0); this.paddle.move(0, 0);
socket.emit('send:moves', {player : 3, x:0, y:0}); socket.emit('send:moves', {player : 3, x:0, y:0});
} }
} }
var y = playersMove[3].y; var y = playersMove[3].y;
if (y) { if (y) {
offset = y / 10; offset = y / 10;
if (y <= -5) { if (y <= -5) {
this.paddle.move(0, -4 + offset); this.paddle.move(0, -4 + offset);
} else if (y >= 5) { } else if (y >= 5) {
this.paddle.move(0, 4 + offset); this.paddle.move(0, 4 + offset);
} else { } else {
this.paddle.move(0, 0); this.paddle.move(0, 0);
} }
} }
//if (playersData[3].bot == true) { //if (playersData[3].bot == true) {
AI2(this.paddle); AI2(this.paddle);
//} //}
}; };
   
Player3.prototype.move = function (x, y) { Player3.prototype.move = function (x, y) {
this.paddle.move(x, y); this.paddle.move(x, y);
} }
   
function Player4() { function Player4() {
this.paddle = new Paddle(765, 350, 25, 100, 4); this.paddle = new Paddle(765, 350, 25, 100, 4);
} }
   
Player4.prototype.render = function () { Player4.prototype.render = function () {
this.paddle.render(); this.paddle.render();
}; };
   
Player4.prototype.update = function () { Player4.prototype.update = function () {
for (var key in keysDown) { for (var key in keysDown) {
var value = Number(key); var value = Number(key);
if (value == 83) { if (value == 83) {
this.paddle.move(0, -4); this.paddle.move(0, -4);
socket.emit('send:moves', {player : 4, x:0, y:-4}); socket.emit('send:moves', {player : 4, x:0, y:-4});
} else if (value == 88) { } else if (value == 88) {
this.paddle.move(0, 4); this.paddle.move(0, 4);
socket.emit('send:moves', {player : 4, x:0, y:4}); socket.emit('send:moves', {player : 4, x:0, y:4});
} else { } else {
this.paddle.move(0, 0); this.paddle.move(0, 0);
socket.emit('send:moves', {player : 4, x:0, y:0}); socket.emit('send:moves', {player : 4, x:0, y:0});
} }
} }
var y = playersMove[4].y; var y = playersMove[4].y;
if (y) { if (y) {
offset = y / 10; offset = y / 10;
if (y <= -5) { if (y <= -5) {
this.paddle.move(0, -4 + offset); this.paddle.move(0, -4 + offset);
} else if (y >= 5) { } else if (y >= 5) {
this.paddle.move(0, 4 + offset); this.paddle.move(0, 4 + offset);
} else { } else {
this.paddle.move(0, 0); this.paddle.move(0, 0);
} }
} }
//if (playersData[4].bot == true) { //if (playersData[4].bot == true) {
AI2(this.paddle); AI2(this.paddle);
//} //}
}; };
   
Player4.prototype.move = function (x, y) { Player4.prototype.move = function (x, y) {
this.paddle.move(x, y); this.paddle.move(x, y);
} }
   
function Score() { function Score() {
playersData[1] = {username: 'None', score : 0}; playersData[1] = {username: 'None', score : 0};
playersData[2] = {username: 'None', score : 0}; playersData[2] = {username: 'None', score : 0};
playersData[3] = {username: 'None', score : 0}; playersData[3] = {username: 'None', score : 0};
playersData[4] = {username: 'None', score : 0}; playersData[4] = {username: 'None', score : 0};
} }
   
Score.prototype.increase = function (player) { Score.prototype.increase = function (player) {
playersData[player].score++; playersData[player].score++;
this.display(); this.display();
}; };
   
Score.prototype.display = function () { Score.prototype.display = function () {
$('.score').html(""); $('.score').html("");
for(player in playersData) { for(player in playersData) {
$('.score').append(playersData[player].username + ' - ' + playersData[player].score + '<br />'); $('.score').append(playersData[player].username + ' - ' + playersData[player].score + '<br />');
} }
} }
   
function Ball(x, y) { function Ball(x, y) {
this.width = 20; this.width = 20;
this.height = 20; this.height = 20;
this.x = x - 10; this.x = x - 10;
this.y = y - 10; this.y = y - 10;
this.x_speed = 3; this.x_speed = 3;
this.y_speed = 0; this.y_speed = 0;
} }
   
Ball.prototype.render = function () { Ball.prototype.render = function () {
context.drawImage(graphics['ball'].instance, this.x, this.y); context.drawImage(graphics['ball'].instance, this.x, this.y);
//context.beginPath(); //context.beginPath();
//context.arc(this.x, this.y, 10, 2 * Math.PI, false); //context.arc(this.x, this.y, 10, 2 * Math.PI, false);
}; };
   
var run = true; var run = true;
Ball.prototype.update = function (paddle1, paddle2, paddle3, paddle4) { Ball.prototype.update = function (paddle1, paddle2, paddle3, paddle4) {
this.x += this.x_speed; this.x += this.x_speed;
this.y += this.y_speed; this.y += this.y_speed;
var top_x = this.x - 10; var top_x = this.x - 10;
var top_y = this.y - 10; var top_y = this.y - 10;
var bottom_x = this.x + 10; var bottom_x = this.x + 10;
var bottom_y = this.y + 10; var bottom_y = this.y + 10;
   
// vertical walls // vertical walls
if (this.x - 5 < 0) { if (this.x - 5 < 0) {
this.x = 5; this.x = 5;
this.x_speed = -this.x_speed; this.x_speed = -this.x_speed;
} else if (this.x + 5 > 800) { } else if (this.x + 5 > 800) {
this.x = 795; this.x = 795;
this.x_speed = -this.x_speed; this.x_speed = -this.x_speed;
} }
   
// reset ball // reset ball
if (this.y < 0 || this.y > 800) { if (this.y < 0 || this.y > 800) {
if (this.y < 0) { if (this.y < 0) {
score.increase(2); score.increase(2);
} else if (this.y > 800) { } else if (this.y > 800) {
score.increase(1); score.increase(1);
} }
this.x_speed = SpeedX(); this.x_speed = SpeedX();
this.y_speed = SpeedY(); this.y_speed = SpeedY();
this.x = 400; this.x = 400;
this.y = 300; this.y = 300;
var rand = 0; var rand = 0;
} else if (this.x < 0 || this.x > 800) { } else if (this.x < 0 || this.x > 800) {
if (this.x < 0) { if (this.x < 0) {
score.increase(3); score.increase(3);
} else if (this.x > 800) { } else if (this.x > 800) {
score.increase(4); score.increase(4);
} }
this.x_speed = SpeedX(); this.x_speed = SpeedX();
this.y_speed = SpeedY(); this.y_speed = SpeedY();
this.x = 400; this.x = 400;
this.y = 300; this.y = 300;
var rand = 0; var rand = 0;
} }
   
if (top_y > 700) { if (top_y > 700) {
if (this.checkCollision(this, paddle1)) { if (this.checkCollision(this, paddle1)) {
//if (currentPlayer == 1) { //if (currentPlayer == 1) {
  playHitSound();
socket.emit('send:hitball', {x_speed:(paddle1.x_speed / 1.5) + randMove(), y_speed:-SpeedY()}); socket.emit('send:hitball', {x_speed:(paddle1.x_speed / 1.5) + randMove(), y_speed:-SpeedY()});
//} //}
} }
} else if (top_y < 100) { } else if (top_y < 100) {
if (this.checkCollision(this, paddle2)) { if (this.checkCollision(this, paddle2)) {
//if (currentPlayer == 2) { //if (currentPlayer == 2) {
  playHitSound();
socket.emit('send:hitball', {x_speed:(paddle2.x_speed / 1.5) + randMove(), y_speed:SpeedY()}); socket.emit('send:hitball', {x_speed:(paddle2.x_speed / 1.5) + randMove(), y_speed:SpeedY()});
//} //}
} }
} }
   
if (top_x < 100) { if (top_x < 100) {
if (this.checkCollision(this, paddle3)) { if (this.checkCollision(this, paddle3)) {
//if (currentPlayer == 3) { //if (currentPlayer == 3) {
  playHitSound();
socket.emit('send:hitball', {x_speed:SpeedX(), y_speed:(paddle3.y_speed / 1.5) + randMove()}); socket.emit('send:hitball', {x_speed:SpeedX(), y_speed:(paddle3.y_speed / 1.5) + randMove()});
//} //}
} }
} else if (top_x > 700) { } else if (top_x > 700) {
if (this.checkCollision(this, paddle4)) { if (this.checkCollision(this, paddle4)) {
  playHitSound();
socket.emit('send:hitball', {x_speed:-SpeedX(), y_speed:(paddle4.y_speed / 1.5) + randMove()}); socket.emit('send:hitball', {x_speed:-SpeedX(), y_speed:(paddle4.y_speed / 1.5) + randMove()});
} }
} }
x = this.x; x = this.x;
y = this.y; y = this.y;
if (run) { if (run) {
setTimeout(function(){ setTimeout(function(){
socket.emit('send:syncball', {x:x, y:y}); socket.emit('send:syncball', {x:x, y:y});
run = true; run = true;
}, 500); }, 500);
run = false; run = false;
}; };
}; };
   
Ball.prototype.checkCollision = function (object1, object2) { Ball.prototype.checkCollision = function (object1, object2) {
if (object1.x < object2.x + object2.width && object1.x + object1.width > object2.x && if (object1.x < object2.x + object2.width && object1.x + object1.width > object2.x &&
object1.y < object2.y + object2.height && object1.y + object1.height > object2.y ) { object1.y < object2.y + object2.height && object1.y + object1.height > object2.y ) {
return true; return true;
} else { } else {
return false; return false;
} }
} }
   
Ball.prototype.hit = function (x_speed, y_speed) { Ball.prototype.hit = function (x_speed, y_speed) {
this.x_speed = x_speed; this.x_speed = x_speed;
this.y_speed = y_speed; this.y_speed = y_speed;
} }
   
Ball.prototype.sync = function (x, y) { Ball.prototype.sync = function (x, y) {
this.x = x; this.x = x;
this.y = y; this.y = y;
} }
   
function SpeedX() function SpeedX()
{ {
var arr = [3,3.5,4]; var arr = [3,3.5,4];
return arr[Math.floor(Math.random()*arr.length)]; return arr[Math.floor(Math.random()*arr.length)];
} }
   
function SpeedY() function SpeedY()
{ {
var arr = [3,3.5,4]; var arr = [3,3.5,4];
return arr[Math.floor(Math.random()*arr.length)]; return arr[Math.floor(Math.random()*arr.length)];
} }
   
function AI(paddle){ function AI(paddle){
var x_pos = ball.x; var x_pos = ball.x;
var diff = -((paddle.x + (paddle.width / 2)) - x_pos); var diff = -((paddle.x + (paddle.width / 2)) - x_pos);
if (diff < 0 && diff < -4) { if (diff < 0 && diff < -4) {
diff = -4; diff = -4;
} else if (diff > 0 && diff > 4) { } else if (diff > 0 && diff > 4) {
diff = 4; diff = 4;
} }
paddle.move(diff, 0); paddle.move(diff, 0);
if (paddle.x < 0) { if (paddle.x < 0) {
paddle.x = 0; paddle.x = 0;
} else if (paddle.x + paddle.width > 800) { } else if (paddle.x + paddle.width > 800) {
paddle.x = 800 - paddle.width; paddle.x = 800 - paddle.width;
} }
} }
   
function AI2(paddle){ function AI2(paddle){
var y_pos = ball.y; var y_pos = ball.y;
var diff = -((paddle.y + (paddle.width / 1.2)) - y_pos); var diff = -((paddle.y + (paddle.width / 1.2)) - y_pos);
if (diff < 0 && diff < -4) { if (diff < 0 && diff < -4) {
diff = -4; diff = -4;
} else if (diff > 0 && diff > 4) { } else if (diff > 0 && diff > 4) {
diff = 4; diff = 4;
} }
paddle.move(0, diff); paddle.move(0, diff);
if (paddle.y < 0) { if (paddle.y < 0) {
paddle.y = 0; paddle.y = 0;
} else if (paddle.y + paddle.height > 800) { } else if (paddle.y + paddle.height > 800) {
paddle.y = 800 - paddle.height; paddle.y = 800 - paddle.height;
} }
} }
   
//document.body.appendChild(canvas); //document.body.appendChild(canvas);
$(function(){ $(function(){
$('.game').html(canvas); $('.game').html(canvas);
$('<img />', {src:'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Click to play http://' + window.location.host + '/play.html'}).appendTo('.play'); $('<img />', {src:'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Click to play http://' + window.location.host + '/play.html'}).appendTo('.play');
  hitSound = document.getElementById("hitSound");
}); });
animate(step); animate(step);
   
function randMove() function randMove()
{ {
return rand+=0.2; return rand+=0.2;
  }
   
  function playHitSound() {
  hitSound.pause();
  hitSound.currentTime = 0;
  hitSound.play();
} }
   
window.addEventListener("keydown", function (event) { window.addEventListener("keydown", function (event) {
//event.preventDefault(); //event.preventDefault();
keysDown[event.keyCode] = true; keysDown[event.keyCode] = true;
}); });
   
window.addEventListener("keyup", function (event) { window.addEventListener("keyup", function (event) {
event.preventDefault(); event.preventDefault();
delete keysDown[event.keyCode]; delete keysDown[event.keyCode];
}); });
   
comments