upload

szirocica · Aug 20, 2022 · 3069c77 · 3069c77
commit 3069c77
Show file tree

Hide file tree

Showing 9 changed files with 356 additions and 0 deletions.
diff --git a/.idea/Szirovicza_Attila_M60EVT (4).iml b/.idea/Szirovicza_Attila_M60EVT (4).iml
diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/README.md 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
@@ -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;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="hu">
+	<head>
+		<title>Minesweeper</title>
+		<meta charset="utf-8">
+		<link rel="stylesheet" type="text/css" href="./css/main.css">
+	</head>
+	<body>
+		<audio src="./resources/8bit_trip.mp3" loop="true" autoplay></audio>
+		<header>
+		</header>
+		<main>
+			<table id="minefield"></table>
+			<div id="beallitasok">
+				<div id="nehezseg">
+					<form id="choose">
+						<input type="radio" name="diff" id="easy" value="10"> 
+						<label for="easy">Könnyű</label><br>
+						<input type="radio" name="diff" id="med" value="20" checked>
+						<label for="med">Közepes</label><br>
+						<input type="radio" name="diff" id="hard" value="40">
+						<label for="hard">Nehéz</label><br>
+					</form>
+				</div>
+				<button onclick="generateMinefield();">Új játék</button>
+			</div>
+			<div id="leaderboard">
+			</div>
+		</main>
+		<footer>
+			<p id="foot">Minesweeper</p>
+		</footer>
+		<script type="text/javascript" src="./javascript/app.js"></script>
+	</body>
+</html>
diff --git a/javascript/app.js 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();
+  }
+}
diff --git a/resources/8bit_trip.mp3 b/resources/8bit_trip.mp3