projekt
This commit is contained in:
commit
1432859a41
BIN
icons/favicon.jpg
Normal file
BIN
icons/favicon.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
45
index.html
Normal file
45
index.html
Normal file
@ -0,0 +1,45 @@
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Kółko i krzyżyk</title>
|
||||
<link rel="icon" href="icons\favicon.jpg"/>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="message">
|
||||
<h1 id="areatext">Zaczynajmy!</h1>
|
||||
<label for="tic-tac-toe"><span id="whos">Kim chcesz zagrac?</span></label>
|
||||
<select id="optionslist">
|
||||
<option value="1" disabled selected hidden>Wybierz..</option>
|
||||
<option value="2">Kółko</option>
|
||||
<option value="3">Krzyżyk</option>
|
||||
</select>
|
||||
<button type="button" id="start">START!</button>
|
||||
</div>
|
||||
|
||||
<div hidden id="for-button">
|
||||
<button type="button" id="restart">Zacznij do nowa</button>
|
||||
</div>
|
||||
|
||||
<div hidden id="thegame">
|
||||
<table id="gamearea">
|
||||
<tr>
|
||||
<th x="0" y="0"></th>
|
||||
<th x="1" y="0"></th>
|
||||
<th x="2" y="0"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th x="0" y="1"></th>
|
||||
<th x="1" y="1"></th>
|
||||
<th x="2" y="1"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th x="0" y="2"></th>
|
||||
<th x="1" y="2"></th>
|
||||
<th x="2" y="2"></th>
|
||||
</tr>
|
||||
</table>
|
||||
<script type="text/javascript" src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
106
script.js
Normal file
106
script.js
Normal file
@ -0,0 +1,106 @@
|
||||
var table;
|
||||
var gamearea;
|
||||
var move_number;
|
||||
|
||||
window.addEventListener("load", function(){
|
||||
document.getElementById("start").addEventListener("click", function(){
|
||||
document.getElementById("message").hidden = true;
|
||||
document.getElementById("thegame").hidden = false;
|
||||
document.getElementById("for-button").hidden = false;
|
||||
if(document.getElementById('optionslist').value !== "2") {
|
||||
new_game("x");
|
||||
}
|
||||
else if(document.getElementById('optionslist').value == "2") {
|
||||
new_game("O");
|
||||
}
|
||||
if (document.getElementById('optionslist').value == "1") {
|
||||
alert("Musisz wybrać O albo X!");
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById("restart").addEventListener("click", function() {
|
||||
if(document.getElementById('optionslist').value !== "2") {
|
||||
new_game("x");
|
||||
}
|
||||
else if(document.getElementById('optionslist').value == "2") {
|
||||
new_game("O");
|
||||
}
|
||||
});
|
||||
|
||||
gamearea = document.getElementById("gamearea");
|
||||
gamearea.addEventListener("click", function(eventtarget){
|
||||
if(eventtarget.target.nodeName != "TH" || eventtarget.target.hasAttribute("place"))
|
||||
return false;
|
||||
eventtarget.target.setAttribute("place", gamearea.getAttribute("move"));
|
||||
var move = 1;
|
||||
if(gamearea.getAttribute("move") == "x")
|
||||
{
|
||||
move = -1;
|
||||
gamearea.setAttribute("move", "O");
|
||||
}
|
||||
else
|
||||
gamearea.setAttribute("move", "x");
|
||||
move_number++;
|
||||
table[parseInt(eventtarget.target.getAttribute("x"))][parseInt(eventtarget.target.getAttribute("y"))] = move;
|
||||
switch(is_end())
|
||||
{
|
||||
case false: break;
|
||||
case -1:
|
||||
show_message("Wygrał krzyżyk!");
|
||||
break;
|
||||
case 1:
|
||||
show_message("Wygrało kółko!");
|
||||
break;
|
||||
case -2:
|
||||
show_message("Remis");
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function show_message(areatext)
|
||||
{
|
||||
document.getElementById("areatext").innerHTML = areatext;
|
||||
document.getElementById("whos").innerHTML = "A tym razem?";
|
||||
gamearea.removeAttribute("move");
|
||||
document.getElementById("message").removeAttribute("hidden");
|
||||
document.getElementById("for-button").hidden = true;
|
||||
};
|
||||
|
||||
function new_game(begin)
|
||||
{
|
||||
move_number = 0;
|
||||
table = new Array(3);
|
||||
for(var i = 0; i < table.length;i++)
|
||||
{
|
||||
table[i] = new Array(table.length);
|
||||
for(var x = 0; x < table.length; x++)
|
||||
table[i][x] = 0;
|
||||
}
|
||||
|
||||
var filling_area = gamearea.querySelectorAll("th[place]");
|
||||
for(var i = 0; i < filling_area.length; i++)
|
||||
filling_area[i].removeAttribute("place");
|
||||
gamearea.setAttribute("move", begin);
|
||||
};
|
||||
function is_end()
|
||||
{
|
||||
for(var i = 0; i < 3; i++)
|
||||
{
|
||||
if(Math.abs(table[0][i] + table[1][i] + table[2][i]) == 3)
|
||||
return table[0][i];
|
||||
if(Math.abs(table[i][0] + table[i][1] + table[i][2]) == 3)
|
||||
return table[i][0];
|
||||
}
|
||||
|
||||
if(Math.abs(table[0][0] + table[1][1] + table[2][2]) == 3)
|
||||
return table[0][0];
|
||||
if(Math.abs(table[0][2] + table[1][1] + table[2][0]) == 3)
|
||||
return table[0][2];
|
||||
if(move_number >= 9)
|
||||
return -2;
|
||||
return false;
|
||||
|
||||
}
|
||||
110
style.css
Normal file
110
style.css
Normal file
@ -0,0 +1,110 @@
|
||||
#message[hidden]
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#message,
|
||||
#areatext,
|
||||
#start,
|
||||
#restart,
|
||||
#whos,
|
||||
#optionslist
|
||||
{
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#gamearea
|
||||
{
|
||||
position: relative;
|
||||
border-collapse: collapse;
|
||||
margin: auto;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
#gamearea:not([move])::before
|
||||
{
|
||||
padding-top: 40%;
|
||||
box-sizing: border-box;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
content: "Koniec gry";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
th
|
||||
{
|
||||
border: 1px solid black;
|
||||
font-size: 30px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
th:not([place]):hover
|
||||
{
|
||||
background-color: #3AD162;
|
||||
cursor: pointer;
|
||||
transition: height 0.7s;
|
||||
|
||||
}
|
||||
|
||||
th[place]:hover
|
||||
{
|
||||
background-color: #D13A3A;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#gamearea[move=x] th:not([place]):hover::before,
|
||||
th[place=x]::before
|
||||
{
|
||||
content: "X";
|
||||
}
|
||||
|
||||
#gamearea[move=O] th:not([place]):hover::before,
|
||||
th[place=O]::before
|
||||
{
|
||||
content: "O";
|
||||
}
|
||||
|
||||
|
||||
|
||||
body {
|
||||
background-color: #ECECEC;
|
||||
}
|
||||
|
||||
#start,
|
||||
#restart {
|
||||
box-shadow:inset 0px 1px 0px 0px #ffffff;
|
||||
background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
|
||||
background-color:#f9f9f9;
|
||||
border-radius:6px;
|
||||
border:1px solid #dcdcdc;
|
||||
cursor:pointer;
|
||||
color:#666666;
|
||||
font-family:Arial;
|
||||
font-size:15px;
|
||||
font-weight:bold;
|
||||
padding:6px 24px;
|
||||
text-decoration:none;
|
||||
text-shadow:0px 1px 0px #ffffff;
|
||||
}
|
||||
#start:hover,
|
||||
#restart:hover {
|
||||
background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
|
||||
background-color:#e9e9e9;
|
||||
}
|
||||
#start:active,
|
||||
#restart:active {
|
||||
position:relative;
|
||||
top:1px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user