JavaScript Pong
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 - 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);
Developer | Joshua Michael Waggoner |
Username | rabbitfighter81 |
Uploaded | October 11, 2022 |
Rating | 3.5 |
Size | 2,971 Kb |
Views | 12,144 |
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!
Name | Size |
A Pen by Joshua Michael Waggoner | 4,218 Kb |
Retro CoffeeScript Timer | 3,225 Kb |
Denver Broncos Arrests Since January 1, 2000 | 11,439 Kb |
Running Man Sprite Demo | 4,003 Kb |
Quiz - Question4 | 2,559 Kb |
Fantasy Empire Intercom.io Example | 6,606 Kb |
Modern Dark Theme CoffeeScript Timer | 3,257 Kb |
Simple Popup Window with Dark Alpha Overlay | 3,433 Kb |
FE ReactJS F.A.Q. Menu System | 5,920 Kb |
ES6 Random Color Text | 3,505 Kb |
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!
Name | Username | Size |
Glowing Pulse Form | Jackrugile | 2,542 Kb |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Week7 replicate | Hwcasis | 1,620 Kb |
React TODO | Enieste | 3,320 Kb |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
Jstam.com Home Page | Jstam | 10,558 Kb |
CSS Donut Charts | Seanstopnik | 2,908 Kb |
SnappySnippet Test | Elmsoftware | 8,385 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!