chess-board.html


<!DOCTYPE html>
<html>
	<head>
		<title>Chess Board - Canvas Excersice</title>
		<style>
		* {
			padding: 0px;
			margin: 0px;
		}
		canvas {
			border: 1px solid gray;
			background: black;
		}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script>
		var loading;
		var game = {
			canvas: document.querySelector("#canvas"),
			start: function() {
				this.canvas.width = 400;
				this.canvas.height = 400;
				this.context = this.canvas.getContext("2d");
				this.interval = setInterval(update, 20);
			},
			clear: function() {
				this.context.fillStyle = '#ff6';
				this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
				// this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
			}
		}
		function shape(width, height, color, x, y) {
			this.width = width;
			this.height = height;
			this.x = x;
			this.y = y;
			this.update = function(){
				game.context.fillStyle = color;
				game.context.fillRect(this.x, this.y, this.width, this.height);
			}
		}
		function start() {
			loading = new shape(20, 20, "yellow", 0, 0);
			game.start();
		}
		var item=1;
		function draw(x, y) {
			if(x > 400 || y > 400 || x < 0 || y < 0) {
				return;
			}
			console.log("Draw: "+x+","+y);
			loading.x=x;
			loading.y=y;
			loading.update();
		}
		var n=0;
		var m=0;
		function update() {
			if(n>((400/40)*38)*2) {
				game.clear();
			}
			draw(m, n-m);
			m+=20;
			if(m>n*20) {
				n+=40;
				m=0;
			}
		}
		window.addEventListener("load", function() {
			start();
			update();
		});
		</script>
	</body>
</html>