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] + " ";
}
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();
}