witam, jestem po obejrzeniu drugiego odcinka z serii kurs JS z kanału Pasja Informatyki
Stworzyłem prosta gre X & O
Kod to totalna amatorka ale np na funkcje sprawdzajaca Wygrana nie mialem totalnie pomysl, a raczej miałem jednakże nie potrafiłem tego wykonać.
Mam nadzieje że znajdzie się tu ktoś kto pomoże takiemu świeżakowi jak ja.
Index
<!DOCTYPE HTML>
<html lang="pl">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="css/bootstrap.css" rel="stylesheet">-->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Mirza" rel="stylesheet">
<title>Gry</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body onload="NarysujPlansze()">
<div id="kontener">
<p>Kto ma aktualnie ruch: <span id="KtoMaRuch"></span></p>
<div id="plansza"></div>
<span id="msg"></span><br>
<span id="wygrana"></span><br>
<button onclick="WyczyscPola()">RESTART</button>
</div>
<script src="script.js"></script>
</body>
</html>
Style
/* STYLES RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
background: #311E28; /* Background pattern from subtlepatterns.com */
font-family: 'Lato', sans-serif;
color: white;
}
.gamefield{
width: 150px;
height: 150px;
background-color: #2c3d60;
border: 1px solid #5e0b15;
float: left;
text-align: center;
font-size: 135px;
padding: 0;
}
#testt
{
color: red;
}
.gamefield:hover, .gamefield_active
{
background-color: #1b2e50;
}
#kontener
{
margin: 0 auto;
border: 3px solid lightgray;
width: 880px;
height: 1200px;
}
#plansza
{
width: 456px;
height: 456px;
border: 1px solid #5e0b15;
}
p{
color: white;
}
Script
var G_kogoruch = 0;
var G_winner = 0;
var G_tablicawynikow =
["", "", "",
"", "", "",
"", "", ""];
function LosujRuch()
{
var x = Math.floor((Math.random() * 100) + 1);
if(x >49){ G_kogoruch = 1; document.getElementById("KtoMaRuch").textContent = "X";}
else { G_kogoruch = 2; document.getElementById("KtoMaRuch").textContent = "O";}
}
/*
1 - X
2 - O
*/
function SprawdzWygrana()
{
var zm1;
var zm2 = "";
var zm3 = 0;
if((G_tablicawynikow[0] == "X"&& G_tablicawynikow[1] == "X"&& G_tablicawynikow[2] == "X") ||
(G_tablicawynikow[3] == "X"&& G_tablicawynikow[4] == "X"&& G_tablicawynikow[5] == "X") ||
(G_tablicawynikow[6] == "X"&& G_tablicawynikow[7] == "X"&& G_tablicawynikow[8] == "X") ||
(G_tablicawynikow[0] == "X"&& G_tablicawynikow[3] == "X"&& G_tablicawynikow[6] == "X") ||
(G_tablicawynikow[1] == "X"&& G_tablicawynikow[4] == "X"&& G_tablicawynikow[7] == "X") ||
(G_tablicawynikow[2] == "X"&& G_tablicawynikow[5] == "X"&& G_tablicawynikow[8] == "X") ||
(G_tablicawynikow[0] == "X"&& G_tablicawynikow[4] == "X"&& G_tablicawynikow[8] == "X") ||
(G_tablicawynikow[2] == "X"&& G_tablicawynikow[4] == "X"&& G_tablicawynikow[6] == "X")
)
{
G_winner = 1;
}
else if((G_tablicawynikow[0] == "O"&& G_tablicawynikow[1] == "O"&& G_tablicawynikow[2] == "O") ||
(G_tablicawynikow[3] == "O"&& G_tablicawynikow[4] == "O"&& G_tablicawynikow[5] == "O") ||
(G_tablicawynikow[6] == "O"&& G_tablicawynikow[7] == "O"&& G_tablicawynikow[8] == "O") ||
(G_tablicawynikow[0] == "O"&& G_tablicawynikow[3] == "O"&& G_tablicawynikow[6] == "O") ||
(G_tablicawynikow[1] == "O"&& G_tablicawynikow[4] == "O"&& G_tablicawynikow[7] == "O") ||
(G_tablicawynikow[2] == "O"&& G_tablicawynikow[5] == "O"&& G_tablicawynikow[8] == "O") ||
(G_tablicawynikow[0] == "O"&& G_tablicawynikow[4] == "O"&& G_tablicawynikow[8] == "O") ||
(G_tablicawynikow[2] == "O"&& G_tablicawynikow[4] == "O"&& G_tablicawynikow[6] == "O")
)
{
G_winner = 2;
}
switch(G_winner)
{
case 1:
document.getElementById("wygrana").textContent = "Zwyciężył: X";
break;
case 2:
document.getElementById("wygrana").textContent = "Zwyciężył: O";
break;
}
}
function SprawdzKliknecie(clicked_id)
{
var CheckText = document.getElementById(clicked_id).textContent
if(G_winner != 0)
{
return 0;
}
if( CheckText == "X" || CheckText =="O")
{
document.getElementById("msg").innerHTML = "W tym polu jest już wpisany: "+CheckText;
}
else{
if(G_kogoruch == 1)
{
document.getElementById(clicked_id).textContent = "X";
G_kogoruch = 2;
document.getElementById("KtoMaRuch").innerHTML = "O";
G_tablicawynikow[parseInt(clicked_id.substr(clicked_id.length - 1))-1] = "X";
}
else
{
document.getElementById(clicked_id).textContent = "O";
G_kogoruch = 1;
document.getElementById("KtoMaRuch").innerHTML = "X";
G_tablicawynikow[parseInt(clicked_id.substr(clicked_id.length - 1))-1] = "O";
}
SprawdzWygrana();
}
}
function NarysujPlansze()
{
var tresc_diva = "";
for(i=1; i<=9; i++)
{
tresc_diva = tresc_diva + '<div class="gamefield" id="pole'+i+'" onclick="SprawdzKliknecie(this.id)"></div>';
}
document.getElementById("plansza").innerHTML = tresc_diva;
LosujRuch();
WyczyscPola();
}
function WyczyscPola()
{
var nr_pola = 0;
for(i=1;i<=9;i++)
{
nr_pola = 'pole'+i;
document.getElementById(nr_pola).textContent = "";
document.getElementById("wygrana").textContent = "";
}
G_tablicawynikow =
["", "", "",
"", "", "",
"", "", ""];
G_winner =0;
}