// Created by Ayhas // Edited by NimWing Yuan alert("Screen: 'Click me 8 times and watch' \n '(Climax Circles)'") window.onload = function() { var cnv = document.querySelector("#cnv"), ctx = cnv.getContext("2d"), width = window.innerWidth, height = window.innerHeight, arr = []; cnv.width = width; cnv.height = height; cnv.addEventListener("click",shape); max = 1000; hit = 0; function Shape(x,y,w,h,rx,ry) { this.x = x; this.y = y; this.rx = rx; this.ry = ry; this.w = w; this.h = h; var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); var a = Math.floor(Math.random()*11)/10; var del =false; this.kleurop = function () { a = Math.floor(Math.random()*11)/10; } this.kleurNew = function () { r = Math.floor(Math.random()*256); g = Math.floor(Math.random()*256); b = Math.floor(Math.random()*256); a = Math.floor(Math.random()*11)/10; } this.draw = function() { if (del===false){ ctx.beginPath(); ctx.arc(this.x+0.5*w,this.y+0.5*h,this.w*0.5,0,2*Math.PI); if(Math.floor(Math.random()*width)==1) this.kleurNew(); ctx.fillStyle=this.multicolora(); ctx.fill(); ctx.stroke(); this.kick();} } this.kick = function() { if(this.x >= width-this.w ) { if (this.y>height*0.5) {r=g=0; b=255;} else {r=b=0; g=255;} } if(this.x <= 0) { if (this.y>height*0.5) {r=255; g=b=0;} else {r=g=255; b=0;} } if(this.x >= width-this.w || this.x <= 0) {this.rx = -this.rx; this.kleurop();} if(this.y >= height-this.h && this.x < width) { arr.push(new Shape(x,y, w,h, Math.random()*4-2,Math.random()*4-2));//{shape;} /**0.75*/) // if (hit < max){ arr.push(new Shape(x,y, w,h, Math.random()*4-2,Math.random()*4-2)); arr.push(new Shape(x,y, w,h, Math.random()*4-2,Math.random()*2)); } //arr.push(new Shape(x,y, w,h, Math.random()*-2,Math.random()*-2)); // } //function shape(e) /* { var w2 = Math.random()*40+10, h2 = w2, rx2 = Math.random()*4-2, ry2 = Math.random()*4-2; //x = e.clientX, y = e.clientY; x2=x ; y2=y; if(x2 < 0) x2 = 1; if(x2 > width - w2) x2 = width - 1; if(y2 < 0) y2 = 1; if(y2 > height - h2) y2 = height - 1; arr.push(new Shape(x2,height-this.h-1, w,h, rx,ry)); } */ if(this.y<=0 && this.x < width) /**0.75 ) */ { r=g=b=0;a=1; if (this.y >= height) {del=true; } } else if(this.y >= height-this.h || this.y <= 0) {this.ry = -this.ry;this.kleurNew();} //if (del ===false) this.x += this.rx; this.y += this.ry; } this.multicolor = function() { return "rgb("+r+","+g+","+b+")"; } this.multicolora = function() { return "rgba("+r+","+g+","+b+","+a+")"; } } function shape(e) { var w = Math.random()*40+10, h = w, rx = Math.random()*4-2, ry = Math.random()*4-2, x = e.clientX, y = e.clientY; if(x < 0) x = 1; if(x > width - w) x = width - 1; if(y < 0) y = 1; if(y > height - h) y = height - 1; arr.push(new Shape(x,y, w,h, rx,ry)); } function animate() { requestAnimationFrame(animate); ctx.clearRect(0,0,width,height); if(arr.length != 0) for(var i=0;i

Magical Circles Explosions 8.0