codice:
<html>
	<head>
		<title>Snake</title>
		<style type="text/css">
			#campo {
				width:				500px;
				height:				500px;
				background-color:	white;
				border:				thin solid black;
			}
			.cella {
				width:				10px;
				height:				10px;
			}
		</style>
		<script type="text/javascript">
			// riempio il campo di celle vuote
			function inizia() {
				creaCelle();
			}
			
			// crea nuova cella vuota
			function creaCelle() {
				for(var i=0; i<2500; i++) {
					var cella = document.createElement("div");
					cella.setAttribute("class", "cella");
					var img = document.createElement("img"); // creo attributo immagine
					img.setAttribute("src", "vuota.png");
					img.setAttribute("id", i);
					img.setAttribute("alt", i);
					cella.appendChild(img);
					document.getElementById("campo").appendChild(cella);
				}
			}
		</script>
	</head>
	<body onload="inizia()">
		<div id="campo">  </div>
	</body>
</html>
Questa funzione dovrebbe riempire il div "campo" con 2500 div con dentro un'immagine.
Sto cercando di fare uno snake molto semplice.

Purtroppo però non capisco come mai i div mi appaiono tutti uno sotto l'altro e non una accanto all'altro.