diff options
| -rw-r--r-- | snek.css | 0 | ||||
| -rw-r--r-- | snek.html | 16 | ||||
| -rw-r--r-- | snek.js | 167 | ||||
| -rw-r--r-- | tags | 30 |
4 files changed, 213 insertions, 0 deletions
diff --git a/snek.css b/snek.css new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/snek.css diff --git a/snek.html b/snek.html new file mode 100644 index 0000000..653ac98 --- /dev/null +++ b/snek.html @@ -0,0 +1,16 @@ +<!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> @@ -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(); +} + @@ -0,0 +1,30 @@ +!_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:() |