Infinite ping-pong

Developer
David A.
Size
3,266 Kb
Views
34,408
  1. Infinite ping-pong Previews
  2. Infinite ping-pong HTML Codes
  3. Infinite ping-pong CSS Codes
  4. Infinite ping-pong JS Codes

How do I make an infinite ping-pong?

What is a infinite ping-pong? How do you make a infinite ping-pong? This script and codes were developed by David A. on 28 November 2022, Monday.

Infinite ping-pong Previews
IQ Test

Infinite ping-pong - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>infinite ping-pong</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://rawgit.com/arcade/requestAnimationFrame-polyfill/master/requestAnimationFrame.js'></script>
<script src='http://rawgit.com/meodai/simpleRAF/master/simpleRAF.js'></script> <script src="js/index.js"></script>
</body>
</html>

Infinite ping-pong - Script Codes CSS Codes

body { margin: 0; padding: 0; overflow: hidden; background: #212121;
}

Infinite ping-pong - Script Codes JS Codes

'use strict';
Math.sign = Math.sign || function (x) { x = +x; // convert to a number if (x === 0 || isNaN(x)) { return x; } return x > 0 ? 1 : -1;
};
var x = undefined, y = undefined, sx = undefined, sy = undefined, r = undefined, vw = undefined, vh = undefined;
var w = window;
var d = document;
var $c = d.createElement('canvas');
x = (w.innerWidth || screen.width) * .5;
y = (w.innerHeight || screen.height) * .5;
sx = 4;
sy = 0;
var ctx = $c.getContext('2d');
function ball(x, y, r, color) { ctx.beginPath(); ctx.arc(x, y, r, 0, 2 * Math.PI, false); ctx.fillStyle = color; ctx.fill(); ctx.closePath();
}
function resize() { vw = w.innerWidth || screen.width; vh = w.innerHeight || screen.height; $c.width = vw; $c.height = vh; r = Math.max(vw * 0.025, vh * 0.03);
}
resize();
w.addEventListener('resize', resize);
d.body.appendChild($c);
ctx.fillStyle = 'rgba(33,33,33,1)';
ctx.clearRect(0, 0, vw, vh);
ctx.fill();
simpleRAF.on(function (timeStamp, pos) { x += sx;y += sy; if (x > vw - r || x < r) sx = -(Math.sign(sx) || 1) * (2 + Math.random() * 4); x += sx; if (y > vh - r) sy = -(vh * .025) - Math.random() * 4; sy += .55; ctx.globalAlpha = 0.25; ctx.fillStyle = 'rgb(33,33,33)'; ctx.fillRect(0, 0, vw, vh); ctx.globalAlpha = 1; ctx.fill(); ball(x, y, r, 'hsl(' + pos % 360 + ',100%,80%)'); ball(x, y, r * .5, '#212121'); //ball(x,y,r * .25,`hsl(${(pos + 30) % 360},100%,80%)`);
});
Infinite ping-pong - Script Codes
Infinite ping-pong - Script Codes
Home Page Home
Developer David A.
Username meodai
Uploaded November 28, 2022
Rating 4
Size 3,266 Kb
Views 34,408
Do you need developer help for Infinite ping-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!

David A. (meodai) Script Codes
Name
Cubehelix ticktack.js
All the 16k color names from the color-name-list API
DOM explosions
Pseudo 3d css clouds
Cymk logo generator
Better Grrif Player
Easy Parallax, 9 lines of vanilla JS
Textmask over random clouds animation
Color fan
Media Queries on Crack
Create amazing captions 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!