Skip to content

Instantly share code, notes, and snippets.

@ericoporto

ericoporto/rain.html

Last active November 1, 2019 12:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ericoporto/927977338fd3ec184dd8 to your computer and use it in GitHub Desktop.
Save ericoporto/927977338fd3ec184dd8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
rain.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML5 Rain</title>
<script type="text/javascript">
// this is an example for a rain function, to draw rain
// in a jRPG Top-Down type of game.
var canvas = null;
var context = null;
function init() {
canvas = document.getElementById('canvasRain');
context = canvas.getContext("2d");
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
rains=new rain() //this is the rain object
// use ctrl+f12 to enable the developer console
// than the function rains.startRain() to make it rain
// and rains.stopRain() to stop raining.
Draw();
setInterval(animate, 30);
// comment line below in the actual game, this is here for demo
rains.startRain();
}
function animate() {
Draw();
}
function Draw() {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
rains.DrawRain() //if you are using the rain object, call the instance that draws it!
}
function rain(){
var that = this;
var rainBufferCanvas = null;
var rainBufferCanvasCtx = null;
var particles = [];
var removeparticles = [];
var RainDropTimer = null;
var stop = false;
var colors = [];
this.raining = false;
function toColor(num) {
num = Math.round(num)
var g = Math.min(num, 0xFF),
a = 1 ;
return "rgba(" + [g, g, g, a].join(",") + ")";
};
function addRainDrop() {
particles[particles.length] = new RainDrop();
if (particles.length == that.maxRainDrops)
clearInterval(RainDropTimer);
};
this.startRain = function() {
for(var i=0; i<7; i++) {
colors[i]=toColor((i)*128/6+128);
}
that.raining = true
stop = false
that.maxRainDrops = 200;
rainBufferCanvas = document.createElement("canvas");
rainBufferCanvasCtx = rainBufferCanvas.getContext("2d");
rainBufferCanvasCtx.mozImageSmoothingEnabled = false;
rainBufferCanvasCtx.canvas.width = 416;
rainBufferCanvasCtx.canvas.height = 416;
RainDropTimer = setInterval(addRainDrop, 200);
};
this.stopRain = function() {
stop = true
clearInterval(RainDropTimer);
};
function blankRainBC() {
var npart = particles.length
rainBufferCanvasCtx.clearRect(0, 0, rainBufferCanvasCtx.canvas.width, rainBufferCanvasCtx.canvas.height);
if(npart > 50) {
rainBufferCanvasCtx.fillStyle = "rgba(0,0,25,0.2)";
rainBufferCanvasCtx.fillRect(0, 0, rainBufferCanvasCtx.canvas.width, rainBufferCanvasCtx.canvas.height);
} else if(npart > 35) {
rainBufferCanvasCtx.fillStyle = "rgba(0,0,25,0.15)";
rainBufferCanvasCtx.fillRect(0, 0, rainBufferCanvasCtx.canvas.width, rainBufferCanvasCtx.canvas.height);
} else if(npart > 25) {
rainBufferCanvasCtx.fillStyle = "rgba(0,0,25,0.1)";
rainBufferCanvasCtx.fillRect(0, 0, rainBufferCanvasCtx.canvas.width, rainBufferCanvasCtx.canvas.height);
} else if(npart > 20) {
rainBufferCanvasCtx.fillStyle = "rgba(0,0,25,0.075)";
rainBufferCanvasCtx.fillRect(0, 0, rainBufferCanvasCtx.canvas.width, rainBufferCanvasCtx.canvas.height);
} else if(npart > 15) {
rainBufferCanvasCtx.fillStyle = "rgba(0,0,25,0.05)";
rainBufferCanvasCtx.fillRect(0, 0, rainBufferCanvasCtx.canvas.width, rainBufferCanvasCtx.canvas.height);
} else if(npart > 10) {
rainBufferCanvasCtx.fillStyle = "rgba(0,0,25,0.025)";
rainBufferCanvasCtx.fillRect(0, 0, rainBufferCanvasCtx.canvas.width, rainBufferCanvasCtx.canvas.height);
}
};
function DrawRainColor(colori){
rainBufferCanvasCtx.beginPath();
for (var i = 0; i < particles.length; i++) {
if(colori==particles[i].color){
rainBufferCanvasCtx.moveTo(particles[i].x, particles[i].y);
rainBufferCanvasCtx.lineTo(particles[i].x+particles[i].width, particles[i].y+particles[i].height);
}
}
rainBufferCanvasCtx.strokeStyle = colors[colori];
rainBufferCanvasCtx.stroke();
};
this.DrawRain = function() {
if(that.raining){
for (var i = 0; i < particles.length; i++) {
if (particles[i].y < context.canvas.height) {
particles[i].y += particles[i].speed;
if (particles[i].y >= context.canvas.height) {
particles[i].y = -5;
if(stop) {
removeparticles.push(i)
}
}
particles[i].x += particles[i].drift;
if (particles[i].x > context.canvas.width) {
particles[i].x = 0;
if(stop) {
removeparticles.push(i)
}
}
}
}
if(particles.length>0){
blankRainBC();
for (var k = 2; k< 6; k++){
DrawRainColor(k)
}
context.drawImage(rainBufferCanvas, 0, 0, rainBufferCanvas.width, rainBufferCanvas.height);
}
if(removeparticles.length > 0 ){
removeparticles.sort(function(a,b){ return b - a; });
while (removeparticles.length > 0){
particles.splice(removeparticles.pop(),1);
}
if(particles.length == 0){
that.raining = false
}
}
}
};
function RainDrop() {
var angle = 2
this.x = Math.round(Math.random() * context.canvas.width);
this.y = -10;
this.drift = Math.round(Math.random() * 4) + 2;
this.speed = this.drift*angle
this.width = 8;
this.height = 8*angle;
this.color = this.drift
}
}
</script>
</head>
<body onload="init()">
<canvas id="canvasRain" width="416px" height="416px">Canvas Not Supported</canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment