Feature fun

public/js/app.js

@@ -44,8 +44,16 @@ var app = {
 				this.context.font = node.size+'px serif';
   				this.context.fillText(node.text, node.x, node.y);
 			}else {
-				this.context.fillStyle = node.color;
-				this.context.fillRect(node.x, node.y, node.width, node.height);
+				if(node.isball) {
+					this.context.fillStyle = node.color;
+					this.context.beginPath();
+					this.context.arc(node.x, node.y, node.r, 0, Math.PI * 2);
+					this.context.closePath();
+					this.context.fill()
+				}else {
+					this.context.fillStyle = node.color;
+					this.context.fillRect(node.x, node.y, node.width, node.height);
+				}
 			}
 		}
 

public/js/modules/module.js

@@ -3,7 +3,7 @@
 class Player {
     constructor(id,app,color,playerNum) {
         this.initialY = app.height/2
-        this.speed = 5
+        this.speed = 8
         this.move = {
             up : false,
             down : false
@@ -52,21 +52,20 @@ class Player {
     getNode() { return this.node }
 }
 
-
-// Node ball class
-class Ball {
+// Node RoundBall class
+class RoundBall {
     constructor(id,app,color) {
         this.ref = app
-        this.speed = 6
-        this.velocityX = 6
-        this.velocityY = 6
+        this.speed = 10
+        this.velocityX = 7
+        this.velocityY = 7
         this.initial = {
             id : id,
-            width  : app.width/30,
-            height : app.height/25,
+            r : 15, // Ball Radius
             x  : app.width/2,
             y  : app.height/2,
-            color  : color
+            color  : color,
+            isball: true
         }
         app.nodes.push(this.initial)
         this.node = app.getNode(this.initial.id)
@@ -86,7 +85,9 @@ class Ball {
         }
         this.node.x = this.ref.width/2
         this.node.y = this.ref.height/2
-        this.speed = 6
+        this.speed = 10
+        this.velocityX = 7
+        this.velocityY = 7
         this.velocityX = -this.velocityX
     }
 
@@ -97,7 +98,7 @@ class Ball {
         }
 
         // Change the ball direction when collide with top and botton border
-        if(this.node.y + (this.node.height/2) > this.ref.height || this.node.y - (this.node.height/2) < 0) {
+        if(this.node.y + this.node.r > this.ref.height || this.node.y - this.node.r < 0) {
             this.velocityY = -this.velocityY
         }
 
@@ -114,6 +115,7 @@ class Ball {
     getNode() { return this.node }
 }
 
+
 // Node text class
 class Text {
     constructor(id,x,y,size,text,app) {
@@ -135,4 +137,43 @@ class Text {
     }
 
     getText() { return this.node } // Return text node
+}
+
+
+// Node Net class
+class Net {
+    constructor(id,app,color) {
+        this.initial = {
+            id : id,
+            width  : 20,
+            height : app.height,
+            x  : app.width/2 - (10),
+            y  : 0,
+            color  : color
+        }
+        app.nodes.push(this.initial)
+        this.node = app.getNode(this.initial.id)
+    }
+}
+
+// Sound Class
+class Sound {
+    constructor(src,loop) {
+        this.sound = document.createElement("audio");
+        this.sound.src = src;
+        this.sound.setAttribute("preload", "auto");
+        this.sound.setAttribute("controls", "none");
+        this.sound.setAttribute("loop", loop)
+        this.sound.style.display = "none";
+        document.body.appendChild(this.sound);
+    }
+
+    play() {
+        this.sound.play()
+    }
+
+    pause() {
+        this.sound.pause()
+        this.sound.currentTime = 0
+    }
 }

public/js/modules/start.js

@@ -9,19 +9,29 @@ app.height = window.innerHeight
 document.body.scrollTop = 0; // <-- pull the page back up to the top
 document.body.style.overflow = 'hidden'; // <-- relevant addition
 
+var net = new Net('net',app,'orange')
+
 var PlayerOne = new Player('player-one',app,'blue',1)
 var PlayerTwo = new Player('player-two',app,'red',2)
 
-var ball = new Ball('ball',app,'black')
+var roundBall = new RoundBall('roundball',app,'green')
 
+var mainText = 50, secondText = 25;
 var player1Score = new Text('score-two',(app.width/4) * 3, app.height / 4,50,"0",app)
 var player2Score = new Text('score-one',app.width / 4, app.height / 4,50,"0",app)
-var startText = new Text('start',app.width/2, app.height - 50, 50,"Press 'Enter' to Start",app)
-var pauseText = new Text('pause',app.width/2, app.height - 50,50,"",app)
-var pauseInst = new Text('pauseInst',app.width/2, app.height - 25,25,"",app)
+var startText = new Text('start',app.width/2 + (mainText/2), app.height - 50, mainText,"Press 'Enter' to Start",app)
+var pauseText = new Text('pause',app.width/2 + (mainText/2), app.height - 50, mainText,"",app)
+var pauseInst = new Text('pauseInst',app.width/2 + (secondText/2), app.height - 25, secondText,"",app)
 
 var state = 'START'
 
+/**
+ * Add Game Music Level1.wav
+ * Created by https://juhanijunkala.com/
+ */
+var music = new Sound('sounds/level1.wav', true)
+
+// Init
 app.onInit = function(){
 
     document.addEventListener('keydown', (event) => {
@@ -51,13 +61,16 @@ app.onInit = function(){
             PlayerTwo.moveDown(false)
 
         if(keyName == 'Enter'){
-            if(state == 'START')
+            if(state == 'START'){
+                music.play() // Start Game Music
                 state = 'GAME'
+            }
         }
 
         if(keyName == ' '){
-            if(state == 'GAME' || state == 'PAUSE')
+            if(state == 'GAME' || state == 'PAUSE'){
                 this.pause()
+            }
         }
 
         if(keyName == 'r'){
@@ -87,11 +100,13 @@ app.onUpdate = function(time){
 
 app.pause = function(){
     if(state == 'GAME'){
+        music.pause() // Pause Game Music
         state = 'PAUSE'
         pauseText.setText("Pause")
         pauseInst.setText("press 'R' for reset")
     }
     else{
+        music.play() // Resume Game Music
         state = 'GAME'
         pauseText.setText("")
         pauseInst.setText("")
@@ -103,7 +118,7 @@ app.reset = function(){
     PlayerTwo.reset()
     player1Score.setText("0")
     player2Score.setText("0")
-    ball.reset(true)
+    roundBall.reset(true)
     state = 'START'
     pauseText.setText("")
     pauseInst.setText("")
@@ -114,15 +129,15 @@ function gameRuning(deltatime) {
     PlayerOne.update(deltatime)
     PlayerTwo.update(deltatime)
 
-    ball.update(deltatime)
-    player1Score.setText(ball.score.one)
-    player2Score.setText(ball.score.two)
+    roundBall.update(deltatime)
+    player1Score.setText(roundBall.score.one)
+    player2Score.setText(roundBall.score.two)
 
-    if(collision(ball.getNode(),PlayerOne.getNode())){
-        changeDirection(ball,PlayerOne,app)
+    if(collision(roundBall.getNode(),PlayerOne.getNode())){
+        changeDirection(roundBall,PlayerOne,app)
     }
-    if(collision(ball.getNode(),PlayerTwo.getNode())){
-        changeDirection(ball,PlayerTwo,app)
+    if(collision(roundBall.getNode(),PlayerTwo.getNode())){
+        changeDirection(roundBall,PlayerTwo,app)
     }
 }
 
@@ -133,10 +148,10 @@ function collision(ball,player) {
     let pLeft = player.x
     let pRight = (player.x) + player.width
 
-    let bTop = ball.y
-    let bBottom = (ball.y) + ball.height
-    let bLeft = ball.x
-    let bRight = (ball.x) + ball.width
+    let bTop = ball.y - ball.r
+    let bBottom = (ball.y) + ball.r
+    let bLeft = ball.x - ball.r
+    let bRight = (ball.x) + ball.r
 
     // boolean for collision
     return bRight > pLeft && bTop < pBottom && bLeft < pRight && bBottom > pTop
@@ -155,5 +170,5 @@ function changeDirection(ball,player,app) {
     ball.velocityX = direction * ball.speed * Math.cos(angle)
     ball.velocityY = direction * ball.speed * Math.sin(angle)
 
-    ball.speed += 0.5
+    ball.speed += 1
 }