Glow Pong

Developer
Yaphi
Size
2,844 Kb
Views
40,480
  1. Glow Pong Previews
  2. Glow Pong HTML Codes
  3. Glow Pong CSS Codes
  4. Glow Pong JS Codes

How do I make an glow pong?

What is a glow pong? How do you make a glow pong? This script and codes were developed by Yaphi on 18 July 2022, Monday.

Glow Pong Previews
IQ Test

Glow Pong - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Glow Pong</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="board" width="900" height="500">
</canvas>
<button id="restart">Restart</button> <script src="js/index.js"></script>
</body>
</html>

Glow Pong - Script Codes CSS Codes

body{	margin: 0px;	font-size: 20px;	font-family: sans-serif;	color: #333;
}
#board{	border: 1px solid #ddd;	background-color: #333;
}

Glow Pong - Script Codes JS Codes

// see in debug view
var canvas = document.getElementById('board');
// canvas.width = window.innerWidth;
// canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
var game = {	over: false
};
var ball = {	x: 100,	y: 100,	r: 10,	color: '#fff',	glow: '#0ff',	glowSize: 15,	vx: 5,	vy: 5,	img: document.createElement('canvas'),	boxHalf: function(){	return this.glowSize+this.r;	},	init: function(){ this.x = 100; this.y = 100;	var boxSize = 2*this.boxHalf();	this.img.width = boxSize;	this.img.height = boxSize;	var ballctx = this.img.getContext('2d');	ballctx.beginPath();	ballctx.arc(boxSize/2, boxSize/2, this.r, 0, 2*Math.PI);	ballctx.closePath();	ballctx.fillStyle = this.color;	ballctx.shadowBlur = this.glowSize;	ballctx.shadowColor = this.glow;	ballctx.fill();	// boost the intensity of the glow	for(var i=0; i<5; i++){	ballctx.fill();	}	},	draw: function(){	ctx.drawImage(this.img, this.x-this.boxHalf(), this.y-this.boxHalf());	}
};
ball.init();
var paddle = {	x: 100,	y: canvas.height - 10,	width: 100,	height: 10,	speed: 10,	color: '#fff',	glow: '#faf',	glowSize: 15,	vx: 0,	vy: 0,	img: document.createElement('canvas'),	init: function(){	this.img.width = this.width + 2*this.glowSize;	this.img.height = this.height + 2*this.glowSize;	var paddlectx = this.img.getContext('2d');	paddlectx.fillStyle = this.color;	paddlectx.shadowBlur = this.glowSize;	paddlectx.shadowColor = this.glow;	paddlectx.fillRect(this.glowSize, this.glowSize, this.width, this.height);	// boost the intensity of the glow	for(var i=0; i<5; i++){	paddlectx.fillRect(this.glowSize, this.glowSize, this.width, this.height);	}	},	draw: function(){	ctx.drawImage(this.img, this.x-this.glowSize, this.y-this.glowSize);	}
};
paddle.init();
var opponent = Object.create(paddle);
opponent.y = 0;
opponent.img = document.createElement('canvas');
opponent.glow = 'red';
opponent.followBall = function(){	this.x = ball.x - (this.width/2);	this.draw();
};
opponent.init();
var raf;
var t=0;
var hits = 0;
function draw(){	raf = window.requestAnimationFrame(draw);	if((ball.x<=ball.r)||(ball.x>=canvas.width-ball.r)){	ball.vx *= -1;	}	if((ball.y<=ball.r)||(ball.y>=canvas.height-ball.r)){	// if ball misses paddle	if((ball.y>=canvas.height-ball.r) && (ball.x<paddle.x || ball.x>paddle.x+paddle.width)){	console.log('game over');	game.over = true;	cancelAnimationFrame(raf);	}	else{	ball.vy *= -1;	hits++;	// increase speed every 6 hits (3 turns back and forth)	ball.vx = (ball.vx/Math.abs(ball.vx)) * (Math.ceil(hits/6)+4);	ball.vy = (ball.vy/Math.abs(ball.vy)) * (Math.ceil(hits/6)+4);	}	}	ctx.clearRect(0,0,canvas.width,canvas.height);	ball.draw();	ball.x += ball.vx;	ball.y += ball.vy;	// pulse effect	// t+=0.05;	// ball.glowSize = 3*Math.sin(t)+15;	paddle.draw();	paddle.x += paddle.vx;	opponent.followBall();	if(game.over){	window.cancelAnimationFrame(raf);	}
}
draw();
var keysdown = [0,0];
window.addEventListener('keydown', function(e){	var k = e.keyCode;	if(k==39 && !keysdown[1]){	paddle.vx = paddle.speed;	keysdown[1]=1;	}	if(k==37 && !keysdown[0]){	paddle.vx = -paddle.speed;	keysdown[0]=1;	}
},false);
window.addEventListener('keyup', function(e){	var k = e.keyCode;	if(k==39){	keysdown[1]=0;	}	if(k==37){	keysdown[0]=0;	}	if(keysdown.join('')==='00'){	paddle.vx = 0;	}
}, false);
document.getElementById('restart').onclick = function(){ ball.init(); // remember to make init ge to original speed game.over = false; draw();
};
Glow Pong - Script Codes
Glow Pong - Script Codes
Home Page Home
Developer Yaphi
Username yaphi1
Uploaded July 18, 2022
Rating 3
Size 2,844 Kb
Views 40,480
Do you need developer help for Glow 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!

Yaphi (yaphi1) Script Codes
Name
10 Minute Countdown Clock
Basic JavaScript Countdown Clock
Perspective Test
JavaScript Slideshow With Controls
Turn HTML into JS string
RequestAnimationFrame Countdown
Countdown Clock with Pause and Resume
Simple JavaScript Quiz
RequestAnimationFrame Countdown fork
JavaScript Slideshow With Pause Button
Create amazing Facebook ads 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!