New wiki-page
mNo edit summary |
mNo edit summary |
||
Line 3: | Line 3: | ||
//AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE. | //AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE. | ||
var context=document.getElementById("canvas"); | var context=document.getElementById("canvas"); | ||
var canvasWidth= | var canvasWidth=context.width; | ||
var canvasHeight= context.height; | var canvasHeight= context.height; | ||
var fogCount=15; | var fogCount=15; |
Revision as of 14:49, 17 July 2017
/* Any JavaScript here will be loaded for all users on every page load. */ //AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE. var context=document.getElementById("canvas"); var canvasWidth=context.width; var canvasHeight= context.height; var fogCount=15; var fog=new Image(); var mountain=new Image(); var fogs=[]; var FPS=20; var maxVel=1; fog.src = "https://s27.postimg.org/57e6pz0xf/fog.png"; mountain.src="http://w.ikabodo.se/images/4/41/Oath-banner.jpg" ; function fogPart(){ this.x=0; this.y=0; this.xVel=0; this.yVel=0; this.radius=5; this.draw=function(){ context.drawImage(this.image,this.x-100,this.y-100); }; this.update=function(){ this.x += this.xVel; this.y += this.yVel; if (this.x >= canvasWidth) { this.xVel = -this.xVel; this.x = canvasWidth; } else if (this.x <= 0) { this.xVel = -this.xVel; this.x = 0; } if (this.y >= canvasHeight) { this.yVel = -this.yVel; this.y = canvasHeight; } else if (this.y <= 0) { this.yVel = -this.yVel; this.y = 0; } }; this.setImage=function(img){ this.image=img; }; this.setPos = function(x, y) { this.x = x; this.y = y; }; this.setVel = function(x, y) { this.xVel = x; this.yVel = y; }; }; function random(min, max){ return Math.random() * (max - min) + min; } function init() { if (canvas.getContext) { context = canvas.getContext('2d'); for(var i=0; i < fogCount; i++){ var fog = new fogPart(); fog.setPos(random(0, canvasWidth), random(0, canvasHeight)); fog.setVel(random(-maxVel, maxVel), random(-maxVel, maxVel)); fogs.push(fog); } } else { alert("UN-supported browser"); } }; fog.onload=function(){ fogs.forEach(function(part){ part.setImage(fog); }); }; function draw(){ context.drawImage(mountain,0,0); context.globalAlpha = 0.09; fogs.forEach(function(part) { part.draw(); }); }; function update(){ fogs.forEach(function(part){ part.update(); }); }; init(); if (context) { setInterval(function() { update();draw(); }, 1000 / FPS); }