I was at LILiK today, helping a friend of mine preparing a project for promoting the LILiK Day.
The project, really interesting, is about a browser version of the famous game “Fruit Ninja” working on real fruit. Crazy, right?

Actually, to make the fruit explode you have to touch real fresh natural fruit connected with a wire to the pc where this game run.

It’s just a prototype, but this is the first preview:

Fruit Ninja Clone

I thought it could be awesome to build an explosion effect using some tricky HTML5 with CANVAS.

Shooted particles

Searching here and there on the web, I’ve found something good and put everything together here (DEMO after the code):

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>HTML5 Canvas Explode Demo</title>
		<link rel="stylesheet" href="styles.css" />
        <meta name="viewport" content="width=320 initial-scale=1.0, user-scalable=no" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<style type="text/css">
* {
	margin: 0; padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
}

canvas {
	display: block;
	background: whiteSmoke;
		width: 100%;
	height: 100%;
}
#presentation{
	position: fixed;
	background: rgba(0,0,0,0.7);
	width: 100%;
	height: 70px;
	box-shadow: 7px 7px 13px rgba(0,0,0,0.3);
	color: white;
	font-family:futura;
	font-size: 30px;
	padding-left: 50px;
	padding-top: 10px;
}
</style>

</head>
<body>
<div id="presentation">Hit anywhere to shoot colors!</div>
<canvas id="output" ></canvas>

<script type="text/javascript">

jQuery(document).ready(function(){
   $('body').click(function(e){
      BOOM(e.pageX , e.pageY);
   }); 
})
window.requestAnimationFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(f){window.setTimeout(f,1e3/60)}}();

	var canvas = document.querySelector('canvas');
	var ctx = canvas.getContext('2d');

function BOOM(actualX,actualY) {

	// Shim with setTimeout fallback

	var laX = actualX;
	var laY = actualY;	
	var W = canvas.width = window.innerWidth;
	var H = canvas.height = window.innerHeight;
	// Let's set our gravity
	var gravity = 1;

	// Time to write a neat constructor for our
	// particles.
	// Lets initialize a random color to use for
	// our particles and also define the particle
	// count.
	var particle_count = parseInt(Math.random() * 30);
	var particles = [];

	var random_color = 'rgb(' +
			parseInt(Math.random() * 255) + ',' +
			parseInt(Math.random() * 255) + ',' +
			parseInt(Math.random() * 255) + ')';

	function Particle() {
		this.radius = parseInt(Math.random() * 8);
		this.x = actualX;
		this.y = actualY;

		this.color = random_color;

		// Random Initial Velocities
		this.vx = Math.random() * 4 - 2;
		// vy should be negative initially
		// then only will it move upwards first
		// and then later come downwards when our
		// gravity is added to it.
		this.vy = Math.random() * -14 - 1;

		// Finally, the function to draw
		// our particle
		this.draw = function() {
			ctx.fillStyle = this.color;

			ctx.beginPath();

			ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
			ctx.fill();

			ctx.closePath();
		};
	}

	// Now lets quickly create our particle
	// objects and store them in particles array
	for (var i = 0; i < particle_count; i++) {
		var particle = new Particle();
		particles.push(particle);
	}

	// Finally, writing down the code to animate!
	(function renderFrame() {
		requestAnimationFrame(renderFrame);

		// Clearing screen to prevent trails
		ctx.clearRect(0, 0, W, H);

		particles.forEach(function(particle) {

			// The particles simply go upwards
			// It MUST come down, so lets apply gravity
			particle.vy += gravity;

			// Adding velocity to x and y axis
			particle.x += particle.vx;
			particle.y += particle.vy;

			// We're almost done! All we need to do now
			// is to reposition the particles as soon
			// as they move off the canvas.
			// We'll also need to re-set the velocities

			particle.draw();

		});
	}());

};
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

<!doctype html>

<head>

<title>HTML5 Canvas Explode Demo</title>

* {

margin: 0; padding: 0;

}

html, body {

width: 100%;

height: 100%;

}

canvas {

display: block;

background: whiteSmoke;

width: 100%;

height: 100%;

}

#presentation{

position: fixed;

background: rgba(0,0,0,0.7);

width: 100%;

height: 70px;

box-shadow: 7px 7px 13px rgba(0,0,0,0.3);

color: white;

font-family:futura;

font-size: 30px;

padding-left: 50px;

padding-top: 10px;

}

</style>

</head>

<body>

<div id="presentation">Hit anywhere to shoot colors!</div>

jQuery(document).ready(function(){

$('body').click(function(e){

BOOM(e.pageX , e.pageY);

});

})

window.requestAnimationFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(f){window.setTimeout(f,1e3/60)}}();

var canvas = document.querySelector('canvas');

var ctx = canvas.getContext('2d');

function BOOM(actualX,actualY) {

// Shim with setTimeout fallback

var laX = actualX;

var laY = actualY;

var W = canvas.width = window.innerWidth;

var H = canvas.height = window.innerHeight;

// Let's set our gravity

var gravity = 1;

// Time to write a neat constructor for our

// particles.

// Lets initialize a random color to use for

// our particles and also define the particle

// count.

var particle_count = parseInt(Math.random() * 30);

var particles = [];

var random_color = 'rgb(' +

parseInt(Math.random() * 255) + ',' +

parseInt(Math.random() * 255) + ')';

function Particle() {

this.radius = parseInt(Math.random() * 8);

this.x = actualX;

this.y = actualY;

this.color = random_color;

// Random Initial Velocities

this.vx = Math.random() * 4 - 2;

// vy should be negative initially

// then only will it move upwards first

// and then later come downwards when our

// gravity is added to it.

this.vy = Math.random() * -14 - 1;

// Finally, the function to draw

// our particle

this.draw = function() {

ctx.fillStyle = this.color;

ctx.beginPath();

ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);

ctx.fill();

ctx.closePath();

};

}

// Now lets quickly create our particle

// objects and store them in particles array

for (var i = 0; i < particle_count; i++) {

var particle = new Particle();

particles.push(particle);

}

// Finally, writing down the code to animate!

(function renderFrame() {

requestAnimationFrame(renderFrame);

// Clearing screen to prevent trails

ctx.clearRect(0, 0, W, H);

particles.forEach(function(particle) {

// The particles simply go upwards

// It MUST come down, so lets apply gravity

particle.vy += gravity;

// Adding velocity to x and y axis

particle.x += particle.vx;

particle.y += particle.vy;

// We're almost done! All we need to do now

// is to reposition the particles as soon

// as they move off the canvas.

// We'll also need to re-set the velocities

particle.draw();

});

}());

};

</script>

</body>

</html>

Let’s try the effect here:

DEMO

Comments

3 Comments

Raf #

June 4, 2014

Hi

Thanks for the awesome effect, I am working on a html game similar to fruit Ninja and decided to copy your effect, after pasting it on my page, when clicking anywhere on the screen my fruit game disappears and the screens turns white just to display your effect!

I’d like to use the effect without over raiding my content with a white background.

Thanks

- Some Guy #
  
  June 27, 2017
  
  Are you drawing the rest of the game with the particles? On line 122 it’s clearing the canvas to draw the next frame. It sounds like you’re drawing your fruit and then when clicking the canvas is getting cleared and erasing whatever you had drawn before.
  
  - Edoardo Odorico #
    
    September 18, 2017
    
    Hi,
    if I remember correctly I delete everything at every frame in every case.

Hack | Lenotta

Recent Posts

[HTML5 and CANVAS] Exploding (shooting) particles on canvas

Comments

Leave a Reply Cancel reply

[HTML5 and CANVAS] Exploding (shooting) particles on canvas

Share this:

Comments

Leave a Reply Cancel reply