//D_Stark 02/08/2018 function contents(){ canvas = document.getElementById("myCanvas"); cmeth = canvas.getContext("2d"); function rectDraw(lr,yd,pxp,pixr){ cmeth.beginPath(); cmeth.fillStyle = "white"; //Mushroom colours for 3d affect b = "black"; // Outer edge dr = "#CC3333"; // layer 1 dark shade of red cr = "red"; //layer 2 a lighter shade of red br = "#FF9999"; // layer 3 brightest shade of red //Each pixel or groups are checked and assigned a color if( pixr == 2 && pxp > 6 && pxp <13) {cmeth.fillStyle = b} if( pixr == 3 && pxp > 4 && pxp <7 || pixr == 3 && pxp > 12 && pxp < 15) {cmeth.fillStyle = b} else if( pixr == 3 && pxp > 8 && pxp < 11) {cmeth.fillStyle = dr} if( pixr == 4 && pxp > 3 && pxp <5 || pixr == 4 && pxp > 14 && pxp < 16) {cmeth.fillStyle = b} else if( pixr == 4 && pxp > 7 && pxp < 12) {cmeth.fillStyle = cr} if( pixr == 5 && pxp > 2 && pxp <4 || pixr == 5 && pxp > 15 && pxp < 17) {cmeth.fillStyle = b} else if( pixr == 5 && pxp > 7 && pxp < 12) {cmeth.fillStyle = br} else if( pixr == 5 && pxp > 5 && pxp < 8 || pixr == 5 && pxp > 11 && pxp < 14) {cmeth.fillStyle = cr} else if( pixr == 5 && pxp > 3 && pxp <6 || pixr == 5 && pxp > 13 && pxp < 16) {cmeth.fillStyle = dr} if( pixr == 6 && pxp > 2 && pxp <4 || pixr == 6 && pxp > 15 && pxp < 17) {cmeth.fillStyle = b} else if( pixr == 6 && pxp > 2 && pxp <5 || pixr == 6 && pxp > 14 && pxp < 16) {cmeth.fillStyle = dr} else if( pixr == 6 && pxp > 4 && pxp < 7 || pixr == 6 && pxp > 12 && pxp < 15) {cmeth.fillStyle = cr} else if( pixr == 6 && pxp > 6 && pxp < 13) {cmeth.fillStyle = br} if( pixr == 7 && pxp > 1 && pxp <3 || pixr == 7 && pxp > 16 && pxp < 18) {cmeth.fillStyle = b} else if( pixr == 7 && pxp > 3 && pxp < 6 || pixr == 7 && pxp > 13 && pxp < 16) {cmeth.fillStyle = cr} else if( pixr == 7 && pxp > 5 && pxp < 8 || pixr == 7 && pxp > 11 && pxp < 14) {cmeth.fillStyle = br} if( pixr == 8 && pxp > 1 && pxp <3 || pixr == 8 && pxp > 16 && pxp < 18) {cmeth.fillStyle = b} else if( pixr == 8 && pxp > 4 && pxp < 6 || pixr == 8 && pxp > 13 && pxp < 15) {cmeth.fillStyle = cr} else if( pixr == 8 && pxp > 5 && pxp < 7 || pixr == 8 && pxp > 12 && pxp < 14) {cmeth.fillStyle = br} if( pixr == 9 && pxp > 1 && pxp <3 || pixr == 9 && pxp > 16 && pxp < 18) {cmeth.fillStyle = b} else if(pixr == 9 && pxp > 4 && pxp < 6 || pixr == 9 && pxp > 13 && pxp < 15) {cmeth.fillStyle = cr} else if( pixr == 9 && pxp > 5 && pxp < 7 || pixr == 9 && pxp > 12 && pxp < 14) {cmeth.fillStyle = br} if( pixr == 10 && pxp > 1 && pxp <3 || pixr == 10 && pxp > 16 && pxp < 18) {cmeth.fillStyle = b} else if( pixr == 10 && pxp > 3 && pxp < 7 || pixr == 10 && pxp > 12 && pxp < 16) {cmeth.fillStyle = cr} if( pixr == 11 && pxp > 1 && pxp <3 || pixr == 11 && pxp > 16 && pxp < 18) {cmeth.fillStyle = b} else if( pixr == 11 && pxp == 3|| pixr == 11 && pxp > 5 && pxp < 8 || pixr == 11 && pxp > 11 && pxp < 14 || pixr == 11 && pxp == 16){cmeth.fillStyle = dr} else if( pixr == 11 && pxp > 3 && pxp <6 || pixr == 11 && pxp > 13 && pxp < 16) {cmeth.fillStyle = cr} //Mushrooms face var fd = "#FF7F50"; // Dark edge of face var fl = "#FFE4B5"; // Light part of face if( pixr == 12 && pxp > 1 && pxp <3 || pixr == 12 && pxp > 5 && pxp < 14 || pixr == 12 && pxp > 16 && pxp < 18) {cmeth.fillStyle = b} else if( pixr == 12 && pxp > 2 && pxp < 6 || pixr == 12 && pxp > 13 && pxp < 17) {cmeth.fillStyle = dr} if( pixr == 13 && pxp > 2 && pxp < 6|| pixr == 13 && pxp == 8| pxp == 11 || pixr == 13 && pxp > 13 && pxp < 17) {cmeth.fillStyle = b} else if( pixr == 13 && pxp > 3&& pxp < 8 || pixr == 13 && pxp > 8 && pxp < 11|| pixr == 13 && pxp > 11 && pxp < 14) {cmeth.fillStyle = fd} if( pixr == 14 && pxp > 3 && pxp < 5|| pixr == 14 && pxp == 8| pxp == 11 || pixr == 14 && pxp > 14 && pxp < 16) {cmeth.fillStyle = b} else if( pixr == 14 && pxp > 5&& pxp < 8|| pixr == 14 && pxp > 8 && pxp < 11|| pixr == 14 && pxp > 11 && pxp < 14) {cmeth.fillStyle = fl} else if( pixr == 14 && pxp == 5|| pixr == 14 && pxp == 14) {cmeth.fillStyle = fd} if( pixr == 15 && pxp > 3 && pxp < 5|| pixr == 15 && pxp > 14 && pxp < 16) {cmeth.fillStyle = b} //colour else if( pixr == 15 && pxp > 5&& pxp < 14) {cmeth.fillStyle = fl} else if( pixr == 15 && pxp == 5|| pixr == 15&& pxp == 14) {cmeth.fillStyle = fd} if( pixr == 16 && pxp > 4 && pxp < 6|| pixr == 16 && pxp > 13 && pxp < 15) {cmeth.fillStyle = b} else if( pixr == 16 && pxp > 6&& pxp < 13) {cmeth.fillStyle = fl} else if( pixr == 16 && pxp == 6|| pixr == 16 && pxp == 13) {cmeth.fillStyle = fd} if( pixr == 17 && pxp > 5 && pxp <14) {cmeth.fillStyle = b} cmeth.fillRect(lr,yd,15,15); }//draw function var timer1 = setInterval(run);//30 //Creates a pixel grid,shrinks image,positions mushroom on platform,left & right logics for movement given once complete function run(){ col++; if( col >19 && row <17){ col = 0; row ++; x=0; y=y+16; } x=x+16; rectDraw(x,y,col,row); if(row > 16 && csize > 80){ csize = csize - 5; canvas.style.width = csize+"px"; canvas.style.height = csize+"px"; canvas.style.position= "absolute"; } else if( csize == 80 && topm!= 274){ topm = topm + 1; canvas.style.top = topm+"px"; } if(move==290){sw=1} if(topm == 274 && sw == 0){ move++ canvas.style.left = move+"px"; } if(move<-10){sw=0} if(move==290){sw=1} if(topm == 274 && sw == 1){ move-- canvas.style.left = move+"px"; } }//run function }// main function //Global Variables var x =0, y =0, row =0, col = 0, csize = 350, cleft = 50, topm = 5, move = 7, sw = 0, moveu =274, sw2 = 0; //Allows for the mushroom to jump once it has been placed on the platform function jump(){ var timer = setInterval(animate,5); function animate(){ if(moveu >= 160 && sw2==0 && topm == 274){ moveu = moveu -2 canvas.style.top= moveu+"px"; } if(moveu == 160){sw2=1} if(moveu == 274){sw2=0;clearInterval(timer)} if(moveu <= 280 && sw2 == 1 && topm == 274){ moveu = moveu + 2 canvas.style.top= moveu+"px"; } }//Animate function }//Jump function

🍄 Pixel Art (Mario's Mushroom)