Lekcja 3 do dokończenia
This commit is contained in:
aplikacje committed
1 parent
a9964d8d41
commit
058e5718a6
2 files changed
+9959
No files matched your search
Vendored
+9680
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,279 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lekcja 3</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgb(40, 40, 45);
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: darkslategray;
|
||||
width: fit-content;
|
||||
padding: 1em;
|
||||
margin: 1em auto;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin: 1em .5em;
|
||||
border: none;
|
||||
padding: 1em;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#start {
|
||||
background-color: skyblue;
|
||||
}
|
||||
|
||||
#ruch {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#reset {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#start:hover {
|
||||
background-color: blueviolet;
|
||||
}
|
||||
|
||||
#ruch:hover {
|
||||
background-color: blueviolet;
|
||||
}
|
||||
|
||||
#reset:hover {
|
||||
background-color: blueviolet;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#plansza {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
background-color: azure;
|
||||
margin: .5em auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#wiadomosc {
|
||||
height: 1em;
|
||||
margin: 1em;
|
||||
margin-bottom: .5em;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pole {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
background-color: gray;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.pole:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gracz {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
|
||||
left: -40px;
|
||||
|
||||
transition: all 100ms ease;
|
||||
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 3px solid green;
|
||||
}
|
||||
|
||||
#gracz1 {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
#gracz2 {
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
<script src="lib/jquery.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
const wiersze = 5
|
||||
const kolumny = 5
|
||||
|
||||
let started = false
|
||||
let tura_g1 = true
|
||||
let licznik_g1 = 0
|
||||
let licznik_g2 = 0
|
||||
|
||||
let wspolrzedne = new Array()
|
||||
|
||||
for (let i = 0; i < wiersze; i++) {
|
||||
for (let j = 0; j < kolumny; j++) {
|
||||
const pole = $("<div>").addClass("pole")
|
||||
|
||||
let id = (i * wiersze) + j
|
||||
let poleX = (j * 60) + 20
|
||||
let poleY = (i * 60) + 20
|
||||
|
||||
pole.css("left", poleX)
|
||||
pole.css("top", poleY)
|
||||
|
||||
pole.on("click", function () {
|
||||
let pass = false
|
||||
|
||||
if (wspolrzedne.length == 0) { pass = true } else {
|
||||
if (wspolrzedne[wspolrzedne.length - 1].i == i) {
|
||||
if (wspolrzedne[wspolrzedne.length - 1].j - 1 == j | wspolrzedne[wspolrzedne.length - 1].j + 1 == j) {
|
||||
pass = true
|
||||
}
|
||||
} else if (wspolrzedne[wspolrzedne.length - 1].j == j) {
|
||||
if (wspolrzedne[wspolrzedne.length - 1].i - 1 == i | wspolrzedne[wspolrzedne.length - 1].i + 1 == i) {
|
||||
pass = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (pass) {
|
||||
let deleted = false
|
||||
for (let k = 0; k < wspolrzedne.length; k++) {
|
||||
if (wspolrzedne[k].id == id) {
|
||||
$(this).css("background-color", "gray")
|
||||
wspolrzedne.splice(k, 1)
|
||||
deleted = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (!deleted) {
|
||||
wspolrzedne.push({ id: id, posX: poleX, posY: poleY, i: i, j: j })
|
||||
$(this).css("background-color", "green")
|
||||
}
|
||||
|
||||
$("#wiadomosc").text(`Ścieżka ma ${wspolrzedne.length} pól.`)
|
||||
} else {
|
||||
$("#wiadomosc").text(`Dziura w ścieżce!`)
|
||||
}
|
||||
})
|
||||
$("#plansza").prepend(pole)
|
||||
}
|
||||
}
|
||||
|
||||
$("#start").on("click", function () {
|
||||
if (!started) {
|
||||
if (wspolrzedne.length < 3) {
|
||||
$("#wiadomosc").text("Musisz wybrać co najmniej 3 pola!")
|
||||
} else {
|
||||
started = true
|
||||
|
||||
licznik_g2 = wspolrzedne.length - 1;
|
||||
|
||||
$("#gracz1").css("left", wspolrzedne[licznik_g1].posX)
|
||||
$("#gracz1").css("top", wspolrzedne[licznik_g1].posY)
|
||||
|
||||
$("#gracz2").css("left", wspolrzedne[licznik_g2].posX)
|
||||
$("#gracz2").css("top", wspolrzedne[licznik_g2].posY)
|
||||
|
||||
$("#wiadomosc").text("Gra rozpoczęta! Gracz 1 zaczyna.")
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
$("#ruch").on("click", function () {
|
||||
if (started) {
|
||||
if (tura_g1) {
|
||||
if (licznik_g1 >= wspolrzedne.length - 1) {
|
||||
$("#wiadomosc").text("Koniec gry dla gracza 1!")
|
||||
} else {
|
||||
licznik_g1++
|
||||
$("#gracz1").css("left", wspolrzedne[licznik_g1].posX)
|
||||
$("#gracz1").css("top", wspolrzedne[licznik_g1].posY)
|
||||
$("#wiadomosc").text("Ruch gracza 1. Teraz ruch gracza 2.")
|
||||
}
|
||||
} else {
|
||||
if (licznik_g2 <= 0) {
|
||||
$("#wiadomosc").text("Koniec gry dla gracza 2!")
|
||||
} else {
|
||||
licznik_g2--
|
||||
$("#gracz2").css("left", wspolrzedne[licznik_g2].posX)
|
||||
$("#gracz2").css("top", wspolrzedne[licznik_g2].posY)
|
||||
$("#wiadomosc").text("Ruch gracza 2. Teraz ruch gracza 1.")
|
||||
}
|
||||
}
|
||||
|
||||
tura_g1 = !tura_g1
|
||||
}
|
||||
})
|
||||
|
||||
$("#reset").on("click", function () {
|
||||
$("#gracz1").css("left", "-40px")
|
||||
$("#gracz2").css("left", "-40px")
|
||||
$("#gracz1").css("top", "0px")
|
||||
$("#gracz2").css("top", "0px")
|
||||
|
||||
wspolrzedne = []
|
||||
tura_g1 = true
|
||||
licznik_g1 = 0
|
||||
licznik_g2 = 0
|
||||
started = false
|
||||
|
||||
$(".pole").css("background-color", "gray")
|
||||
$("#wiadomosc").text("Wybierz co najmniej 3 pola i naciśnij START GRY")
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<h1>Labirynt - tablice obiektów</h1>
|
||||
<nav>
|
||||
<button id="start">START GRY</button>
|
||||
<button id="ruch">RUCH GRACZA</button>
|
||||
<button id="reset">RESETUJ</button>
|
||||
</nav>
|
||||
<div id="plansza">
|
||||
<div id="gracz1" class="gracz">1</div>
|
||||
<div id="gracz2" class="gracz">2</div>
|
||||
</div>
|
||||
<div id="wiadomosc">Wybierz co najmniej 3 pola i naciśnij START GRY</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in new issue
Block a user