JavaScript Pong

Developer
Joshua Michael Waggoner
Size
2,971 Kb
Views
12,144
  1. JavaScript Pong Previews
  2. JavaScript Pong HTML Codes
  3. JavaScript Pong CSS Codes
  4. JavaScript Pong JS Codes

How do I make an javascript pong?

A simple pong remake in CoffeeScript. What is a javascript pong? How do you make a javascript pong? This script and codes were developed by Joshua Michael Waggoner on 11 October 2022, Tuesday.

JavaScript Pong Previews
IQ Test

JavaScript Pong - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JavaScript Pong </title> <link href='https://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>CoffeeScript Pong</h1>
<canvas id="canvas"></canvas> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JavaScript Pong - Script Codes CSS Codes

body { background-color: #000; text-align: center;
}
h1 { color: #00FF00; font-family: 'VT323'; letter-spacing: 0.3em;
}
#canvas { width: 400px; height: 400px; border: 5px solid #FFF;
}

JavaScript Pong - Script Codes JS Codes

/* * Coffee-Script Pong * By rabbitfighter * Use Left/Rught buttons to move */
(function() { var Ball, Computer, FPS, Paddle, Player, animate, ball, computer, context, height, keysDown, player, render, scoreComputer, scorePlayer, step, update, width; FPS = 60; width = 400; height = 400; scoreComputer = 0; scorePlayer = 0; animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / FPS); }; Paddle = function(x, y, width, height) { this.x = x; this.y = y; this.width = width; this.height = height; this.x_speed = 0; this.y_speed = 0; }; Computer = function() { this.paddle = new Paddle(175, 10, 50, 10); }; Player = function() { this.paddle = new Paddle(175, 380, 50, 10); }; Ball = function(x, y) { this.x = x; this.y = y; this.x_speed = 0; this.y_speed = 3; }; canvas.width = width; canvas.height = height; context = canvas.getContext('2d'); player = new Player; computer = new Computer; ball = new Ball(200, 300); keysDown = {}; render = function() { context.fillStyle = '#232323'; context.fillRect(0, 0, width, height); player.render(); computer.render(); ball.render(); }; update = function() { player.update(); computer.update(ball); ball.update(player.paddle, computer.paddle); }; step = function() { update(); render(); animate(step); }; Paddle.prototype.render = function() { context.fillStyle = '#00FF00'; context.fillRect(this.x, this.y, this.width, this.height); }; Paddle.prototype.move = function(x, y) { this.x += x; this.y += y; this.x_speed = x; this.y_speed = y; if (this.x < 0) { this.x = 0; this.x_speed = 0; } else if (this.x + this.width > 400) { this.x = 400 - this.width; this.x_speed = 0; } }; Computer.prototype.render = function() { this.paddle.render(); }; Computer.prototype.update = function(ball) { var diff, x_pos; x_pos = ball.x; diff = -(this.paddle.x + this.paddle.width / 2 - x_pos); if (diff < 0 && diff < -4) { diff = -5; } else if (diff > 0 && diff > 4) { diff = 5; } this.paddle.move(diff, 0); if (this.paddle.x < 0) { this.paddle.x = 0; } else if (this.paddle.x + this.paddle.width > 400) { this.paddle.x = 400 - this.paddle.width; } }; Player.prototype.render = function() { this.paddle.render(); }; Player.prototype.update = function() { var key, value; for (key in keysDown) { value = Number(key); if (value === 37) { this.paddle.move(-4, 0); } else if (value === 39) { this.paddle.move(4, 0); } else { this.paddle.move(0, 0); } } }; Ball.prototype.render = function() { context.beginPath(); context.arc(this.x, this.y, 5, 2 * Math.PI, false); context.fillStyle = '#FFF'; context.fill(); }; Ball.prototype.update = function(paddle1, paddle2) { var bottom_x, bottom_y, top_x, top_y; this.x += this.x_speed; this.y += this.y_speed; top_x = this.x - 5; top_y = this.y - 5; bottom_x = this.x + 5; bottom_y = this.y + 5; if (this.x - 5 < 0) { this.x = 5; this.x_speed = -this.x_speed; } else if (this.x + 5 > 400) { this.x = 395; this.x_speed = -this.x_speed; } if (this.y < 0 || this.y > 600) { this.x_speed = 0; this.y_speed = 3; this.x = 200; this.y = 300; } if (top_y > 300) { if (top_y < paddle1.y + paddle1.height && bottom_y > paddle1.y && top_x < paddle1.x + paddle1.width && bottom_x > paddle1.x) { this.y_speed = -3; this.x_speed += paddle1.x_speed / 2; this.y += this.y_speed; } } else { if (top_y < paddle2.y + paddle2.height && bottom_y > paddle2.y && top_x < paddle2.x + paddle2.width && bottom_x > paddle2.x) { this.y_speed = 3; this.x_speed += paddle2.x_speed / 2; this.y += this.y_speed; } } }; document.body.appendChild(canvas); animate(step); window.addEventListener('keydown', function(event) { keysDown[event.keyCode] = true; }); window.addEventListener('keyup', function(event) { delete keysDown[event.keyCode]; });
}).call(this);
JavaScript Pong - Script Codes
JavaScript Pong - Script Codes
Home Page Home
Developer Joshua Michael Waggoner
Username rabbitfighter81
Uploaded October 11, 2022
Rating 3.5
Size 2,971 Kb
Views 12,144
Do you need developer help for JavaScript Pong?

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!

Joshua Michael Waggoner (rabbitfighter81) Script Codes
Name
React SearchBox
FE ReactJS F.A.Q. Menu System
Retro CoffeeScript Timer
The Caesar Cipher
Random Password Generator
Running Man Sprite Demo
Three.js intro
RGFX Toasts
Cool menu with psychedelic circles.
A Pen by Joshua Michael Waggoner
Create amazing video scripts 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!