HTML, CSS and JavaScript playground

/* Write JavaScript here */
var x = 0;
var y = 0;

//Zå—ãƒ–ãƒãƒƒã‚¯ã®ä¸€ç²’ä¸€ç²’ã®åº§æ¨™

var w = 20;
var h = 20;
//ãƒ–ãƒãƒƒã‚¯ä¸€ç²’ã®å¤§ãã•

//draw();
setInterval("down()",500);

function down(){
	if(y < 460){
		y = y + 20;
		draw();
	}
}

function draw(){
	var canvas = document.getElementById('canvas');
	if (canvas.getContext){
		
		var zType = canvas.getContext('2d');
		
		zType.clearRect(0,0,200,500);
		zType.fillStyle = "#000000";

zType.fillRect(x,y, w, h);
		zType.fillRect(x + 20,y, w, h);
		zType.fillRect(x + 20,y + 20, w, h);
		zType.fillRect(x + 40,y + 20, w, h);
		
//		zType.clearRect(0,0,200,500);
		zType.strokeStyle = "#ffffff";

zType.strokeRect(x,y, w, h);
		zType.strokeRect(x + 20,y, w, h);
		zType.strokeRect(x + 20,y + 20, w, h);
		zType.strokeRect(x + 40,y + 20, w, h);

//Zå—
/*
		var iType = canvas.getContext('2d');
		
		iType.clearRect(0,0,200,500);
		iType.fillStyle = "#000000";

iType.fillRect(x,y, w, h);
		iType.fillRect(x + 20,y, w, h);
		iType.fillRect(x + 40,y, w, h);
		iType.fillRect(x + 60,y, w, h);
		
		iType.strokeStyle = "#ffffff";

iType.strokeRect(x,y, w, h);
		iType.strokeRect(x + 20,y, w, h);
		iType.strokeRect(x + 40,y, w, h);
		iType.strokeRect(x + 60,y, w, h);
		//Iå—
*/

/*		
		var iType = canvas.getContext('2d');
		iType.fillRect(100, 100, 10, 10);
		iType.fillRect(100, 111, 10, 10);
		iType.fillRect(100, 122, 10, 10);
		iType.fillRect(100, 133, 10, 10);
		//Iå—
*/
	}
}

document.onkeydown = cursor;

function cursor(evt){
	if(evt.which == 37 && x > 0 && y < 460){		//å·¦ã‚’æŠ¼ã—ãŸæ™‚ã®ãƒ–ãƒãƒƒã‚¯ã®å‹•ã
		x = x - 20;

}
	if(evt.which == 39 && x < 140 && y < 460){		//å³ã‚’æŠ¼ã—ãŸæ™‚ã®ãƒ–ãƒãƒƒã‚¯ã®å‹•ã
		x = x + 20;

}
	if(evt.which == 40 && y < 460){		//ä¸‹ã‚’æŠ¼ã—ãŸæ™‚ã®ãƒ–ãƒãƒƒã‚¯ã®å‹•ã
		y = y + 20;

}

if(evt.which == 38 && y < 460){		//ä¸Šã‚’æŠ¼ã—ãŸæ™‚ã®ãƒ–ãƒãƒƒã‚¯ã®å‹•ã

var zType = canvas.getContext('2d');
		
		zType.clearRect(0,0,200,500);
		zType.fillStyle = "#000000";

zType.strokeRect(x,y, w, h);
		zType.strokeRect(x + 20,y, w, h);
		zType.strokeRect(x + 20,y + 20, w, h);
		zType.strokeRect(x + 40,y + 20, w, h);

zType.clearRect(0,0,200,500);

zType.fillStyle = "#000000";
		
		zType.fillRect(x + 20,y,w,h);
		zType.fillRect(x + 20,y + 20,w,h);
		zType.fillRect(x,y + 20,w,h);
		zType.fillRect(x,y + 40,w,h);

zType.strokeStyle = "#ffffff";

zType.strokeRect(x + 20,y,w,h);
		zType.strokeRect(x + 20,y + 20,w,h);
		zType.strokeRect(x,y + 20,w,h);
		zType.strokeRect(x,y + 40,w,h);

}
	draw();
}