summaryrefslogtreecommitdiffstats
path: root/snek.js
diff options
context:
space:
mode:
authorGalin Simeonov <gts@volconst.com>2021-09-28 23:58:20 +0300
committerGalin Simeonov <gts@volconst.com>2021-09-28 23:58:20 +0300
commit20c04c8dec132112fdef2356a22890df8e064e91 (patch)
tree6654fcb8e99a3ffb720cbe308dea23d9cc36a321 /snek.js
downloadsnek-20c04c8dec132112fdef2356a22890df8e064e91.tar.gz
mice added
Diffstat (limited to 'snek.js')
-rw-r--r--snek.js167
1 files changed, 167 insertions, 0 deletions
diff --git a/snek.js b/snek.js
new file mode 100644
index 0000000..3f969da
--- /dev/null
+++ b/snek.js
@@ -0,0 +1,167 @@
+
+let canvas;
+let context;
+let mice;
+
+let drawInterval=20/1000;
+
+let micePerSecond=0.3;
+
+let normalMouseSpeed=3;
+let normalMouseSize=1;
+
+let lastTimeStamp;
+function draw(timeStamp)
+{
+ let timeElapsed;
+
+ if(lastTimeStamp==undefined)
+ lastTimeStamp=timeStamp;
+
+ timeElapsed=Math.min((timeStamp-lastTimeStamp)/1000,0.1);
+ lastTimeStamp=timeStamp;
+
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+
+ context.clearRect(0, 0, canvas.width, canvas.height);
+
+ drawMice(timeElapsed);
+
+ window.requestAnimationFrame(draw);
+}
+
+function createMouse(x,y,direction,speed,size)
+{
+ return { 'x':x, 'y':y, 'direction':direction, 'speed':speed,'size':size ,'tailLag':0, 'animation':0, 'animationCounter':0 };
+}
+
+
+function main()
+{
+ initialise();
+ window.requestAnimationFrame(draw);
+ setInterval(spawnMouse,1000/micePerSecond);
+ setInterval(cleanUpMice,100);
+}
+
+function spawnMouse()
+{
+ mice.push(createMouse(5+window.innerWidth*Math.random()*0.9,window.innerHeight+normalMouseSize*90,-Math.PI/2,normalMouseSpeed,normalMouseSize));
+}
+
+function initialise()
+{
+
+ canvas=document.getElementById("canvas1");
+ context=canvas.getContext("2d");
+
+ mice=[];
+ mice.push(createMouse(200,100,1,normalMouseSpeed,normalMouseSize));
+
+
+}
+function cleanUpMice()
+{
+ let i=0;
+ for(i;i<mice.length;++i)
+ {
+ if(mice[i].y<-200 || mice[i].y>window.innerHeight+300 || mice[i].x<-100 || mice[i].x>window.innerWidth+300)
+ {
+ mice.splice(i,1);
+ }
+ }
+}
+function drawMice(timeElapsed)
+{
+ let i=0;
+ for(i;i<mice.length;++i)
+ {
+ drawMouse(mice[i],timeElapsed);
+ }
+}
+function drawMouse(mouse,timeElapsed)
+{
+ mouse.animationCounter+=drawInterval;
+ mouse.x+=mouse.speed*(timeElapsed/drawInterval)*Math.cos(mouse.direction);
+ mouse.y+=mouse.speed*(timeElapsed/drawInterval)*Math.sin(mouse.direction);
+ mouse.animation+=0.8*(timeElapsed/drawInterval);
+
+ /*
+ mouse.direction+=0.1;
+ if(mouse.direction>1) mouse.direction-=1;
+ */
+
+ context.save();
+
+ context.translate(mouse.x, mouse.y);
+ context.rotate(mouse.direction);
+ context.scale(mouse.size,mouse.size);
+
+ /*body*/
+ context.beginPath();
+ context.ellipse(0,0,90,40,0,0,2*Math.PI);
+ context.fillStyle = "#8f8f8f";
+ context.fill();
+ context.stroke();
+ context.closePath();
+ /*right ear*/
+ context.beginPath();
+ context.arc(50, 20, 20, 0, Math.PI*1.5, false);
+ context.fillStyle = "#8f8f8f";
+ context.fill();
+ context.stroke();
+ context.closePath();
+ /*left ear*/
+ context.beginPath();
+ context.arc(50, -22, 20, 0,- Math.PI*1.5, true);
+ context.fillStyle = "#8f8f8f";
+ context.fill();
+ context.stroke();
+ context.closePath();
+ /*left eye*/
+ context.beginPath();
+ context.ellipse(80,7,5,3,-1/2,0,2*Math.PI);
+ context.fillStyle = "#000000";
+ context.fill();
+ context.closePath();
+ /*right eye*/
+ context.beginPath();
+ context.ellipse(80,-7,5,3,1/2,0,2*Math.PI);
+ context.fillStyle = "#000000";
+ context.fill();
+ context.closePath();
+ /*right wiskers*/
+ context.beginPath();
+ context.moveTo(89,0);
+ context.lineTo(95,20);
+ context.stroke();
+ context.closePath();
+ context.beginPath();
+ context.moveTo(89,0);
+ context.lineTo(90,20);
+ context.stroke();
+ context.closePath();
+ /*left wiskers*/
+ context.beginPath();
+ context.moveTo(89,0);
+ context.lineTo(95,-20);
+ context.stroke();
+ context.closePath();
+ context.beginPath();
+ context.moveTo(89,0);
+ context.lineTo(90,-20);
+ context.stroke();
+ context.closePath();
+
+ /*tail*/
+ context.beginPath();
+ context.moveTo(-90,0);
+ context.bezierCurveTo(-100,0,-150,Math.cos(mouse.animation)*30,-200,Math.sin(mouse.animation)*10);
+ context.lineWidth+=2;
+ context.stroke();
+ context.closePath();
+
+ context.restore();
+}
+