Pierwszy upload
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
# TicTacToe - Electron
|
||||
|
||||
Jest to aplikacja napisana z nudów w 20 minut w czystym HTML + CSS + JS i stworzona w Electronie.
|
||||
+161
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kółko i krzyżyk</title>
|
||||
<style>
|
||||
#root {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
flex-direction: column;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#game {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 200px 200px;
|
||||
grid-template-rows: 200px 200px 200px;
|
||||
grid-gap: 4px;
|
||||
background-color: black;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: white;
|
||||
font-size: 160px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<div id="info">
|
||||
<h3><span id="kto_gra">Kółko</span></h3>
|
||||
</div>
|
||||
<div id="game">
|
||||
<div id="box1" class="box" set=""></div>
|
||||
<div id="box2" class="box" set=""></div>
|
||||
<div id="box3" class="box" set=""></div>
|
||||
<div id="box4" class="box" set=""></div>
|
||||
<div id="box5" class="box" set=""></div>
|
||||
<div id="box6" class="box" set=""></div>
|
||||
<div id="box7" class="box" set=""></div>
|
||||
<div id="box8" class="box" set=""></div>
|
||||
<div id="box9" class="box" set=""></div>
|
||||
</div>
|
||||
<div id="stats">
|
||||
<h3>Kółko: <span id="wynik_kolko">0</span></h3>
|
||||
<h3>Remis: <span id="wynik_remis">0</span></h3>
|
||||
<h3>Krzyżyk: <span id="wynik_krzyzyk">0</span></h3>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let who_plays = Math.ceil(Math.random() * 10) % 2 == 0 ? 'Kółko' : 'Krzyżyk';
|
||||
let who_won = "";
|
||||
let can_play = true;
|
||||
let boxes = document.querySelectorAll(".box");
|
||||
let score_o = 0;
|
||||
let score_x = 0;
|
||||
let score_remis = 0;
|
||||
let left = 9;
|
||||
|
||||
let show_who_plays = document.getElementById("kto_gra");
|
||||
show_who_plays.innerHTML = `Obecnie gra: ${who_plays}`;
|
||||
|
||||
Array.from(boxes).forEach(el => {
|
||||
el.addEventListener("click", (e) => {
|
||||
if(can_play){
|
||||
if(el.set == undefined){
|
||||
if(who_plays == 'Kółko'){
|
||||
el.set = "o";
|
||||
el.innerHTML = "o";
|
||||
who_plays = "Krzyżyk";
|
||||
} else {
|
||||
el.set = "x";
|
||||
el.innerHTML = "x";
|
||||
who_plays = "Kółko";
|
||||
}
|
||||
show_who_plays.innerHTML = who_plays;
|
||||
left--;
|
||||
checkIfWin();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function resetGame(){
|
||||
who_plays = who_won == "Kółko" ? "Krzyżyk" : "Kółko";
|
||||
show_who_plays.innerHTML = `Obecnie gra: ${who_plays}`;
|
||||
Array.from(boxes).forEach(el => {
|
||||
el.innerHTML = "";
|
||||
el.set = undefined;
|
||||
});
|
||||
can_play = true;
|
||||
who_won = "";
|
||||
left = 9;
|
||||
}
|
||||
|
||||
function checkIfWin(){
|
||||
let win_places = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
|
||||
// 0 1 2
|
||||
// 3 4 5
|
||||
// 6 7 8
|
||||
win_places.forEach(place => {
|
||||
let x = 0;
|
||||
let o = 0;
|
||||
place.forEach(set => {
|
||||
if(boxes[set].set == 'o'){
|
||||
o++;
|
||||
} else if(boxes[set].set == 'x'){
|
||||
x++;
|
||||
}
|
||||
})
|
||||
|
||||
if(x == 3){
|
||||
show_who_plays.innerHTML = "Wygrywa Krzyżyk";
|
||||
score_x++;
|
||||
|
||||
document.getElementById("wynik_krzyzyk").innerHTML = score_x;
|
||||
can_play = false;
|
||||
setTimeout(() => {
|
||||
resetGame()
|
||||
}, 5000);
|
||||
return 'x';
|
||||
}
|
||||
else if(o == 3) {
|
||||
show_who_plays.innerHTML = "Wygrywa Kółko!";
|
||||
score_o++;
|
||||
document.getElementById("wynik_kolko").innerHTML = score_o;
|
||||
|
||||
can_play = false;
|
||||
setTimeout(() => {
|
||||
resetGame()
|
||||
}, 5000);
|
||||
return 'o';
|
||||
}
|
||||
});
|
||||
|
||||
if(left == 0 && who_won == ""){
|
||||
show_who_plays.innerHTML = "Remis!";
|
||||
score_remis++;
|
||||
document.getElementById("wynik_remis").innerHTML = score_remis;
|
||||
return 'remis';
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,14 @@
|
||||
const { app, BrowserWindow } = require('electron')
|
||||
|
||||
const createWindow = () => {
|
||||
const win = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 800
|
||||
})
|
||||
|
||||
win.loadFile('index.html')
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow()
|
||||
})
|
||||
Generated
+6304
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "tic-tac-toe",
|
||||
"version": "1.0.0",
|
||||
"description": "Kółko i krzyzyk napisany z nudów",
|
||||
"license": "ISC",
|
||||
"author": "Krzysztof Smaga",
|
||||
"type": "commonjs",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "electron .",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@electron-forge/cli": "^7.11.2",
|
||||
"electron": "^42.4.0"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user