143 lines
8.0 KiB
HTML
143 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="hu">
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Ki nevet a végén</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
|
|
<!--Húsvétra jó lesz 🐰🥚-->
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="script.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1 class="display-3">Ki nevet a végén?</h1>
|
|
</header>
|
|
<div id="gamemode">
|
|
<h3 class="display-4">Játékmód kiválasztása</h3>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div class="gamemodes" onclick="init(2)">
|
|
<img class="img-thumbnail img-fluid" src="img/level2.png" width="300px" alt="2 játékos mód" title="2 játékos mód">
|
|
<p class="lead">2 játékos mód</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="gamemodes" onclick="init(3)">
|
|
<img class="img-thumbnail img-fluid" src="img/level3.png" alt="3 játékos mód" title="3 játékos mód">
|
|
<p class="lead">3 játékos mód</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-4" onclick="init(4)">
|
|
<div class="gamemodes">
|
|
<img class="img-thumbnail img-fluid" src="img/level4.png" alt="4 játékos mód" title="4 játékos mód">
|
|
<p class="lead">4 játékos mód</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="game" id="game">
|
|
<div class="center">
|
|
<div class="jumbotron inside dice">
|
|
<img src="img/dice1.png" class="rounded" alt="dobókocka" id="dice" title="dobókocka">
|
|
<button id="roll" type="button" class="btn btn-outline-secondary" onclick="dice()">DOBÁS</button>
|
|
</div>
|
|
<div class="jumbotron inside2">
|
|
<img src="img/info_icon.png" style="width: 30px; height: 30px; position: absolute; right: 0px; top: 0px;" data-toggle="modal" data-target="#guideModalLong" alt="Guide" title="Segítség">
|
|
<div class="circle">
|
|
<img src="img/blue.png" class="rounded" alt="Játékos" id="nextPlayer" title="Kék játékos">
|
|
</div>
|
|
<div class="nextPlayer">
|
|
<h5>A soron következő játékos</h5>
|
|
<p id="nextPlayerColor">Kék</p>
|
|
<div class="abilities row">
|
|
<div class="col-4"><img id="ability1" style="background-color: green;" src="img/ignite.png" onclick="spell(1)" class="img-thumbnail img-fluid zoom" title="A dobás után felégeti az áthaladott mezőket a játékos következő köréig." alt="Felégetés"></div>
|
|
<div class="col-4"><img id="ability2" style="background-color: green;" src="img/ghost.png" onclick="spell(2)" class="img-thumbnail img-fluid zoom" title="A dobott érték kétszeresével lép előre a játékos." alt="Gyorsaság"></div>
|
|
<div class="col-4"><img id="ability3" style="background-color: green;" src="img/freeze.png" onclick="spell(3)" class="img-thumbnail img-fluid zoom" title="A legelső játékos kimarad egy körből." alt="Fagyasztás"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<canvas id="canvas" width="600" height="600"></canvas>
|
|
<div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="guideModalLong" tabindex="-1" role="dialog" aria-labelledby="guideModalLongTitle" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="guideModalLongTitle">Segítség</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="guide">
|
|
<div class="row">
|
|
<div class="smallCircle" style="background-color: darkblue;"></div>
|
|
<div class="display-5 guideText">Újratölti a játékos összes képességet</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="smallCircle" style="background-color: magenta;"></div>
|
|
<div class="display-5 guideText">A játékos még egyszer dobhat</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="smallCircle" style="background-color: aqua;"></div>
|
|
<div class="display-5 guideText">A játékos kimarad a körből</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="display-5 guideText">A képességek bővebb leírásához vidd fölé az egeret!</div>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
|
|
<div class="display-5" style="text-align: right; font-weight: lighter;">Note: A képességek a kocka eldobásával sülnek el</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="winner container" id="winner">
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLongTitle" style="font-size: 30px;">Győztes</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<img src="img/crown.png" width="350px" style="position: absolute; top: -65px; left: 80px;">
|
|
<br>
|
|
<br>
|
|
<img src="" id="winnerColor" class="center" style="width: 100px;" alt="">
|
|
<br>
|
|
<h4 class="text-center" id="winnerText"></h4>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Bezárás</button>
|
|
<button type="button" class="btn btn-success" onclick="location.reload();">Új játék</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |