Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature fun #2

Open
wants to merge 7 commits into
base: development
Choose a base branch
from
Open

Feature fun #2

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1b13fdb
Create new RoundBall
dev-oiram Oct 3, 2021
cac9e33
Remove Square Ball
dev-oiram Oct 3, 2021
10e8eb5
Add Net Node
dev-oiram Oct 3, 2021
1167937
Add Sound class
dev-oiram Oct 3, 2021
6856319
Added sound effects
dev-oiram Oct 3, 2021
54d6158
Add background to the Game
dev-oiram Oct 3, 2021
246baef
Adjust Players speed
dev-oiram Oct 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/images/wood.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
<head>
<title>Ping Pong Game</title>
</head>
<style>
body {margin: 0}
</style>
<body>
<canvas id="canvas" width="800" height="400"></canvas>
<script type="text/javascript" src="js/app.js"></script>
Expand Down
21 changes: 19 additions & 2 deletions public/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ var app = {
//resizing
width : 800,
height : 400,
background : new Image(),

//nodes
nodes : [],
Expand All @@ -19,6 +20,12 @@ var app = {
this.canvas = document.getElementById('canvas');
this.context = this.canvas.getContext('2d');

/**
* Download from:
* https://pixabay.com/es/photos/madera-piso-fondo-antecedentes-1866667
*/
this.background.src = "images/wood.jpg";

this.render();
this.onInit();
},
Expand All @@ -35,17 +42,27 @@ var app = {
var dt = Date.now() - this.lastUpdate;

this.onUpdate(dt);
this.context.drawImage(this.background,0,0);

for(var index in this.nodes){
var node = this.nodes[index];

// Create new node for Text
if(node.istext) {
this.context.fillStyle = 'black'
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);
}
}
}

Expand Down
86 changes: 72 additions & 14 deletions public/js/modules/module.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
class Player {
constructor(id,app,color,playerNum) {
this.initialY = app.height/2
this.speed = 5
this.speed = 10
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ever heard of magic numbers?

You're a true magician putting magic all over the code :D

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You´re right, I should create some constants for those values to be easy to track.

this.move = {
up : false,
down : false
}
let x = 0
if(playerNum == 1) {
x = app.width/20 - (app.width/20) // Player One position
x = app.width/20 // Player One position
}
if(playerNum == 2) {
x = (app.width) - (app.width/20) // Player Two position
x = app.width - (app.width/20*2) // Player Two position
}
this.initial = {
id : id,
Expand Down Expand Up @@ -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 = 8
this.velocityY = 8
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)
Expand All @@ -75,6 +74,12 @@ class Ball {
one: 0,
two: 0
}

/**
* Download from https://pixabay.com/sound-effects/
*/
this.bounce = new Sound('sounds/metal-hit-cartoon.mp3', false)
this.scoreSound = new Sound('sounds/8-bit-powerup.mp3', false)
}

reset(resetGame) {
Expand All @@ -86,26 +91,35 @@ class Ball {
}
this.node.x = this.ref.width/2
this.node.y = this.ref.height/2
this.speed = 6
this.speed = 10
this.velocityX = 8
this.velocityY = 8
this.velocityX = -this.velocityX
}

playBounce() {
this.bounce.play()
}

update(deltatime) {
if(deltatime < 2){
this.node.x += this.velocityX * deltatime
this.node.y += this.velocityY * deltatime
}

// 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.playBounce() // Play Ball bounce
this.velocityY = -this.velocityY
}

// Reset Ball when collide with left or right border to set score
if(this.node.x < 0) {
this.scoreSound.play()
this.score.one ++
this.reset(false)
}else if(this.node.x > this.ref.width) {
this.scoreSound.play()
this.score.two ++
this.reset(false)
}
Expand All @@ -114,6 +128,7 @@ class Ball {
getNode() { return this.node }
}


// Node text class
class Text {
constructor(id,x,y,size,text,app) {
Expand All @@ -135,4 +150,47 @@ 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");
if(loop) {
this.sound.setAttribute("loop", loop)
}
this.sound.style.display = "none";
this.sound.volume = 0.2
document.body.appendChild(this.sound);
}

play() {
this.sound.currentTime = 0
this.sound.play()
}

pause() {
this.sound.pause()
this.sound.currentTime = 0
}
}
59 changes: 38 additions & 21 deletions public/js/modules/start.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,30 @@ 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,'white')

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 mainText = 50, secondText = 25;
var player1Score = new Text('score-two',(app.width/4) * 3, app.height / 4, mainText*1.5,"0",app)
var player2Score = new Text('score-one',app.width / 4, app.height / 4, mainText*1.5,"0",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) => {
Expand Down Expand Up @@ -51,13 +62,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'){
Copy link
Collaborator

@demiculus demiculus Oct 4, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a typo and the game breaks
maybe you shouldn't use strings huh?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you know how to use enum?

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I see, I haven´t use enum before but I can change it and not use strings

this.pause()
}
}

if(keyName == 'r'){
Expand Down Expand Up @@ -87,11 +101,13 @@ app.onUpdate = function(time){

app.pause = function(){
if(state == 'GAME'){
music.pause() // Pause Game Music
Copy link
Collaborator

@demiculus demiculus Oct 4, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

music.pause() isn't descriptive enough so you added // Pause Game Music to make sure the code reader understands right? :D

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, yes I define the "music" object and added some comments when I invoke the methods

state = 'PAUSE'
pauseText.setText("Pause")
pauseInst.setText("press 'R' for reset")
}
else{
music.play() // Resume Game Music
state = 'GAME'
pauseText.setText("")
pauseInst.setText("")
Expand All @@ -103,7 +119,7 @@ app.reset = function(){
PlayerTwo.reset()
player1Score.setText("0")
player2Score.setText("0")
ball.reset(true)
roundBall.reset(true)
state = 'START'
pauseText.setText("")
pauseInst.setText("")
Expand All @@ -114,15 +130,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)
}
}

Expand All @@ -133,17 +149,18 @@ 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
}

// Change ball direction once it collides with player
function changeDirection(ball,player,app) {
ball.playBounce() // Play Ball bounce
let collideHit = ball.getNode().y - (player.getNode().y + player.getNode().height / 2)
collideHit = collideHit / (player.getNode().height / 2)
let angle = (Math.PI/4) * collideHit
Expand All @@ -155,5 +172,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
}
Binary file added public/sounds/8-bit-powerup.mp3
View file
Open in desktop
Binary file not shown.
Binary file added public/sounds/level1.wav
View file
Open in desktop
Binary file not shown.
Binary file added public/sounds/metal-hit-cartoon.mp3
View file
Open in desktop
Binary file not shown.