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

Jump to bottom

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 1 commit
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
9 changes: 9 additions & 0 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,12 +42,14 @@ 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 {
Expand Down
15 changes: 8 additions & 7 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 = 8
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 @@ -57,8 +57,8 @@ class RoundBall {
constructor(id,app,color) {
this.ref = app
this.speed = 10
this.velocityX = 7
this.velocityY = 7
this.velocityX = 8
this.velocityY = 8
this.initial = {
id : id,
r : 15, // Ball Radius
Expand Down Expand Up @@ -92,8 +92,8 @@ class RoundBall {
this.node.x = this.ref.width/2
this.node.y = this.ref.height/2
this.speed = 10
this.velocityX = 7
this.velocityY = 7
this.velocityX = 8
this.velocityY = 8
this.velocityX = -this.velocityX
}

Expand Down Expand Up @@ -180,6 +180,7 @@ class Sound {
this.sound.setAttribute("loop", loop)
}
this.sound.style.display = "none";
this.sound.volume = 0.2
document.body.appendChild(this.sound);
}

Expand Down
6 changes: 3 additions & 3 deletions public/js/modules/start.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ 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 roundBall = new RoundBall('roundball',app,'green')
var roundBall = new RoundBall('roundball',app,'white')

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 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)
Expand Down