removed unused files
This commit is contained in:
parent
f0c20fc2b6
commit
7076008ea4
28 changed files with 0 additions and 933 deletions
|
|
@ -1,50 +0,0 @@
|
||||||
*,
|
|
||||||
*::after,
|
|
||||||
*::before {
|
|
||||||
box-sizing: border-box;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--main-color: white;
|
|
||||||
--background-color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 10px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clicker {
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: var(--main-color);
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.winner.show {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
#timer {
|
|
||||||
color: var(--main-color);
|
|
||||||
font-size: 5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gameArea {
|
|
||||||
border: 0;
|
|
||||||
margin: auto auto auto auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.primer {
|
|
||||||
border: 0;
|
|
||||||
width: 10vw;
|
|
||||||
height: 10vw;
|
|
||||||
margin: auto auto auto auto;
|
|
||||||
background-color: var(--main-color);
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Click!</title>
|
|
||||||
<link rel="stylesheet" href="/games/click/index.css" />
|
|
||||||
<script src="/games/click/index.js" defer></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<p id="timer"></p>
|
|
||||||
<div id="primer" class="primer"></div>
|
|
||||||
<div class="gameArea"></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
// todo: add cross-hair
|
|
||||||
// todo: continuous reaction speed reading
|
|
||||||
// todo: better font
|
|
||||||
// todo: average reaction speed
|
|
||||||
// todo: reaction speed graph
|
|
||||||
// todo: put mouse over to restart
|
|
||||||
// todo: click order
|
|
||||||
// todo: sound effect
|
|
||||||
// todo: X if miss
|
|
||||||
// todo: settings
|
|
||||||
// todo: remaining clickers
|
|
||||||
|
|
||||||
const gameArea = document.getElementsByClassName("gameArea")[0]
|
|
||||||
const primer = document.getElementById("primer")
|
|
||||||
const timerText = document.getElementById("timer")
|
|
||||||
|
|
||||||
let clickerSize = 1.3
|
|
||||||
let initClickerCount = 10
|
|
||||||
let clickerCount = initClickerCount
|
|
||||||
let timer, startTime, clickable
|
|
||||||
|
|
||||||
primer.addEventListener("mousedown", () => {prime()})
|
|
||||||
document.addEventListener("keydown", (event) => {
|
|
||||||
if ("zq".includes(event.key.toLowerCase())) {
|
|
||||||
removeClicker()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.key.toLowerCase() === "a") {
|
|
||||||
// todo: pause
|
|
||||||
}
|
|
||||||
else if (event.key.toLowerCase() === "q") {
|
|
||||||
// todo: end measurement
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
function prime() {
|
|
||||||
primer.style.display = "none"
|
|
||||||
clearInterval(timer)
|
|
||||||
clearClicker()
|
|
||||||
initializeTimer()
|
|
||||||
addClicker()
|
|
||||||
}
|
|
||||||
|
|
||||||
function addClicker() {
|
|
||||||
let newClicker = document.createElement("div")
|
|
||||||
newClicker.addEventListener("mousedown", removeClicker, {once: true})
|
|
||||||
newClicker.addEventListener("mouseenter", () => {clickable = newClicker})
|
|
||||||
newClicker.addEventListener("mouseleave", clearClickable)
|
|
||||||
|
|
||||||
newClicker.classList.add("clicker")
|
|
||||||
|
|
||||||
newClicker.style.width = `${clickerSize}in`
|
|
||||||
newClicker.style.height = `${clickerSize}in`
|
|
||||||
|
|
||||||
let x = Math.random() * 100, y = Math.random() * 100
|
|
||||||
// todo: always make clicker appear in the screen
|
|
||||||
newClicker.style.top = `${x}%`
|
|
||||||
newClicker.style.left = `${y}%`
|
|
||||||
|
|
||||||
gameArea.appendChild(newClicker)
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeClicker() {
|
|
||||||
if (clickable === undefined) return
|
|
||||||
clickerCount -= 1
|
|
||||||
|
|
||||||
if (clickerCount > 0) {
|
|
||||||
addClicker()
|
|
||||||
}
|
|
||||||
else if (clickerCount === 0) {
|
|
||||||
primer.style.display = "block"
|
|
||||||
clearInterval(timer)
|
|
||||||
clearClicker()
|
|
||||||
clickerCount = initClickerCount
|
|
||||||
clearClickable()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
clickable.remove()
|
|
||||||
clearClickable()
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearClicker() {
|
|
||||||
gameArea.textContent = "";
|
|
||||||
clearClickable()
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearClickable() {
|
|
||||||
clickable = undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
function initializeTimer() {
|
|
||||||
startTime = Date.now()
|
|
||||||
timer = setInterval(() => {
|
|
||||||
timerText.innerHTML = ((Date.now() - startTime) / 1000).toFixed(2)
|
|
||||||
}, 10)
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
|
@ -1,13 +0,0 @@
|
||||||
{
|
|
||||||
"companyName": "AnonymousPomp",
|
|
||||||
"productName": "PONG",
|
|
||||||
"dataUrl": "7.data.unityweb",
|
|
||||||
"wasmCodeUrl": "7.wasm.code.unityweb",
|
|
||||||
"wasmFrameworkUrl": "7.wasm.framework.unityweb",
|
|
||||||
"TOTAL_MEMORY": 268435456,
|
|
||||||
"graphicsAPI": ["WebGL 2.0", "WebGL 1.0"],
|
|
||||||
"webglContextAttributes": {"preserveDrawingBuffer": false},
|
|
||||||
"splashScreenStyle": "Dark",
|
|
||||||
"backgroundColor": "#231F20",
|
|
||||||
"cacheControl": {"default": "must-revalidate"}
|
|
||||||
}
|
|
||||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -1,24 +0,0 @@
|
||||||
function UnityProgress(gameInstance, progress) {
|
|
||||||
if (!gameInstance.Module)
|
|
||||||
return;
|
|
||||||
if (!gameInstance.logo) {
|
|
||||||
gameInstance.logo = document.createElement("div");
|
|
||||||
gameInstance.logo.className = "logo " + gameInstance.Module.splashScreenStyle;
|
|
||||||
gameInstance.container.appendChild(gameInstance.logo);
|
|
||||||
}
|
|
||||||
if (!gameInstance.progress) {
|
|
||||||
gameInstance.progress = document.createElement("div");
|
|
||||||
gameInstance.progress.className = "progress " + gameInstance.Module.splashScreenStyle;
|
|
||||||
gameInstance.progress.empty = document.createElement("div");
|
|
||||||
gameInstance.progress.empty.className = "empty";
|
|
||||||
gameInstance.progress.appendChild(gameInstance.progress.empty);
|
|
||||||
gameInstance.progress.full = document.createElement("div");
|
|
||||||
gameInstance.progress.full.className = "full";
|
|
||||||
gameInstance.progress.appendChild(gameInstance.progress.full);
|
|
||||||
gameInstance.container.appendChild(gameInstance.progress);
|
|
||||||
}
|
|
||||||
gameInstance.progress.full.style.width = (100 * progress) + "%";
|
|
||||||
gameInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
|
|
||||||
if (progress == 1)
|
|
||||||
gameInstance.logo.style.display = gameInstance.progress.style.display = "none";
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 345 B |
Binary file not shown.
|
Before Width: | Height: | Size: 155 B |
Binary file not shown.
|
Before Width: | Height: | Size: 159 B |
Binary file not shown.
|
Before Width: | Height: | Size: 137 B |
Binary file not shown.
|
Before Width: | Height: | Size: 142 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
|
|
@ -1,18 +0,0 @@
|
||||||
.webgl-content * {border: 0; margin: 0; padding: 0}
|
|
||||||
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
|
|
||||||
|
|
||||||
.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
|
|
||||||
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
|
|
||||||
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
|
|
||||||
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
|
|
||||||
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
|
|
||||||
|
|
||||||
.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
|
|
||||||
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
|
|
||||||
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
|
|
||||||
|
|
||||||
.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
|
|
||||||
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
|
|
||||||
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
|
|
||||||
.webgl-content .footer .title {margin-right: 10px; float: right;}
|
|
||||||
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
|
|
@ -1,24 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en-us">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
||||||
<title>PONG</title>
|
|
||||||
<link rel="shortcut icon" href="/games/pong/TemplateData/favicon.ico">
|
|
||||||
<link rel="stylesheet" href="/games/pong/TemplateData/style.css">
|
|
||||||
<script src="/games/pong/TemplateData/UnityProgress.js"></script>
|
|
||||||
<script src="/games/pong/Build/UnityLoader.js"></script>
|
|
||||||
<script>
|
|
||||||
var gameInstance = UnityLoader.instantiate("gameContainer", "/games/pong/Build/7.json", {onProgress: UnityProgress});
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="webgl-content">
|
|
||||||
<div id="gameContainer" style="width: 960px; height: 600px"></div>
|
|
||||||
<div class="footer">
|
|
||||||
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
|
|
||||||
<div class="title">PONG v7</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,176 +0,0 @@
|
||||||
/*---[ MAIN ]---*/
|
|
||||||
*, *::after, *::before {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--cell-size: 100px;
|
|
||||||
--mark-size: calc(var(--cell-size) * .9);
|
|
||||||
--background-color: black;
|
|
||||||
--main-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*---[ Winner message ]---*/
|
|
||||||
.winner {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: rgba(0, 0, 0, .9);
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
color: var(--main-color);
|
|
||||||
font-size: 5rem;
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.winner button {
|
|
||||||
font-size: 3rem;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
color: var(--main-color);
|
|
||||||
border: 1px solid var(--main-color);
|
|
||||||
padding: .25em .5em;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.winner button:hover {
|
|
||||||
background-color: var(--main-color);
|
|
||||||
color: var(--background-color);
|
|
||||||
border-color: var(--background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.winner.show {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*---[ Board styling ]---*/
|
|
||||||
.board {
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
display: grid;
|
|
||||||
justify-content: center;
|
|
||||||
align-content: center;
|
|
||||||
justify-items: center;
|
|
||||||
align-items: center;
|
|
||||||
grid-template-columns: repeat(3, auto);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*---[ Cell styling ]---*/
|
|
||||||
.cell {
|
|
||||||
width: var(--cell-size);
|
|
||||||
height: var(--cell-size);
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
border: 2px solid var(--main-color);
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell.x,
|
|
||||||
.cell.o {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*---[ Remove edge border for edge cells ]---*/
|
|
||||||
.cell:nth-child(1),
|
|
||||||
.cell:nth-child(2),
|
|
||||||
.cell:nth-child(3) {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell:nth-child(1),
|
|
||||||
.cell:nth-child(4),
|
|
||||||
.cell:nth-child(7) {
|
|
||||||
border-left: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell:nth-child(3),
|
|
||||||
.cell:nth-child(6),
|
|
||||||
.cell:nth-child(9) {
|
|
||||||
border-right: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell:nth-child(7),
|
|
||||||
.cell:nth-child(8),
|
|
||||||
.cell:nth-child(9) {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*---[ X ]---*/
|
|
||||||
.cell.x::before,
|
|
||||||
.cell.x::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: calc(var(--mark-size) * .1);
|
|
||||||
height: var(--mark-size);
|
|
||||||
background-color: var(--main-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.board.x .cell:not(.x):not(.o):hover::before,
|
|
||||||
.board.x .cell:not(.x):not(.o):hover::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: calc(var(--mark-size) * .1);
|
|
||||||
height: var(--mark-size);
|
|
||||||
background-color: dimgray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell.x::before,
|
|
||||||
.board.x .cell:hover::before {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell.x::after,
|
|
||||||
.board.x .cell:hover::after {
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*---[ O ]---*/
|
|
||||||
.cell.o::before,
|
|
||||||
.cell.o::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: var(--mark-size);
|
|
||||||
height: var(--mark-size);
|
|
||||||
background-color: var(--main-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.board.o .cell:not(.x):not(.o):hover::before,
|
|
||||||
.board.o .cell:not(.x):not(.o):hover::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: var(--mark-size);
|
|
||||||
height: var(--mark-size);
|
|
||||||
background-color: dimgray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell.o::before {
|
|
||||||
height: calc(var(--mark-size) * .9);
|
|
||||||
width: calc(var(--mark-size) * .9);
|
|
||||||
background-color: var(--main-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.board.o .cell:not(.x):not(.o):hover::before {
|
|
||||||
height: calc(var(--mark-size) * .9);
|
|
||||||
width: calc(var(--mark-size) * .9);
|
|
||||||
background-color: dimgray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell.o::after,
|
|
||||||
.board.o .cell:not(.x):not(.o):hover::after{
|
|
||||||
height: calc(var(--mark-size) * .69);
|
|
||||||
width: calc(var(--mark-size) *.69);
|
|
||||||
background-color: var(--background-color);
|
|
||||||
}
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>TicTac Toe</title>
|
|
||||||
<link rel="icon" href="/icon/icon_circle.svg" />
|
|
||||||
<link rel="stylesheet" href="/games/tictactoe/index.css" />
|
|
||||||
<script src="/games/tictactoe/index.js" defer></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="board x" id="board">
|
|
||||||
<div class="cell" data-cell></div>
|
|
||||||
<div class="cell" data-cell></div>
|
|
||||||
<div class="cell" data-cell></div>
|
|
||||||
<div class="cell" data-cell></div>
|
|
||||||
<div class="cell" data-cell></div>
|
|
||||||
<div class="cell" data-cell></div>
|
|
||||||
<div class="cell" data-cell></div>
|
|
||||||
<div class="cell" data-cell></div>
|
|
||||||
<div class="cell" data-cell></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="winner" id="winner">
|
|
||||||
<div data-message></div>
|
|
||||||
<button id="restart">Restart</button>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
const X_CLASS = "x"
|
|
||||||
const O_CLASS = "o"
|
|
||||||
|
|
||||||
const WINNING_PATTERN = [
|
|
||||||
[0, 1, 2],
|
|
||||||
[3, 4, 5],
|
|
||||||
[6, 7, 8],
|
|
||||||
[0, 3, 6],
|
|
||||||
[1, 4, 7],
|
|
||||||
[2, 5, 8],
|
|
||||||
[0, 4, 8],
|
|
||||||
[2, 4, 6]
|
|
||||||
]
|
|
||||||
|
|
||||||
const cellElements = document.querySelectorAll("[data-cell]")
|
|
||||||
const board = document.getElementById("board")
|
|
||||||
const winnerMessage = document.querySelector("[data-message]")
|
|
||||||
const winner = document.getElementById("winner")
|
|
||||||
const restartButton = document.getElementById("restart")
|
|
||||||
|
|
||||||
let oTurn = false;
|
|
||||||
|
|
||||||
restartButton.addEventListener("click", gameStart)
|
|
||||||
|
|
||||||
function gameStart() {
|
|
||||||
function clickHandler(event) {
|
|
||||||
console.log(full())
|
|
||||||
const currentClass = oTurn ? O_CLASS : X_CLASS
|
|
||||||
event.target.classList.add(currentClass) // add O or X to the grid
|
|
||||||
|
|
||||||
if (checkWin(currentClass)) {
|
|
||||||
gameOver(false)
|
|
||||||
} else if (full()) {
|
|
||||||
gameOver(true)
|
|
||||||
}
|
|
||||||
oTurn = !oTurn // change tern
|
|
||||||
updateHover()
|
|
||||||
}
|
|
||||||
|
|
||||||
winner.classList.remove("show")
|
|
||||||
cellElements.forEach(cell => {
|
|
||||||
cell.classList.remove("o")
|
|
||||||
cell.classList.remove("x")
|
|
||||||
})
|
|
||||||
|
|
||||||
cellElements.forEach(cell => {
|
|
||||||
cell.addEventListener("click", clickHandler, {once: true})
|
|
||||||
})
|
|
||||||
|
|
||||||
updateHover()
|
|
||||||
}
|
|
||||||
|
|
||||||
function gameOver(draw) {
|
|
||||||
if (draw) {
|
|
||||||
// show draw message
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
winnerMessage.innerText = `${oTurn ? "O" : "X"} won!!`
|
|
||||||
}
|
|
||||||
winner.classList.add("show")
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateHover() {
|
|
||||||
board.classList.remove(X_CLASS)
|
|
||||||
board.classList.remove(O_CLASS)
|
|
||||||
|
|
||||||
if (oTurn) {
|
|
||||||
board.classList.add(O_CLASS)
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
board.classList.add(X_CLASS)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkWin(currentClass) {
|
|
||||||
return WINNING_PATTERN.some(combination => {
|
|
||||||
return combination.every(index => {
|
|
||||||
return cellElements[index].classList.contains(currentClass)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function full() {
|
|
||||||
//todo: add when the game is a draw
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
gameStart()
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,166 +0,0 @@
|
||||||
/**
|
|
||||||
* @author mrdoob / http://mrdoob.com/
|
|
||||||
* @author Mugen87 / https://github.com/Mugen87
|
|
||||||
*/
|
|
||||||
|
|
||||||
// https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/jsm/controls/PointerLockControls.js
|
|
||||||
|
|
||||||
import {
|
|
||||||
Euler,
|
|
||||||
EventDispatcher,
|
|
||||||
Vector3
|
|
||||||
} from "./three.js";
|
|
||||||
|
|
||||||
var PointerLockControls = function ( camera, domElement ) {
|
|
||||||
|
|
||||||
if ( domElement === undefined ) {
|
|
||||||
|
|
||||||
console.warn( 'THREE.PointerLockControls: The second parameter "domElement" is now mandatory.' );
|
|
||||||
domElement = document.body;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
this.domElement = domElement;
|
|
||||||
this.isLocked = false;
|
|
||||||
|
|
||||||
//
|
|
||||||
// internals
|
|
||||||
//
|
|
||||||
|
|
||||||
var scope = this;
|
|
||||||
|
|
||||||
var changeEvent = { type: 'change' };
|
|
||||||
var lockEvent = { type: 'lock' };
|
|
||||||
var unlockEvent = { type: 'unlock' };
|
|
||||||
|
|
||||||
var euler = new Euler( 0, 0, 0, 'YXZ' );
|
|
||||||
|
|
||||||
var PI_2 = Math.PI / 2;
|
|
||||||
|
|
||||||
var vec = new Vector3();
|
|
||||||
|
|
||||||
function onMouseMove( event ) {
|
|
||||||
|
|
||||||
if ( scope.isLocked === false ) return;
|
|
||||||
|
|
||||||
var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
|
|
||||||
var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
|
|
||||||
|
|
||||||
euler.setFromQuaternion( camera.quaternion );
|
|
||||||
|
|
||||||
euler.y -= movementX * 0.002;
|
|
||||||
euler.x -= movementY * 0.002;
|
|
||||||
|
|
||||||
euler.x = Math.max( - PI_2, Math.min( PI_2, euler.x ) );
|
|
||||||
|
|
||||||
camera.quaternion.setFromEuler( euler );
|
|
||||||
|
|
||||||
scope.dispatchEvent( changeEvent );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function onPointerlockChange() {
|
|
||||||
|
|
||||||
if ( document.pointerLockElement === scope.domElement ) {
|
|
||||||
|
|
||||||
scope.dispatchEvent( lockEvent );
|
|
||||||
|
|
||||||
scope.isLocked = true;
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
scope.dispatchEvent( unlockEvent );
|
|
||||||
|
|
||||||
scope.isLocked = false;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function onPointerlockError() {
|
|
||||||
|
|
||||||
console.error( 'THREE.PointerLockControls: Unable to use Pointer Lock API' );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
this.connect = function () {
|
|
||||||
|
|
||||||
document.addEventListener( 'mousemove', onMouseMove, false );
|
|
||||||
document.addEventListener( 'pointerlockchange', onPointerlockChange, false );
|
|
||||||
document.addEventListener( 'pointerlockerror', onPointerlockError, false );
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.disconnect = function () {
|
|
||||||
|
|
||||||
document.removeEventListener( 'mousemove', onMouseMove, false );
|
|
||||||
document.removeEventListener( 'pointerlockchange', onPointerlockChange, false );
|
|
||||||
document.removeEventListener( 'pointerlockerror', onPointerlockError, false );
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.dispose = function () {
|
|
||||||
|
|
||||||
this.disconnect();
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.getObject = function () { // retaining this method for backward compatibility
|
|
||||||
|
|
||||||
return camera;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.getDirection = function () {
|
|
||||||
|
|
||||||
var direction = new Vector3( 0, 0, - 1 );
|
|
||||||
|
|
||||||
return function ( v ) {
|
|
||||||
|
|
||||||
return v.copy( direction ).applyQuaternion( camera.quaternion );
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
}();
|
|
||||||
|
|
||||||
this.moveForward = function ( distance ) {
|
|
||||||
|
|
||||||
// move forward parallel to the xz-plane
|
|
||||||
// assumes camera.up is y-up
|
|
||||||
|
|
||||||
vec.setFromMatrixColumn( camera.matrix, 0 );
|
|
||||||
|
|
||||||
vec.crossVectors( camera.up, vec );
|
|
||||||
|
|
||||||
camera.position.addScaledVector( vec, distance );
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.moveRight = function ( distance ) {
|
|
||||||
|
|
||||||
vec.setFromMatrixColumn( camera.matrix, 0 );
|
|
||||||
|
|
||||||
camera.position.addScaledVector( vec, distance );
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.lock = function () {
|
|
||||||
|
|
||||||
this.domElement.requestPointerLock();
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.unlock = function () {
|
|
||||||
|
|
||||||
document.exitPointerLock();
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.connect();
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
PointerLockControls.prototype = Object.create( EventDispatcher.prototype );
|
|
||||||
PointerLockControls.prototype.constructor = PointerLockControls;
|
|
||||||
|
|
||||||
export { PointerLockControls };
|
|
||||||
|
|
@ -1,86 +0,0 @@
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
background-color: #282828;
|
|
||||||
color: #fff;
|
|
||||||
font-family: Monospace, sans-serif;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 24px;
|
|
||||||
scroll-behavior: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #ff0;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
cursor: pointer;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
#info {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-align: center;
|
|
||||||
user-select: none;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
a,
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
select {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dg.ac {
|
|
||||||
user-select: none;
|
|
||||||
z-index: 2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#overlay {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 2;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
opacity: 1;
|
|
||||||
background-color: #000000;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#overlay > div {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#overlay > div > button {
|
|
||||||
height: 20px;
|
|
||||||
background: transparent;
|
|
||||||
color: #ffffff;
|
|
||||||
outline: 1px solid #ffffff;
|
|
||||||
border: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#overlay > div > p {
|
|
||||||
color: #777777;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>3D</title>
|
|
||||||
<link rel="icon" href="/icon/icon_circle.svg" />
|
|
||||||
<link rel="stylesheet" href="/projects/3d/index.css" />
|
|
||||||
<script src="/projects/3d/index.js" defer></script>
|
|
||||||
<script src="/js/three.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="3dView"></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,122 +0,0 @@
|
||||||
// https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js
|
|
||||||
// https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js
|
|
||||||
|
|
||||||
let scene, camera, container, GL_Renderer
|
|
||||||
let materials = {}, lights = {}, objects = {}
|
|
||||||
|
|
||||||
let FOV = 75
|
|
||||||
|
|
||||||
/*---[ HELPERS ]---*/
|
|
||||||
function moveObject(object, x, y, z) {
|
|
||||||
object.position.x += x
|
|
||||||
object.position.y += y
|
|
||||||
object.position.z += z
|
|
||||||
}
|
|
||||||
|
|
||||||
function rotateObject(object, x, y, z) {
|
|
||||||
object.rotateX(x)
|
|
||||||
object.rotateY(y)
|
|
||||||
object.rotateZ(z)
|
|
||||||
}
|
|
||||||
|
|
||||||
function setScale(object, scale) {
|
|
||||||
object.scale.x = object.scale.y = object.scale.z = scale
|
|
||||||
}
|
|
||||||
|
|
||||||
/*---[ EVENTS ]---*/
|
|
||||||
function onWindowResize() {
|
|
||||||
camera.aspect = window.innerWidth / window.innerHeight
|
|
||||||
camera.updateProjectionMatrix()
|
|
||||||
GL_Renderer.setSize(window.innerWidth, window.innerHeight)
|
|
||||||
}
|
|
||||||
|
|
||||||
function Start() {
|
|
||||||
window.addEventListener("resize", onWindowResize, false)
|
|
||||||
container = document.getElementById("3dView")
|
|
||||||
|
|
||||||
// Scene
|
|
||||||
{
|
|
||||||
scene = new THREE.Scene()
|
|
||||||
scene.background = new THREE.Color(0x000000)
|
|
||||||
scene.fog = new THREE.Fog(0xffffff, 0, 750)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Camera
|
|
||||||
{
|
|
||||||
camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 10000)
|
|
||||||
moveObject(camera, 0, 0, 500)
|
|
||||||
scene.add(camera)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Lights
|
|
||||||
{
|
|
||||||
lights.ambientLight = new THREE.AmbientLight(0x404040, 0.3)
|
|
||||||
moveObject(lights.ambientLight, 10, 10, 10)
|
|
||||||
scene.add(lights.ambientLight)
|
|
||||||
|
|
||||||
lights.one = new THREE.DirectionalLight(0x00ffff, 0.3)
|
|
||||||
lights.one.position = camera.position
|
|
||||||
scene.add(lights.one)
|
|
||||||
|
|
||||||
lights.mainLight = new THREE.DirectionalLight(0xaabbff, 0.7)
|
|
||||||
moveObject(lights.mainLight, 0, 10, 20)
|
|
||||||
scene.add(lights.mainLight)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Material
|
|
||||||
{
|
|
||||||
materials.main = new THREE.MeshPhongMaterial({
|
|
||||||
color: 0xffffff,
|
|
||||||
shading: THREE.FlatShading
|
|
||||||
})
|
|
||||||
materials.wire = new THREE.MeshPhongMaterial({
|
|
||||||
color: 0xffffff,
|
|
||||||
side: THREE.DoubleSide,
|
|
||||||
wireframe: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// Objects
|
|
||||||
{
|
|
||||||
objects.rotatingGeo = {}
|
|
||||||
objects.rotatingGeo.main = new THREE.Mesh(new THREE.IcosahedronGeometry(8, 1), materials.main)
|
|
||||||
setScale(objects.rotatingGeo.main, 15)
|
|
||||||
scene.add(objects.rotatingGeo.main)
|
|
||||||
|
|
||||||
let outerGeo = new THREE.IcosahedronBufferGeometry(15, 1)
|
|
||||||
objects.rotatingGeo.outer = new THREE.Mesh(outerGeo, materials.wire)
|
|
||||||
setScale(objects.rotatingGeo.outer, 10)
|
|
||||||
scene.add(objects.rotatingGeo.outer)
|
|
||||||
|
|
||||||
let vertices = outerGeo.attributes.position.array;
|
|
||||||
for (let k=0; k<vertices.length; k+=3) {
|
|
||||||
let vertexSphere = new THREE.Mesh(new THREE.SphereGeometry(0.3, 5, 5), materials.main);
|
|
||||||
vertexSphere.applyMatrix(new THREE.Matrix4().makeTranslation(vertices[k],vertices[k+1],vertices[k+2]));
|
|
||||||
objects.rotatingGeo.outer.add(vertexSphere);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Renderer
|
|
||||||
{
|
|
||||||
GL_Renderer = new THREE.WebGLRenderer({antialias: true, alpha: true })
|
|
||||||
GL_Renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1)
|
|
||||||
GL_Renderer.setSize(window.innerWidth, window.innerHeight)
|
|
||||||
GL_Renderer.autoClear = false
|
|
||||||
GL_Renderer.setClearColor(0x000000, 0.0)
|
|
||||||
container.appendChild(GL_Renderer.domElement)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function Update() {
|
|
||||||
requestAnimationFrame(Update)
|
|
||||||
|
|
||||||
rotateObject(objects.rotatingGeo.main, 0.002, 0.003, 0)
|
|
||||||
rotateObject(objects.rotatingGeo.outer, 0.001, 0.003, 0)
|
|
||||||
|
|
||||||
GL_Renderer.render(scene, camera)
|
|
||||||
}
|
|
||||||
|
|
||||||
window.onload = () => {
|
|
||||||
Start()
|
|
||||||
Update()
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue