Pong Game using javascript PDF

Preview

Summary

report about pong game using js...

Description

BHARATI VIDYAPEETH Institute of Technology(Polytechnic), Navi Mumbai (Academic Year : 2020-2021) (Micro Project)

CLIENT SIDE SCRIPTING (CSS) PROGRAM:- CM5I

COURSE AND CODE:-CSS (22519)

TOPIC : JavaScript Pong Game SUBMITTED BY : Sohail Alekar(3106) Diksha Jha(3107) Devansh Upadhyay(3108)

Annexure 1 Micro- Project Proposal

JavaScript Pong Game 1.0Aims/ Benefits of the Micro – Project : I. It develops mental acuity the speed, spin and placement of the ball are crucial in table tennis, and professional players are highly skilled in both creating and solving puzzles involving these three attributes. II. It improves reflexes due to the fast-paced, short-distance nature of the sport, both gross and fine muscle movements are improved. The game is distinguished by bursts of exertion and recovery, leading to fast-twitch muscle development. III. It keeps your brain sharp a clear increase in motor skills and cognitive awareness from playing table tennis, after a series of preliminary clinical studies in Japan found that table tennis markedly increases the flow of blood to the brain, and could possibly even prevent dementia.

2.0Course Outcomes Addressed

a) Develop JavaScript to use decision making and looping statements. b) Develop JavaScript to implement functions. c)

Develop JavaScript to implement Array functionalities

3.0 Proposed Methodology ( Procedure in brief that will be followed to do the micro-project in about 100-200 words)

I. Pong game in JavaScript is an arcade tennis sports video game featuring 2 simple dimensional graphics. This small project is a remake using HTML, CSS & JavaScript, specially developed for the beginners. II. Talking about the gameplay, it is a two player game and the players should be played from both side with the help of mouse. The game ends whenever the player fails to touch the ball and it touches to the other part of the screen. For the development of this mini-game, various sounds have been used along with JavaScript and Html. Pong game while playing, III. Gamer will be upgraded to another challenging level and it goes tougher and tougher. This micro project is easy to operate and understood by the users. 4.0 Action Plan(Sequence and time required for major activity) Sr.No.

Details of activity

Planned start

Planned finish

Name of

1 2 3

Planning. Implementation. Reports.

date

date

11/9/2020 21/9/2020 1/10/2020

18/9/2020 27/9/2020 7/10/2020

responsible team members Sohail Alekar Diksha Jha Devansh Upadhyay

5.0 Resources Required ( major resources such as raw material, some machining facility, software etc.) Sr.No. 1

2 3 4

Name of resource / material Computer System/Laptop

Hardware Operating System Software

Specification (i3-i5 preferable),RAM minimum 1-2GB or more,HDD Free Space 1-2GB or more Mouse,Keyboard Windows 7/8/10 Any text editor and a browser

Quantity

Remarks

1

1 each 1 1

Names of Team Members with Roll Nos. 1. Sohail Alekar(3106) 2. Diksha Jha(3107) 3. Devansh Upadhyay(3108)

(To be approved by the concerned teacher)

Annexure 2 Annexure 2 Evaluation Sheet for the Microproject

Academic year: 2020-21 Gaikwad

Course: CSS Semester:CM-5-i Title of the Project:

Name of Faculty: Shobhna

Course Code:22519

JavaScript Pong Game

COs addressed by the Micro Project:

A.Created interactive web pages using program flow control structure. B.Implement arrays and functions in javascript. C.Created interactive webpage using regular expression for validations. D.Used javascript for handling cookies. Major Learning Outcomes achieved by students by doing the Project: (a) Practical Outcomes: Created a javascript game. (b) Unit Outcomes in Cognitive domain:Developed a javascript to

implement functions,looping statements,decision making, and arrays. (c) Outcomes in Affective Domain:Framework of javascript and app. Comments/Suggestions about team work/leadership/inter-personal communication (if any) ........................................................................................................................ ........ ........................................................................................................................ .....…

Roll No.

Student Name

Marks out of 6 for Marks out of 4 for Total out of performance in performance in 10 group activity oral / presentation (D5 Col. 8)

3106

SOHAIL ALEKAR

(D5 Col. 9)

3107

DIKSHA JHA

3108

DEVANSH UPADHYAY

(Name & Signature of faculty)

Content 1) INTRODUCTION 2) OBJECTIVE 3) DESCRIPTION OF PROJECT 4) TECHNOLOGY & TOOLS USED: 5) ADVANTAGE 6) PROGRAM CODE 7) OUTPUT 8) CONCLUSION AND REFERENCE

1) Introduction the classic Ping Pong Game with Javascript and HTML. Ping Pong, also known as Table tennis is a sport in which two or four players hit a lightweight ball, also known as the ping-pong ball, back and forth across a table using small paddles. The original PONG game is designed by Nolan Bushnell and released by Atari in 1972. PONG is an adaptation of table tennis to the video screen and is one of the first commercially successful game. It is also widely regarded to have usher in the video game era.Mini Pong, like the original PONG, is a basic simulation of the racket sport of table tennis.A sphere representing a ping pong ball travels across the screen in a linear trajectory. If the ball strikes the perimeter of the playing field, the obstacle in the middle of the room or one of the simulated paddles, the ball ricochets based on the angle of the impact.With every impact on the playing field or obstacle, the ball picks up speed. Speed is reduced upon hitting the paddle.

2) Objective Talking about the gameplay, it is a two player game and the players should be played from both side with the help of mouse. The game ends whenever the player fails to touch the ball and it touches to the other part of the screen. For the development of this mini-game, various sounds have been used along with JavaScript and HTML. Pong game while playing, Game will be upgraded to another challenging level and it goes tougher and tougher. This micro project is easy to operate and understood by the users.

3) DESCRIPTION OF PROJECT Our Pong game has the following components:     

The game board Net in the middle Two Score text on either side Two Paddles, the user and the ai And our Ping Pong Ball.

When the ai misses the ball which the user had hit, the user gains 1 point and vice versa. One thing to remember here is how the axis is laid out. The axis starts from the top left like below:

When we go right, the x increases, and when we go towards the bottom, the y value increases.

4) TECHNOLOGY & TOOLS USED

a. Visual Studio Code Editor for writing the codes. b. Google Chrome as default browser to run and see the output of the program. c. Youtube (to search different sound effect for the game). d. Google (to find more information about our game and to understand the process required to make this game).

5) ADVANTAGE

a. Good quality graphics modelling, rendering and animation b. Sound effects and music c. Building efficient and modular code d. Easy to play e. User will get more attract towards to gaining points.

)

) Program Code Initial Settings:create a folder structure similar to below:

HTML PART:









JavaScript Part: // grab a reference of our "canvas" using its id const canvas = document.getElementById('canvas'); /* get a "context". Without "context", we can't draw on canvas */ const ctx = canvas.getContext('2d');

// some sounds const hitSound = new Audio('../sounds/hitSound.wav'); const scoreSound = new Audio('../sounds/scoreSound.wav');

const wallHitSound = new Audio('../sounds/wallHitSound.wav');

/* some extra variables */ const netWidth = 4; const netHeight = canvas.height;

const paddleWidth = 10; const paddleHeight = 100;

let upArrowPressed = false; let downArrowPressed = false;

/* some extra variables ends */

/* objects */

// net const net = { x: canvas.width / 2 - netWidth / 2, y: 0, width: netWidth, height: netHeight, color: "#FFF" };

// user paddle const user = { x: 10, y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight, color: '#FFF', score: 0 };

const ai = { x: canvas.width - (paddleWidth + 10), y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight, color: '#FFF', score: 0 };

// ball const ball = { x: canvas.width / 2, y: canvas.height / 2, radius: 7, speed: 7, velocityX: 5, velocityY: 5, color: '#05EDFF'

};

/* objects declaration ends */

/* drawing functions */ // function to draw net function drawNet() { // set the color of net ctx.fillStyle = net.color;

// syntax --> fillRect(x, y, width, height) ctx.fillRect(net.x, net.y, net.width, net.height); }

// function to draw score function drawScore(x, y, score) { ctx.fillStyle = '#fff'; ctx.font = '35px sans-serif';

// syntax --> fillText(text, x, y) ctx.fillText(score, x, y); }

// function to draw paddle function drawPaddle(x, y, width, height, color) {

ctx.fillStyle = color; ctx.fillRect(x, y, width, height); }

// function to draw ball function drawBall(x, y, radius, color) { ctx.fillStyle = color; ctx.beginPath(); // syntax --> arc(x, y, radius, startAngle, endAngle, antiClockwise_or_not) ctx.arc(x, y, radius, 0, Math.PI * 2, true); // π * 2 Radians = 360 degrees ctx.closePath(); ctx.fill(); }

/* drawing functions end */

/* moving Paddles */ // add an eventListener to browser window window.addEventListener('keydown', keyDownHandler); window.addEventListener('keyup', keyUpHandler);

// gets activated when we press down a key function keyDownHandler(event) { // get the keyCode

switch (event.keyCode) { // "up arrow" key case 38: // set upArrowPressed = true upArrowPressed = true; break; // "down arrow" key case 40: downArrowPressed = true; break; } }

// gets activated when we release the key function keyUpHandler(event) { switch (event.keyCode) { // "up arraow" key case 38: upArrowPressed = false; break; // "down arrow" key case 40: downArrowPressed = false; break; } }

/* moving paddles section end */

// reset the ball function reset() { // reset ball's value to older values ball.x = canvas.width / 2; ball.y = canvas.height / 2; ball.speed = 7;

// changes the direction of ball ball.velocityX = -ball.velocityX; ball.velocityY = -ball.velocityY; }

// collision Detect function function collisionDetect(player, ball) { // returns true or false player.top = player.y; player.right = player.x + player.width; player.bottom = player.y + player.height; player.left = player.x;

ball.top = ball.y - ball.radius; ball.right = ball.x + ball.radius; ball.bottom = ball.y + ball.radius;

ball.left = ball.x - ball.radius;

return ball.left < player.right && ball.top < player.bottom && ball.right > player.left && ball.bottom > player.top; }

// update function, to update things position function update() { // move the paddle if (upArrowPressed && user.y > 0) { user.y -= 8; } else if (downArrowPressed && (user.y < canvas.height user.height)) { user.y += 8; }

// check if ball hits top or bottom wall if (ball.y + ball.radius >= canvas.height || ball.y ball.radius = canvas.width) { // play scoreSound scoreSound.play();

// then user scored 1 point user.score += 1; reset(); } // if ball hit on left wall if (ball.x - ball.radius (player.y + player.height / 2)) { // if it hit the bottom of paddle // then angle will be Math.PI / 4 = 45deg angle = Math.PI / 4; }

/* change velocity of ball according to on which paddle the ball hitted */ ball.velocityX = (player === user ? 1 : -1) * ball.speed * Math.cos(angle); ball.velocityY = ball.speed * Math.sin(angle); // increase ball speed ball.speed += 0.2; } } // render function draws everything on to canvas function render() { // set a style ctx.fillStyle = "#000"; /* whatever comes below this acquires black color (#000). */ // draws the black board ctx.fillRect(0, 0, canvas.width, canvas.height);

// draw net

drawNet(); // draw user score drawScore(canvas.width / 4, canvas.height / 6, user.score); // draw ai score drawScore(3 * canvas.width / 4, canvas.height / 6, ai.score); // draw user paddle drawPaddle(user.x, user.y, user.width, user.height, user.color); // draw ai paddle drawPaddle(ai.x, ai.y, ai.width, ai.height, ai.color); // draw ball drawBall(ball.x, ball.y, ball.radius, ball.color); }

// gameLoop function gameLoop() { // update() function here update(); // render() function here render(); }

// calls gameLoop() function 60 times per second setInterval(gameLoop, 1000 / 60);

7) OUTPUT

We have also deployed our game in github Link : https://devanshupadhyay26.github.io/Ping-Pong/

8) CONCLUSION AND REFERENCE In conclusion to be a very good table tennis player you need to have a lot of strategies in order to be a changing player and never repeat the same strategy with tour opponent, concentration also plays a fundamental role here where before each match is recommended to make the brain training in which you imagine in your mind how is going to be the match sequence by sequence; this is a form to get relaxed and in the same time being concentrated and prepared for the match.

References:  Google  Github  Youtube  MDN web docs...