Javascript Pong Game

Developer
Tim
Size
2,903 Kb
Views
24,288
  1. Javascript Pong Game Previews
  2. Javascript Pong Game HTML Codes
  3. Javascript Pong Game CSS Codes
  4. Javascript Pong Game JS Codes

How do I make an javascript pong game?

What is a javascript pong game? How do you make a javascript pong game? This script and codes were developed by Tim on 31 October 2022, Monday.

Javascript Pong Game Previews
IQ Test

Javascript Pong Game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Javascript Pong Game</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Javascript Pong</h1>
<canvas id="myCanvas" width="480" height="320"></canvas>
<div>Controls: <br/> p1: A (up) & Z (down) <br/> p2: K (up) & M (down)
</div>
<button id="start-btn">Start Game</button> <script src="js/index.js"></script>
</body>
</html>

Javascript Pong Game - Script Codes CSS Codes

*{ margin: 0; padding: 0;
}
body{ display: flex; flex-direction: column; justify-content: center; align-items: center;
}
canvas{ background: #eee;
}
button{ font-size: 18px;
}

Javascript Pong Game - Script Codes JS Codes

//DOM references
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
const startButton = document.getElementById('start-btn')
//Game component constants
const player = { x:0, y:0, width:10, height: 50, upPressed: false, downPressed: false, speed: 2, score: 0,
}
const ball = { x:canvas.width/2, y:canvas.height/2, dx: 3, dy: 1, radius: 8, pause: true,
}
const maxScore = 3
const defaultMessage = 'Press start to begin'
const speedIncrease = 1.05
//Game components
var p1, p2, gameBall, message
var gameOver = true
//Game state functions
function newGame(){ p1 = Object.assign( {}, player, { x:0, y:(canvas.height-player.height)/2 } ) p2 = Object.assign( {}, player, { x:canvas.width-player.width, y:(canvas.height-player.height)/2 } ) gameBall = Object.assign({},ball) message = defaultMessage gameOver = false setTimeout(()=>{gameBall.pause = false},1000)
}
function newRound(){ //Reset ball gameBall = Object.assign({},ball) setTimeout(()=>{gameBall.pause = false},1000)
}
//Game update functions
function updateBall(){ if(gameBall.y + gameBall.dy < gameBall.radius || gameBall.y + gameBall.dy > canvas.height-gameBall.radius){ gameBall.dy = -(speedIncrease * gameBall.dy) } if(gameBall.x +gameBall.dx < gameBall.radius){ if(gameBall.y>p1.y && gameBall.y < p1.y + p1.height){ if(gameBall.y<p1.y+p1.height/2){ gameBall.dy = -Math.abs(speedIncrease * gameBall.dy) } else{ gameBall.dy = Math.abs(speedIncrease * gameBall.dy) } gameBall.dx = -(speedIncrease * gameBall.dx) } else{ p2.score++ if(p2.score >= maxScore){ message = 'Player 2 won!' gameOver = true } else{ newRound() } } } else if(gameBall.x + gameBall.dx > canvas.width-gameBall.radius){ if(gameBall.y>p2.y && gameBall.y < p2.y + p2.height){ if(gameBall.y<p2.y+p2.height/2){ gameBall.dy = -Math.abs(speedIncrease * gameBall.dy) } else{ gameBall.dy = Math.abs(speedIncrease * gameBall.dy) } gameBall.dx = -(speedIncrease * gameBall.dx) } else{ p1.score++ if(p1.score >= maxScore){ message = 'Player 1 won!' gameOver = true } else{ newRound() } } } gameBall.x += gameBall.dx gameBall.y += gameBall.dy
}
function updatePaddle(p){ if(p.upPressed && p.y - p.speed> 0){ p.y -= p.speed } else if(p.downPressed && p.y + p.speed < canvas.height-p.height){ p.y += p.speed }
}
//Drawing functions
function drawPaddle(p){ ctx.beginPath() ctx.rect(p.x,p.y,p.width,p.height) ctx.fillStyle = 'black' ctx.fill() ctx.closePath()
}
function drawBall(){ ctx.beginPath() ctx.arc(gameBall.x,gameBall.y,gameBall.radius,0,Math.PI*2) ctx.fillStyle = 'black' ctx.fill() ctx.closePath()
}
function drawScore(){ ctx.font = "16px Arial" ctx.fillStyle = 'black' ctx.textAlign = "center" ctx.fillText(p1.score+' - '+p2.score,canvas.width/2,20)
}
function drawMessage(message=defaultMessage){ ctx.font = "16px Arial" ctx.fillStyle = 'black' ctx.textAlign = "center" ctx.fillText(message,canvas.width/2,canvas.height/2)
}
//Canvas drawing function
function draw(){ //Start by clearing the canvas ctx.clearRect(0,0,canvas.width,canvas.height) if(!gameOver){ drawScore() drawPaddle(p1) drawPaddle(p2) drawBall() if(!gameBall.pause){ updateBall() } updatePaddle(p1) updatePaddle(p2) } else{ drawMessage(message) } requestAnimationFrame(draw)
}
//Events
function keyDownHandler(e){ //A if(e.keyCode === 65){ p1.upPressed = true } //Z else if(e.keyCode === 90){ p1.downPressed = true } //K if(e.keyCode === 75){ p2.upPressed = true } else if(e.keyCode === 77){ p2.downPressed = true }
}
function keyUpHandler(e){ //A if(e.keyCode === 65){ p1.upPressed = false } //Z else if(e.keyCode === 90){ p1.downPressed = false } //K if(e.keyCode === 75){ p2.upPressed = false } else if(e.keyCode === 77){ p2.downPressed = false }
}
//Listeners
document.addEventListener('keydown',keyDownHandler,false)
document.addEventListener('keyup',keyUpHandler,false)
startButton.addEventListener('click',newGame,false)
//Start the canvas drawing function
draw()
Javascript Pong Game - Script Codes
Javascript Pong Game - Script Codes
Home Page Home
Developer Tim
Username maytim
Uploaded October 31, 2022
Rating 3
Size 2,903 Kb
Views 24,288
Do you need developer help for Javascript Pong Game?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim (maytim) Script Codes
Name
Phaser.io First Game Tutorial
Double Helix Animation - Jade and Sass
Javascript Spelling Game
Reddit API Gifs
Barbell
Pixi JS
Bot Land Rankings
Custom Multi Column Data Entry Select
A Pen by Tim
Game idea
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!