janniclas.loosen/JS-Games
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

02/12/2023

Browse Source
This commit is contained in:
Jan-Niclas Loosen
2023-12-02 19:45:57 +01:00
commit b516324a8d
73 changed files with 3873 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
tik-tak-toe/img/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
tik-tak-toe/img/bg1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 308 KiB

BIN
tik-tak-toe/img/gameover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
tik-tak-toe/img/o.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 390 KiB

BIN
tik-tak-toe/img/x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 345 KiB

219
tik-tak-toe/index.htm Normal file
View File

@@ -0,0 +1,219 @@
<html>
<head>
<meta charset="UTF-8" />
<title>JS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form id="Form" action="#">
<label>TIK TAK Jan</label>
<br />
<input class="p1" placeholder="Player-1" required="required" />
<input class="p2" placeholder="Player-2" required="required" />
<button onclick="Start()">Start</button>
</form>
<div id="Tbl">
<!--<label>Game</label>-->
<section>
<p id="p1">user1</p>
<p id="say1"></p>
</section>
<section>
<p id="p2">user1</p>
<p id="say2"></p>
</section>
<table>
</table>
</div>
<div id="Finish">
<img src="img/gameover.png"/>
<button onclick="Startt()">AGAIN</button>
</div>
<script>
let ply1;
let ply2;
let say1 = 0;
let say2 = 0;
let X = "<img src='img/x.png' >";
let O = "<img src='img/o.png' >";
/* let X="X";
let O="O";*/
let say = 1;
let M = [];
Massiv();
Qur();
function Start() {
document.getElementById("Tbl").style.display = "block";
document.getElementsByTagName("form")[0].style.display = "none";
ply1 = document.getElementsByTagName("input")[0].value;
ply2 = document.getElementsByTagName("input")[1].value;
document.getElementById("p1").innerHTML = `${ply1}`;
document.getElementById("p2").innerHTML = `${ply2}`;
document.getElementById("say1").innerHTML = say1;
document.getElementById("say2").innerHTML = say2;
}
function Startt(){
document.getElementById("Finish").style.display = "none";
document.getElementsByTagName("form")[0].style.display = "block";
}
function Massiv() {
for (let i = 0; i < 3; i++) {
M[i] = [];
}
}
function Qur() {
let tbl = "";
for (let i = 0; i < 3; i++) {
tbl += `<tr>`;
for (let j = 0; j < 3; j++) {
M[i][j] = M[i][j] == undefined ? "" : M[i][j];
tbl += `<td id="row_` + i + j + `" onclick="Tikla(${i},${j})">${M[i][j]}</td>`;
}
tbl += `</tr>`;
}
document.getElementsByTagName("table")[0].innerHTML = tbl;
}
function sil() {
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
M[i][j] = "";
document.getElementById("row_" + i + j).innerHTML = "";
}
}
say=1;
console.log(say);
}
function Tikla(i, j) {
if (M[i][j] == "") {
if (say % 2 == 1) {
M[i][j] = X;
} else {
M[i][j] = O;
}
say++;
setTimeout(Yoxla, 200);
Qur();
}
}
function Yoxla() {
for (let i = 0; i < 3; i++) {
if (M[i][0] == M[i][1] && M[i][1] == M[i][2] && M[i][0] != "") {
if (M[i][0] == X) {
alert(`${ply1} you get 1 point`);
say1++;
document.getElementById("say1").innerHTML=say1;
sil();
}
else {
alert(`${ply2} you get 1 point`);
say2++;
document.getElementById("say2").innerHTML=say2;
sil();
}
}
}
for (let i = 0; i < 3; i++) {
if (M[0][i] == M[1][i] && M[1][i] == M[2][i] && M[0][i] != "") {
if (M[0][i] == X) {
alert(`${ply1} you get 1 point`);
say1++;
document.getElementById("say1").innerHTML=say1;
sil();
}
else {
alert(`${ply2} you get 1 point`);
say2++;
document.getElementById("say2").innerHTML=say2;
sil();
}
}
}
if (M[0][0] == M[1][1] && M[1][1] == M[2][2] && M[0][0] != "") {
if (M[0][0] == X) {
alert(`${ply1} you get 1 point`);
say1++;
document.getElementById("say1").innerHTML=say1;
sil();
}
else {
alert(`${ply2} you get 1 point`);
say2++;
document.getElementById("say2").innerHTML=say2;
sil();
}
}
if (M[0][2] == M[1][1] && M[1][1] == M[2][0] && M[0][2] != "") {
if (M[0][2] == X) {
alert(`${ply1} you get 1 point`);
say1++;
document.getElementById("say1").innerHTML=say1;
sil();
}
else {
alert(`${ply2} you get 1 point`);
say2++;
document.getElementById("say2").innerHTML=say2;
sil();
}
}
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (M[0][0] != "" && M[0][1] != "" && M[0][2] != "" && M[1][0] != "" && M[1][1] != "" && M[1][2] != "" && M[2][0] != "" && M[2][1] != "" && M[2][2] != "") {
alert("None gets point!!");
sil();
}
}
}
if(say1==3 )
{
say1==3;
alert(`${ply1} you are winner!`);
setTimeout(200);
// setTimeout(alert("OYUN BITDI"), 400);
document.getElementById("Tbl").style.display="none";
document.getElementById("Finish").style.display="flex";
document.getElementById("Finish").style.flexDirection="column";
}
else if(say2==3)
{
say2==3;
alert(`${ply2} you are winner!`);
setTimeout(200);
// setTimeout(alert("OYUN BITDI"), 400);
document.getElementById("Tbl").style.display="none";
document.getElementById("Finish").style.display="flex";
document.getElementById("Finish").style.flexDirection="column";
}
}
</script>
</body>
</html>

164
tik-tak-toe/style.css Normal file
View File

@@ -0,0 +1,164 @@
@import url('https://fonts.googleapis.com/css?family=Lobster&display=swap&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese');
*
{
margin: 0;
padding: 0;
}
body {
margin: 0;
background: url(img/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
display: flex;
}
section {
display: flex;
justify-content: space-around;
background-color: #0e1f27;
height: 60px;
}
div {
display: none;
margin: auto;
}
#say1 {
background-color: #0e1f27;
color: blanchedalmond;
font-size: 15px;
width: 100px;
height: 30px;
font-family: 'Lobster', cursive;
}
#say2 {
background-color: #0e1f27;
color: blanchedalmond;
font-size: 15px;
width: 100px;
height: 30px;
font-family: 'Lobster', cursive;
}
table,
td {
border: 5px solid black;
border-collapse: collapse;
background-color: #fa2f4d;
}
#Tbl label {
font-size: 45px;
font-family: 'Lobster', cursive;
margin-top: 50x;
color: lightcyan;
display: block;
text-align: center;
}
#Tbl p {
background-color: #0e1f27;
color: blanchedalmond;
font-size: 25px;
font-family: 'Lobster', cursive;
}
img {
height: 80px;
width: 80px;
}
td {
height: 100px;
width: 100px;
text-align: center;
user-select: none;
cursor: pointer;
}
#Finish
{
display: none;
margin: auto;
}
#Finish img
{
width: 400px;
height: 400px;
}
#Finish button{
text-align: center;
font-size: 30px;
height: 40px;
width: 250px;
border: none;
border-radius: 15px;
outline: none;
background-color: firebrick;
margin-top: 20px;
cursor: pointer;
font-family: 'Lobster', cursive;
margin: auto;
}
form {
width: 500px;
height: 300px;
background-color: firebrick;
margin: auto;
text-align: center;
padding-top: 0px;
border-radius: 10px;
}
form label {
font-family: 'Lobster', cursive;
font-size: 30px;
text-align: center;
}
form input {
width: 200px;
margin-top: 50px;
height: 30px;
border: none;
border-radius: 15px;
background-color: white;
color: black;
text-align: center;
outline: none;
font-family: 'Lobster', cursive;
padding: 5px;
}
form input::placeholder {
color: black;
text-align: center;
font-family: 'Lobster', cursive;
padding: 5px;
}
form button {
text-align: center;
height: 30px;
width: 150px;
border: none;
border-radius: 15px;
outline: none;
color: firebrick;
margin-top: 20px;
cursor: pointer;
font-family: 'Lobster', cursive;
}