Revision as of 13:56, 7 October 2012

My coding counting magic

<!doctype html> <html> <head> <title>Thalia's coding magic</title> <script> //confirm("Click OK if you're ready for magic!");

var paint;

function draw(){ c= document.getElementById("canvas"); paint= c.getContext ("2d");

paint.fillStyle="#3333CC"; paint.fillRect (0,0,960,540);

paint.fillStyle="#FF0033"; drawredhair();

paint.fillStyle="#33FF99"; drawgreentail1();

//How do I make a loop within a loop? I couldn't figure it out here and so I keep adding greentails. Seems a bit tedious... paint.fillStyle="#33FF99"; drawgreentail2();

paint.fillStyle="#33FF99"; drawgreentail3();

paint.fillStyle="#33FF99"; drawgreentail4();

paint.fillStyle="#33FF99"; drawgreentail5();

}

function drawredhair(){ x= 480; y= 180; counter=1;

while (counter<200){ paint.fillRect(x,y,150,120); x=x+1; y=y-1/2; counter=counter+1; } }

function drawgreentail1(){ x=650; y=400; counter=1;

while (counter<30){ paint.fillRect(x,y,20,2); x=x+5; y=y+3; counter=counter+1; } }

function drawgreentail2(){ x=671; y=400; counter=1;

while (counter<28){ paint.fillRect(x,y,18,2); x=x+5; y=y+3; counter=counter+1; } }

function drawgreentail3(){ x=690; y=400; counter=1;

while (counter<26){ paint.fillRect(x,y,16,2); x=x+5; y=y+3; counter=counter+1; } }

function drawgreentail4(){ x=707; y=400; counter=1;

while (counter<24){ paint.fillRect(x,y,14,2); x=x+5; y=y+3; counter=counter+1; } }

function drawgreentail5(){ x=722; y=400; counter=1;

while (counter<22){ paint.fillRect(x,y,14,2); x=x+5; y=y+3; counter=counter+1; } } </script> </head> <body onload= "draw()"> <canvas id="canvas" width="960" height="540"style="border:10px solid #ff8cfd;"> </canvas> </body> </html>

@@ Line 1: / Line 1: @@
 http://24.media.tumblr.com/tumblr_m96z2fG1eL1rdj88go1_250.gif
+<h1>My coding counting magic</h1>
+<!doctype html>
+<html>
+	<head>
+		<title>Thalia's coding magic</title> <!--dit is de tab titel-->
+		<script>
+		//confirm("Click OK if you're ready for magic!");
+		var paint;
+				function draw(){
+				c= document.getElementById("canvas");
+				paint= c.getContext ("2d");
+				paint.fillStyle="#3333CC";
+				paint.fillRect (0,0,960,540);
+				paint.fillStyle="#FF0033";
+				drawredhair();
+				paint.fillStyle="#33FF99";
+				drawgreentail1();
+			//How do I make a loop within a loop? I couldn't figure it out here and so I keep adding greentails. Seems a bit tedious...
+				paint.fillStyle="#33FF99";
+				drawgreentail2();
+				paint.fillStyle="#33FF99";
+				drawgreentail3();
+				paint.fillStyle="#33FF99";
+				drawgreentail4();
+				paint.fillStyle="#33FF99";
+				drawgreentail5();
+				}
+					function drawredhair(){
+					x= 480;
+					y= 180;
+					counter=1;
+					while (counter<200){
+					paint.fillRect(x,y,150,120);
+					x=x+1;
+					y=y-1/2;
+					counter=counter+1;
+					}
+					}
+					function drawgreentail1(){
+					x=650;
+					y=400;
+					counter=1;
+					while (counter<30){
+					paint.fillRect(x,y,20,2);
+					x=x+5;
+					y=y+3;
+					counter=counter+1;
+					}
+					}
+					function drawgreentail2(){
+					x=671;
+					y=400;
+					counter=1;
+					while (counter<28){
+					paint.fillRect(x,y,18,2);
+					x=x+5;
+					y=y+3;
+					counter=counter+1;
+					}
+					}
+					function drawgreentail3(){
+					x=690;
+					y=400;
+					counter=1;
+					while (counter<26){
+					paint.fillRect(x,y,16,2);
+					x=x+5;
+					y=y+3;
+					counter=counter+1;
+					}
+					}
+					function drawgreentail4(){
+					x=707;
+					y=400;
+					counter=1;
+					while (counter<24){
+					paint.fillRect(x,y,14,2);
+					x=x+5;
+					y=y+3;
+					counter=counter+1;
+					}
+					}
+					function drawgreentail5(){
+					x=722;
+					y=400;
+					counter=1;
+					while (counter<22){
+					paint.fillRect(x,y,14,2);
+					x=x+5;
+					y=y+3;
+					counter=counter+1;
+					}
+					}
+		</script>
+	</head>
+		<body onload= "draw()">
+			<canvas id="canvas" width="960" height="540"style="border:10px solid #ff8cfd;">
+			</canvas>
+		</body>
+</html>