ANGRY SNEK



LOG | FILES | OVERVIEW


F diff --git a/snek.css b/snek.css new file mode 100644 --- /dev/null +++ b/snek.css
F diff --git a/snek.html b/snek.html new file mode 100644 --- /dev/null +++ b/snek.html
+ <!DOCTYPE html>
+
+ <html>
+ <head>
+ <title> ANGRY SNEK </title>
+ <meta charset="utf-8">
+ <script src="snek.js"></script>
+ <link rel="stylesheet" href="snek.css">
+
+ </head>
+
+ <body onload="main()">
+ <canvas id="canvas1"></canvas>
+ </body>
+
+ </html>
F diff --git a/snek.js b/snek.js new file mode 100644 --- /dev/null +++ b/snek.js
+
+ 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();
+ }
+
F diff --git a/tags b/tags new file mode 100644 --- /dev/null +++ b/tags
+ !_TAG_FILE_FORMAT 2 /extended format; --format=1 will not append ;" to lines/
+ !_TAG_FILE_SORTED 1 /0=unsorted, 1=sorted, 2=foldcase/
+ !_TAG_OUTPUT_FILESEP slash /slash or backslash/
+ !_TAG_OUTPUT_MODE u-ctags /u-ctags or e-ctags/
+ !_TAG_PATTERN_LENGTH_LIMIT 96 /0 for no limit/
+ !_TAG_PROGRAM_AUTHOR Universal Ctags Team //
+ !_TAG_PROGRAM_NAME Universal Ctags /Derived from Exuberant Ctags/
+ !_TAG_PROGRAM_URL https://ctags.io/ /official site/
+ !_TAG_PROGRAM_VERSION 0.0.0 //
+ #canvas2 snek.css /^#canvas2 {$/;" i
+ canvas snek.js /^let canvas;$/;" v
+ canvas1 snek.html /^ <canvas id="canvas1"><\/canvas>$/;" I
+ canvas2 snek.html /^ <canvas id="canvas2"><\/canvas>$/;" I
+ context snek.js /^let context;$/;" v
+ createMouse snek.js /^function createMouse(x,y,direction,speed,size)$/;" f signature:(x,y,direction,speed,size)
+ draw snek.js /^function draw(timeStamp)$/;" f signature:(timeStamp)
+ drawInterval snek.js /^let drawInterval=1000\/30;$/;" v
+ drawMice snek.js /^function drawMice()$/;" f signature:()
+ drawMouse snek.js /^function drawMouse(mouse)$/;" f signature:(mouse)
+ initialise snek.js /^function initialise()$/;" f signature:()
+ lastTimeStamp snek.js /^let lastTimeStamp;$/;" v
+ main snek.js /^function main()$/;" f signature:()
+ mice snek.js /^let mice;$/;" v
+ micePerSecond snek.js /^let micePerSecond=0.3;$/;" v
+ normalMouseSize snek.js /^let normalMouseSize=1;$/;" v
+ normalMouseSpeed snek.js /^let normalMouseSpeed=10;$/;" v
+ snek.css snek.css 1;" F
+ snek.html snek.html 1;" F
+ snek.js snek.js 1;" F
+ spawnMouse snek.js /^function spawnMouse()$/;" f signature:()