380 lines
12 KiB
HTML
380 lines
12 KiB
HTML
<!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;
|
|
}
|
|
|
|
.ustawienie {
|
|
height: 4em;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
}
|
|
label {
|
|
color: white;
|
|
font-weight: bold;
|
|
width: 50%;
|
|
}
|
|
#kostka {
|
|
width: 3em;
|
|
height: 3em;
|
|
color: black;
|
|
background-color: azure;
|
|
}
|
|
select {
|
|
padding: .25em;
|
|
background-color: azure;
|
|
border: none;
|
|
}
|
|
</style>
|
|
<script src="lib/jquery.js"></script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
let started = false
|
|
let tura_g1 = true
|
|
let licznik_g1 = 0
|
|
let licznik_g2 = 0
|
|
let dice_thrown = false
|
|
let dice_score = 1
|
|
|
|
let wspolrzedne = new Array()
|
|
|
|
function utworz_plansze(wiersze, kolumny) {
|
|
// wyczysc diva
|
|
/*
|
|
<div id="gracz1" class="gracz">1</div>
|
|
<div id="gracz2" class="gracz">2</div>*/
|
|
$("#plansza").empty()
|
|
|
|
const gracz1div = $("<div>")
|
|
.addClass("gracz")
|
|
.attr("id", "gracz1")
|
|
.text("1")
|
|
|
|
const gracz2div = $("<div>")
|
|
.addClass("gracz")
|
|
.attr("id", "gracz2")
|
|
.text("2")
|
|
|
|
$("#plansza").append(gracz1div)
|
|
$("#plansza").append(gracz2div)
|
|
|
|
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].j == j && wspolrzedne[wspolrzedne.length - 1].i == i) {
|
|
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
|
|
}
|
|
} 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
|
|
}
|
|
}
|
|
}
|
|
|
|
if (pass) {
|
|
let deleted = false
|
|
for (let k = 0; k < wspolrzedne.length; k++) {
|
|
if (wspolrzedne[k].id == id) {
|
|
// usuwanie tylko od końca
|
|
if(k == wspolrzedne.length - 1) {
|
|
$(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!`)
|
|
}
|
|
|
|
if(wspolrzedne.length > 0) {
|
|
$("#rozmiar").attr("disabled", "true")
|
|
} else {
|
|
$("#rozmiar").removeAttr("disabled")
|
|
}
|
|
})
|
|
$("#plansza").prepend(pole)
|
|
}
|
|
}
|
|
}
|
|
|
|
utworz_plansze(5, 5)
|
|
|
|
$("#start").on("click", function () {
|
|
if (!started) {
|
|
if (wspolrzedne.length < 3) {
|
|
$("#wiadomosc").text("Musisz wybrać co najmniej 3 pola!")
|
|
} else {
|
|
started = true
|
|
$(this).attr("disabled", "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(!dice_thrown) {
|
|
$("#wiadomosc").text("Najpierw rzuć kostką!")
|
|
} else {
|
|
if (started) {
|
|
if (tura_g1) {
|
|
if (licznik_g1 >= wspolrzedne.length - 1) {
|
|
$("#wiadomosc").text("Koniec gry dla gracza 1!")
|
|
} else {
|
|
licznik_g1 += dice_score
|
|
if(licznik_g1 > wspolrzedne.length - 1) { licznik_g1 = wspolrzedne.length - 1 }
|
|
$("#gracz1").css("left", wspolrzedne[licznik_g1].posX)
|
|
$("#gracz1").css("top", wspolrzedne[licznik_g1].posY)
|
|
if(licznik_g1 == wspolrzedne.length - 1) {
|
|
$("#wiadomosc").text("Gracz 1 wygrał!")
|
|
$("#ruch").attr("disabled", "true")
|
|
} else {
|
|
$("#wiadomosc").text("Ruch gracza 1. Teraz ruch gracza 2.")
|
|
}
|
|
}
|
|
} else {
|
|
if (licznik_g2 <= 0) {
|
|
$("#wiadomosc").text("Koniec gry dla gracza 2!")
|
|
} else {
|
|
licznik_g2 -= dice_score
|
|
if(licznik_g2 < 0) { licznik_g2 = 0 }
|
|
$("#gracz2").css("left", wspolrzedne[licznik_g2].posX)
|
|
$("#gracz2").css("top", wspolrzedne[licznik_g2].posY)
|
|
if(licznik_g2 == 0) {
|
|
$("#wiadomosc").text("Gracz 2 wygrał!")
|
|
$("#ruch").attr("disabled", "true")
|
|
} else {
|
|
$("#wiadomosc").text("Ruch gracza 2. Teraz ruch gracza 1.")
|
|
}
|
|
}
|
|
}
|
|
|
|
tura_g1 = !tura_g1
|
|
}
|
|
|
|
dice_thrown = false
|
|
}
|
|
})
|
|
|
|
$("#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
|
|
$("#rozmiar").removeAttr("disabled")
|
|
$("#ruch").removeAttr("disabled")
|
|
$("#start").removeAttr("disabled")
|
|
|
|
$(".pole").css("background-color", "gray")
|
|
$("#wiadomosc").text("Wybierz co najmniej 3 pola i naciśnij START GRY")
|
|
})
|
|
|
|
$("#rozmiar").on("change", function() {
|
|
$("#plansza").css("width", `${20*((3*$(this).val()) + 1)}px`).css("height", `${20*((3*$(this).val()) + 1)}px`)
|
|
utworz_plansze($(this).val(), $(this).val())
|
|
})
|
|
|
|
$("#kostka").on("click", function() {
|
|
if(!dice_thrown) {
|
|
dice_score = Math.floor(Math.random() * 6) + 1
|
|
$("#kostka").text(dice_score)
|
|
dice_thrown = true
|
|
}
|
|
})
|
|
})
|
|
</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 class="ustawienie">
|
|
<label for="kostka">Kostka</label>
|
|
<button id="kostka">1</button>
|
|
</div>
|
|
<div class="ustawienie">
|
|
<label for="rozmiar">Rozmiar planszy</label>
|
|
<select name="rozmiar" id="rozmiar">
|
|
<option value="5" selected>5x5</option>
|
|
<option value="10">10x10</option>
|
|
<option value="15">15x15</option>
|
|
</select>
|
|
</div>
|
|
<div id="plansza"></div>
|
|
<div id="wiadomosc">Wybierz co najmniej 3 pola i naciśnij START GRY</div>
|
|
</main>
|
|
</body>
|
|
|
|
</html> |