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.
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. 🙂
