Siirry suoraan sisältöön

Minesweeper-peli

  • tehnyt

Koodasin harrasteprojektina Windows 3.1 -henkisen Minesweeper-pelin.  Tällä hetkellä pelin perusmekaniikka toimii, mutta Game Overin jälkeen sivu täytyy ladata uudelleen, jotta pelin voi aloittaa alusta. Hienosäädän nuo vielä kohdalleen hiljalleen.

*** Siirry pelaamaan! ***

Tekninen toteutus

Peli on rakennettu Javascriptillä ja p5*js-kirjastolla.

HTML on hyvin yksinkertainen – se lähinnä lataa Javascriptin:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
<script src="cell.js"></script>   
<script src="main.js"></script>
<style>
  html, body {
  height: 100%;
}
body {
    background: black;
    background-image: url('body_background.png');
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
</head>
<body>
<!-- Windows 3.1 -tyylinen Minesweeper (c) Panu Pentikäinen, 19.10.2020 -->
</body>
</html>

main.js hoitaa pääasiat. cell.js sisältää Javascript-luokan solulle.

Vaikein asia toteuttaa

Eniten piti miettiä, miten ”flood fill” tehdään, eli se kun klikataan tyhjää ruutua ja sitten se avaa kaikki viereiset tyhjät ruudut sekä niiden ympärillä olevat numeroidut ruudut. Lopulta ratkaisu oli yksinkertaisen tehokas rekursiivinen naapurineliöiden tarkastaminen:

    floodFill() {
       for ( let dx = -1; dx <=1; dx++) {
            for ( let dy = -1; dy <=1; dy++) {
                let myX = dx + this.col;
                let myY = dy + this.row;
                if ( myX >= 0 && myX < cols && myY >= 0 && myY < rows) {
                    var neighbour = cells[myX][myY];
                    if (!neighbour.hasBomb) {
                        // paljasta naapuri, jossa ei ole miinaa
                        neighbour.reveal();
                    }
                }
            }       
        }
    }

Grafiikka

Piirsin grafiikat PhotoShopilla liikoja värejä vältellen. Windows 3.1 -aikaan 16 väriä oli paljon. 🙂