diff --git a/.idea/Szirovicza_Attila_M60EVT (4).iml b/.idea/Szirovicza_Attila_M60EVT (4).iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/Szirovicza_Attila_M60EVT (4).iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..a55e7a1 --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..b65bb46 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 0000000..bed83b2 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + 1660992580189 + + + + + + + + + + + + \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..f2bbf00 --- /dev/null +++ b/README.md @@ -0,0 +1,6 @@ +# mm2021 + +This is a simple minesweeper project written in the following technologies: +- HTML +- CSS +- Javascript diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..c3f597c --- /dev/null +++ b/css/main.css @@ -0,0 +1,124 @@ +header { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 5%; + background-color: #05386B; + color: white; + text-align: center; + font-size: 16px; +} + +html { + /*position: fixed;*/ + background-color: #659DBD; + color: white; + /*left: 0; + width: 100%; + top: 5%; + bottom: 5%; + height: 90%;*/ +} + +main { + padding-top: 5%; + padding-bottom: 5%; +} + +footer { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + height: 5%; + color: white; + background-color: black; + text-align: center; +} + +#minefield { + margin-top: auto; + margin-left: auto; + margin-right: auto; + margin-bottom: auto; +} + +#minefield TR TD{ + border:1px solid white; + background: #999999; + width: 20px; + height: 20px; + text-align: center; +} + +#minefield TR TD.clicked { + background: #333333; +} + +#minefield TR TD.akna { + background: #FF0000; +} + +#beallitasok { + margin-top: 2%; + text-align: center; +} + +label { + font-size: 20px; +} + +#top_list { + width: 300px; + height: 500px; + border-left: 3px solid black; + float: right; + background-color: lightgray; +} + +#game_area { + width: 200px; + height: 500px; + position: absolute; + float: left; +} + +#time_div { + top: 30px; + left: 10px; + position: absolute; +} + +#wrapper2 { + width: 500px; + height: 500px; + border: 3px solid; + margin: 0 auto; +} + +.button { + width: 100px; + height: 50px; + background-color: bisque; + border-radius: 10px; + border: 1px solid rgba(81, 203, 238, 1);; + box-shadow: 0 0 5px rgba(81, 203, 238, 1); + position: absolute; + top: 200px; + left: 50px; + cursor: pointer; +} + +#click { + top: 70px; + left: 10px; + position: absolute; +} + +#list { + left: 0; + font-size: 18px; + position: relative; + text-align: center; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..31620df --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + Minesweeper + + + + + +
+
+
+
+
+
+
+ +
+ +
+ +
+
+
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/javascript/app.js b/javascript/app.js new file mode 100644 index 0000000..40cfc16 --- /dev/null +++ b/javascript/app.js @@ -0,0 +1,123 @@ +window.addEventListener("DOMContentLoaded", event => { + const audio = document.querySelector("audio"); + audio.volume = 0.05; + audio.play(); +}); + +var minefield = document.getElementById("minefield"); +var radio = document.getElementsByName("diff"); +var neheseg; + +// valtozo a jatekteruletnek +let game_area; +// mennyitol szamoljunk vissza +let time = 3; + +generateMinefield(); + + +function diff() { + //nehesegi szint atallitasa + var asd = 0; + for (var i = 0; i < radio.length; i++) { + if(radio[i].checked) { + asd = radio[i].value; + console.log(asd); + } + } + return asd; +} + +function generateMinefield() { + + //aknamezo generalasa + + //aknamezo tartalmanak torlese + minefield.innerHTML = ""; + + //nehezsegi szint + neheseg = diff(); + + //uj aknamezo generalasa + for (var i = 0; i < neheseg; i++) { + row = minefield.insertRow(i); + for (var j = 0; j < neheseg; j++) { + cell = row.insertCell(j); + cell.onclick = function() { + clickCell(this); + }; + var mine = document.createAttribute("felderitetlen"); + mine.value = "false"; + cell.setAttributeNode(mine); + } + } + //feltoltes aknakkal + addMines(); +} + +function addMines() { + //aknak random elhelyezese + + for (var i = 0; i < (neheseg*2); i++) { + var row = Math.floor(Math.random() * neheseg); + var col = Math.floor(Math.random() * neheseg); + var cell = minefield.rows[row].cells[col]; + cell.setAttribute("felderitetlen","true"); + } +} + +function revealMines() { + //az aknak megjelolese pirossal + for (var i = 0; i < neheseg; i++) { + for(var j = 0; j < neheseg; j++) { + var cell = minefield.rows[i].cells[j]; + if (cell.getAttribute("felderitetlen") == "true") { + cell.className = "akna"; + } + } + } +} + +function checkLevelCompletion() { + //annak leellenorzese, h a jatekos minden aknak felderitett-e + var levelComplete = true; + for (var i = 0; i < neheseg; i++) { + for(var j = 0; j < neheseg; j++) { + if ((minefield.rows[i].cells[j].getAttribute("felderitetlen") == "false") && + (minefield.rows[i].cells[j].innerHTML == "")) levelComplete=false; + } + } + if (levelComplete) { + alert("Győztél!"); + revealMines(); + } +} + +function clickCell(cell) { + //a jatekos aknara lepett-e? + if (cell.getAttribute("felderitetlen") == "true") { + revealMines(); + alert("Vesztettél!"); + } else { + cell.className = "clicked"; + //lehetseges aknak szamanak felfedese + var mineCount = 0; + var cellRow = cell.parentNode.rowIndex; + var cellCol = cell.cellIndex; + for (var i = Math.max(cellRow-1,0); i <= Math.min(cellRow + 1,9); i++) { + for(var j = Math.max(cellCol-1,0); j <= Math.min(cellCol + 1,9); j++) { + if (minefield.rows[i].cells[j].getAttribute("felderitetlen") == "true") mineCount++; + } + } + cell.innerHTML = mineCount; + if (mineCount == 0) { + //minden olyan egybefuggo mezo felfedése, amin nincs akna + for (var i = Math.max(cellRow-1,0); i <= Math.min(cellRow + 1,9); i++) { + for(var j = Math.max(cellCol-1,0); j <= Math.min(cellCol + 1,9); j++) { + if (minefield.rows[i].cells[j].innerHTML == "") clickCell(minefield.rows[i].cells[j]); + } + } + } + checkLevelCompletion(); + } +} \ No newline at end of file diff --git a/resources/8bit_trip.mp3 b/resources/8bit_trip.mp3 new file mode 100644 index 0000000..e0add1f Binary files /dev/null and b/resources/8bit_trip.mp3 differ