Dopo l'introduzione Creare un browser game (HTML+CSS+JS) - parte1, in cui ho implementato semplicemente il gioco del tris per il browser (con grafica semplice), ecco ora un lavoro un po' più complesso, abbiamo il gioco della Dama! Il funzionamento è con Drag&Drop, senza un algoritmo di IA per giocare contro il computer, quindi diciamo una versione digitalizzata del multiplayer che potremmo fare su una scacchiera fisica tradizionale, comprese eventuali mosse sbagliate e violazione delle regole (in realtà può anche essere un punto di vantaggio dato che consente di studiare situazioni specifiche create ad-hoc, posizionamento differente... vedi analogia scacchi eterodossi).
Il programma è quindi di fatto contenuto in un unico file HTML, codice CSS e JavaScript presenti in blocco. La rappresentazione dei pezzi (pedine, dama) non avviene quindi da caricamento di file esterni ma comandi di grafica vettoriale svg integrati nelle istruzioni CSS (come visto la volta precedente, con la procedura background-image:url("data:image/svg+xml;utf8, <svg> ... </svg>");). Si gioca semplicemente trascinando i pezzi sulla scacchiera (Drag&Drop), come esercitazione individuale oppure anche es. due persone che giocano dallo stesso dispositivo a turno, trascinando i pezzi con il mouse.
Ecco tutto il codice:
<html>
<head>
<meta name="viewport" width="device-width,initial-scale=1">
<style>
body{
display:flex;
justify-content: center; /*centratura orizzontale*/
align-items: center; /*centratura verticale*/
flex-wrap:wrap; /*andare a capo*/
}
.container{
width:8%;
height:10%;
text-align:center;
cursor:grab;
float:left;
}
#scarti{
background:#eee;
width:33%;
height:50%;
}
#pezzo1,#pezzo2,#pezzo3,#pezzo4,#pezzo5,#pezzo6,#pezzo7,#pezzo8,#pezzo9,#pezzo10,#pezzo11,#pezzo12{
/* pedine nere */
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><circle cx='50%' cy='50%' r='30%' fill='%23000' stroke='%23FF0'/></svg>");
}
#pezzo13,#pezzo14,#pezzo15,#pezzo16,#pezzo17,#pezzo18,#pezzo19,#pezzo20,#pezzo21,#pezzo22,#pezzo23,#pezzo24{
/* pedine bianche */
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><circle cx='50%' cy='50%' r='30%' fill='%23BBB' stroke='%23FF0'/></svg>");
}
#dama1,#dama2,#dama3{
/*dama nera*/
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><circle cx='50%' cy='50%' r='30%' fill='%23000' stroke='%23FF0'/><circle cx='50%' cy='50%' r='15%' fill='%23FF0'/></svg>");
}
#dama4,#dama5,#dama6{
/*dama bianca*/
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><circle cx='50%' cy='50%' r='30%' fill='%23BBB' stroke='%23FF0'/><circle cx='50%' cy='50%' r='15%' fill='%23FF0'/></svg>");
}
.cella{
width:12%;
height:9%;
border:1px solid #000;
margin-top:0px;
float:left;
}
</style>
</head>
<body>
<div style="width:100%;text-align:center" onclick="window.location.replace('')"><button>Reset</button><br><br></div>
<div id="scarti" style="text-align:center">pezzi scartati</div>
<div style="width:66%">
<div class="cella" id="cella1"></div>
<div class="cella" id="cella2"></div>
<div class="cella" id="cella3"></div>
<div class="cella" id="cella4"></div>
<div class="cella" id="cella5"></div>
<div class="cella" id="cella6"></div>
<div class="cella" id="cella7"></div>
<div class="cella" id="cella8"></div>
<div class="cella" id="cella9"></div>
<div class="cella" id="cella10"></div>
<div class="cella" id="cella11"></div>
<div class="cella" id="cella12"></div>
<div class="cella" id="cella13"></div>
<div class="cella" id="cella14"></div>
<div class="cella" id="cella15"></div>
<div class="cella" id="cella16"></div>
<div class="cella" id="cella17"></div>
<div class="cella" id="cella18"></div>
<div class="cella" id="cella19"></div>
<div class="cella" id="cella20"></div>
<div class="cella" id="cella21"></div>
<div class="cella" id="cella22"></div>
<div class="cella" id="cella23"></div>
<div class="cella" id="cella24"></div>
<div class="cella" id="cella25"></div>
<div class="cella" id="cella26"></div>
<div class="cella" id="cella27"></div>
<div class="cella" id="cella28"></div>
<div class="cella" id="cella29"></div>
<div class="cella" id="cella30"></div>
<div class="cella" id="cella31"></div>
<div class="cella" id="cella32"></div>
<div class="cella" id="cella33"></div>
<div class="cella" id="cella34"></div>
<div class="cella" id="cella35"></div>
<div class="cella" id="cella36"></div>
<div class="cella" id="cella37"></div>
<div class="cella" id="cella38"></div>
<div class="cella" id="cella39"></div>
<div class="cella" id="cella40"></div>
<div class="cella" id="cella41"></div>
<div class="cella" id="cella42"></div>
<div class="cella" id="cella43"></div>
<div class="cella" id="cella44"></div>
<div class="cella" id="cella45"></div>
<div class="cella" id="cella46"></div>
<div class="cella" id="cella47"></div>
<div class="cella" id="cella48"></div>
<div class="cella" id="cella49"></div>
<div class="cella" id="cella50"></div>
<div class="cella" id="cella51"></div>
<div class="cella" id="cella52"></div>
<div class="cella" id="cella53"></div>
<div class="cella" id="cella54"></div>
<div class="cella" id="cella55"></div>
<div class="cella" id="cella56"></div>
<div class="cella" id="cella57"></div>
<div class="cella" id="cella58"></div>
<div class="cella" id="cella59"></div>
<div class="cella" id="cella60"></div>
<div class="cella" id="cella61"></div>
<div class="cella" id="cella62"></div>
<div class="cella" id="cella63"></div>
<div class="cella" id="cella64"></div>
</div>
<!-- <div style="width:100%"><br><br></div> -->
<div class="container" draggable="true" id="pezzo1"> </div><div class="container" draggable="true" id="pezzo2"> </div><div class="container" draggable="true" id="pezzo3"> </div><div class="container" draggable="true" id="pezzo4"> </div><div class="container" draggable="true" id="pezzo5"> </div><div class="container" draggable="true" id="pezzo6"> </div><div class="container" draggable="true" id="pezzo7"> </div></div><div class="container" draggable="true" id="pezzo8"> </div><div class="container" draggable="true" id="pezzo9"> </div><div class="container" draggable="true" id="pezzo10"> </div><div class="container" draggable="true" id="pezzo11"> </div><div class="container" draggable="true" id="pezzo12"> </div><div class="container" draggable="true" id="pezzo13"> </div><div class="container" draggable="true" id="pezzo14"> </div><div class="container" draggable="true" id="pezzo15"> </div><div class="container" draggable="true" id="pezzo16"> </div><div class="container" draggable="true" id="pezzo17"> </div><div class="container" draggable="true" id="pezzo18"> </div><div class="container" draggable="true" id="pezzo19"> </div><div class="container" draggable="true" id="pezzo20"> </div><div class="container" draggable="true" id="pezzo21"> </div><div class="container" draggable="true" id="pezzo22"> </div><div class="container" draggable="true" id="pezzo23"> </div><div class="container" draggable="true" id="pezzo24"> </div>
<div class="container" draggable="true" id="dama1"> </div>
<div class="container" draggable="true" id="dama2"> </div>
<div class="container" draggable="true" id="dama3"> </div>
<div class="container" draggable="true" id="dama4"> </div>
<div class="container" draggable="true" id="dama5"> </div>
<div class="container" draggable="true" id="dama6"> </div>
</div>
<script>
//dama = ogni giocatore 12 pedine
//tramite ID, no classi
for(let i=1;i<=24;i++){ //12x2 pezzi
document.getElementById("pezzo"+i).addEventListener('dragstart', dragStart);
document.getElementById("pezzo"+i).addEventListener('dragend', dragEnd);
}
for(let i=1;i<=6;i++){ //3x2 dame
document.getElementById("dama"+i).addEventListener('dragstart', dragStart);
document.getElementById("dama"+i).addEventListener('dragend', dragEnd);
}
scarti.addEventListener('dragover', dragOver);
scarti.addEventListener('drop', drop);
for(let i=1;i<=64;i++){ //64 celle
document.getElementById("cella"+i).addEventListener('dragover', dragOver);
document.getElementById("cella"+i).addEventListener('drop', drop);
if(i<=8||i>16&&i<=24||i>32&&i<=40||i>48&&i<=56){
if(i%2==0){
document.getElementById("cella"+i).style.background="#666";
}else{
document.getElementById("cella"+i).style.background="#EEE";
}
}
if(i>8&&i<=16||i>24&&i<=32||i>40&&i<=48||i>56&&i<=64){
if(i%2==0){
document.getElementById("cella"+i).style.background="#EEE";
}else{
document.getElementById("cella"+i).style.background="#666";
}
}
}
function dragStart(e) {
e.dataTransfer.setData('text/plain', e.target.id);
}
function dragEnd(e) {
e.target.style.width="100%";
e.target.style.height="100%";
}
function dragOver(e) {
e.preventDefault();
}
function drop(e) {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
e.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
Vediamo in una serie di immagini come appare il gioco. La grafica ovviamente si può ancora migliorare, ad esempio per la rappresentazione della Dama (ho fatto un cerchietto giallo per distinguerla dalle pedine semplici).
Vi piace? Cosa ne pensate? Ora inizierete a creare anche voi qualche browser game? 🙂
