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.