132 lines
6.8 KiB
HTML
132 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<link rel="icon" href="imgs/owlogo.png" type="image/x-icon">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
|
<script src="tictactoe.js"></script>
|
|
<title>Tic Tact Toe</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="jumbotron" id="fejlec">
|
|
<h1 class="display-3 text-center cim">Overwatch Heroes</h1>
|
|
<div class="row nopadding">
|
|
<div class="col-md-8 d-none d-md-block nopadding">
|
|
<p class="roles nopadding">ROLES</p>
|
|
</div>
|
|
<div class="col-md-4 nopadding"><a class="play playing nopadding" href="index.html">TIC TAC TOE</a></div>
|
|
</div>
|
|
<div class="row nav nopadding">
|
|
<div class="col-md-8 nopadding">
|
|
<div class="row nopadding">
|
|
<div class="col-4 nopadding">
|
|
<a class="d-sm-block d-none role" href="damage.html"><img class="d-inline imgroles" src="imgs/damage.png" alt=""> DAMAGE</a>
|
|
<a class="d-sm-none d-block role" href="damage.html"><img class="d-inline imgroles" src="imgs/damage.png" alt=""></a>
|
|
</div>
|
|
<div class="col-4 nopadding">
|
|
<a class="d-sm-block d-none role" href="tank.html"><img class="imgroles" src="imgs/tank.png" alt=""> TANK</a>
|
|
<a class="d-sm-none d-block role" href="tank.html"><img class="imgroles" src="imgs/tank.png" alt=""></a>
|
|
</div>
|
|
<div class="col-4 nopadding">
|
|
<a class="d-sm-block d-none role" href="support.html"><img class="imgroles" src="imgs/support.png" alt=""> SUPPORT</a>
|
|
<a class="d-sm-none d-block role" href="support.html"><img class="imgroles" src="imgs/support.png" alt=""></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 nopadding">
|
|
<p class="credit">CREATAED BY:<img class="owlogo" src="imgs/owlogo.png" alt=""><br> BALDAUF MÁRTON</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row nopadding jumbotron" id="torzs">
|
|
<div id="blue" class="col-xl-3">
|
|
<table id="blueheroselect" class="d-block">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="3">
|
|
<p class="hero nopadding">Select your hero!</p>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<script>
|
|
var heroes = ["soldier76", "genji", "tracer", "reinhardt", "dva", "winston", "mercy", "zenyatta", "lucio"];
|
|
for (i = 0; i < 3; i++) {
|
|
document.write('<tr>');
|
|
for (j = 0; j < 3; j++) {
|
|
document.write('<td class="selecthero"><input type="button" class="heroicon" id="blue-' + heroes[i * 3 + j] + '" onclick="selectedblue(event)"></td>');
|
|
document.getElementById("blue-" + heroes[i * 3 + j]).style.backgroundImage = 'url("imgs/icons/' + heroes[i * 3 + j] + '.png")';
|
|
}
|
|
document.write('</tr>');
|
|
}
|
|
</script>
|
|
</tbody>
|
|
</table>
|
|
<p id="bluegameover" class="hero display-3 nopadding d-none"></p>
|
|
</div>
|
|
<div id="green" class="col-xl-6">
|
|
<table class="board">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="3">
|
|
<p class="display-3 text-center hero nopadding">Tic-Tac-Toe</p>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<script>
|
|
for (i = 0; i < 3; i++) {
|
|
document.write('<tr>');
|
|
for (j = 0; j < 3; j++) {
|
|
document.write('<td><input class="tictactoe nopadding" type="button" id="p' + j + i + '" onclick="game(event)"></td>');
|
|
}
|
|
document.write('</tr>');
|
|
}
|
|
</script>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<th colspan="3">
|
|
<p id="score" class="hero display-3 nopadding"></p>
|
|
</th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
<div class="controls"><input class="newgame nopadding" type="button" value="NEW GAME" onclick="newgame()"></div>
|
|
</div>
|
|
<div id="red" class="col-xl-3">
|
|
<table id="redheroselect" class="d-block">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="3">
|
|
<p class="hero nopadding">Select your hero!</p>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<script>
|
|
var heroes = ["soldier76", "genji", "tracer", "reinhardt", "dva", "winston", "mercy", "zenyatta", "lucio"];
|
|
for (i = 0; i < 3; i++) {
|
|
document.write('<tr>');
|
|
for (j = 0; j < 3; j++) {
|
|
document.write('<td class="selecthero"><input type="button" class="heroicon" id="red-' + heroes[i * 3 + j] + '" onclick="selectedred(event)"></td>')
|
|
document.getElementById("red-" + heroes[i * 3 + j]).style.backgroundImage = 'url("imgs/icons/' + heroes[i * 3 + j] + '.png")';
|
|
}
|
|
document.write('</tr>');
|
|
}
|
|
</script>
|
|
</tbody>
|
|
</table>
|
|
<p id="redgameover" class="hero display-3 nopadding d-none"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |