JavaScript - czyszczenie ekranu

pytanie zadane 3 września 2016 w JavaScript przez Miki Bywalec (2,480 p.)

Uczę się JS i wpadłem na "genialny pomysł" aby zrobić sobie mapę za pomocą tablic, podobną jak w konsolowym C++. Prawie wszystko śmiga prócz czyszczenia ekranu, tablica rysuje się pod tablicą i robi się bałagan. Jest jakaś "komenda" na czyszczenie ekranu tak jak w C++? W jQuery widzę funkcję na zanikanie obrazu ale to chyba działa tylko na obrazki. Odświeżenie strony odpada bo się cała mapa resetuje. Proszę o pomoc jak to sensownie rozwiązać

index.html

<!DOCTYPE HTML>
<html lang="pl">
<html>
	<head>
		<meta charset="utf-8" />
		<script src="script.js" async></script>
		
	</head>
	<body onload="rysuj()">	
			
		<div id="rezultat"></div>
			
		<input type="submit" value="Lewa" onclick="lewa()" />
		<input type="submit" value="Prawa" onclick="prawa()" />

	</body>
</html>

script.js

var tab = [		
	[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]	,	
	[1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1]	,	
	[1,2,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1]	,	
	[1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1]	,	
	[1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1]	,		
	[1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1]	,	
	[1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1]	,	
	[1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1]	,	
	[1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1]	,		
	[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
	];
	
	function rysuj()
	{
		var rezultat = document.getElementById("rezultat");
	
		for (y = 0; y < 10; y++)
		{
			for (x = 0; x < 20; x++)
			{
				rezultat.innerHTML += tab[y][x] + "&nbsp";	
			}	
			rezultat.innerHTML += "<br />";	
		}
	}
	
	var yy = 2;
	var xx = 2;
	
	function lewa()
	{
		
	}
	
	function prawa()
	{
		var x2 = xx+1;
            if(tab[yy][x2] == '2')
            {
                tab[yy][xx] = '2';
                xx++;
                tab[yy][xx] = '3';
            }
				
		rysuj();
	}