Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b70bdfb955 | |||
| 6de586ba01 | |||
| d0446e680d | |||
| 852394c54c | |||
| 4717ec0877 | |||
| 9ac5c35c90 | |||
| 1fb8296bcd | |||
| 9187d8d9ef |
5
README.md
Normal file
5
README.md
Normal file
@ -0,0 +1,5 @@
|
||||
# Daedalus
|
||||
|
||||
3D Maze Web game made with Three.js library
|
||||
|
||||
|
||||
18
index.html
18
index.html
@ -5,6 +5,15 @@
|
||||
<title>Daedalus</title>
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||||
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" id="favicon"/>
|
||||
<meta property="og:title" content="Daedalus"/>
|
||||
<meta property="og:type" content="game"/>
|
||||
<meta property="og:url" content="https://adrien.malingrey.fr/jeux/daedalus/"/>
|
||||
<meta property="og:image" content="https://adrien.malingrey.fr/jeux/daedalus/thumbnail.png"/>
|
||||
<meta property="og:image:width" content="250"/>
|
||||
<meta property="og:image:height" content="250"/>
|
||||
<meta property="og:description" content="Retrouvez la sortie"/>
|
||||
<meta property="og:locale" content="fr_FR"/>
|
||||
<meta property="og:site_name" content="adrien.malingrey.fr"/>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<!-- Import maps polyfill -->
|
||||
<!-- Remove this when import maps will be widely supported -->
|
||||
@ -12,9 +21,8 @@
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "https://cdn.jsdelivr.net/npm/three@0.161.0/build/three.module.min.js",
|
||||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.161.0/examples/jsm/",
|
||||
"three-hex-tiling": "https://cdn.jsdelivr.net/npm/three-hex-tiling@0.1.1/dist/index.js"
|
||||
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.min.js",
|
||||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -144,7 +152,9 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="loading">
|
||||
<table id="labyTable"></table>
|
||||
<div id="loadingMazeShadow">
|
||||
<table id="loadingMazeTable"></table>
|
||||
</div>
|
||||
<div id="loadingMessage">Construction du labyrinthe : <span id="progress">0</span>%</div>
|
||||
<div>
|
||||
Se déplacer : ↑←↓→, ZQSD ou clic<br/>
|
||||
|
||||
41
main.js
41
main.js
@ -14,13 +14,13 @@ import MazeMesh from './MazeMesh.js'
|
||||
|
||||
// LOADING
|
||||
|
||||
const labyWidth = 23
|
||||
const labyHeight = 23
|
||||
const loadingMazeWidth = 23
|
||||
const loadingMazeHeight = 23
|
||||
|
||||
for(let y=0; y < labyHeight; y++) {
|
||||
for(let y=0; y < loadingMazeHeight; y++) {
|
||||
let tr = document.createElement("tr")
|
||||
labyTable.appendChild(tr)
|
||||
for(let x=0; x < labyWidth; x++) {
|
||||
loadingMazeTable.appendChild(tr)
|
||||
for(let x=0; x < loadingMazeWidth; x++) {
|
||||
let td = document.createElement("td")
|
||||
tr.appendChild(td)
|
||||
}
|
||||
@ -30,7 +30,7 @@ let walls
|
||||
|
||||
function dig(x, y) {
|
||||
walls[y][x] = false
|
||||
labyTable.children[y].children[x].className = "ground"
|
||||
loadingMazeTable.children[y].children[x].className = "ground"
|
||||
}
|
||||
|
||||
const directions = [[0, 1], [0, -1], [1, 0], [-1, 0]]
|
||||
@ -41,7 +41,7 @@ function* build(x, y) {
|
||||
let y1 = y + dy
|
||||
let x2 = x1 + dx
|
||||
let y2 = y1 + dy
|
||||
if (0 <= x2 && x2 < labyWidth && 0 <= y2 && y2 < labyHeight && walls[y2][x2]) {
|
||||
if (0 <= x2 && x2 < loadingMazeWidth && 0 <= y2 && y2 < loadingMazeHeight && walls[y2][x2]) {
|
||||
dig(x1, y1)
|
||||
yield x1, y1
|
||||
dig(x2, y2)
|
||||
@ -51,36 +51,35 @@ function* build(x, y) {
|
||||
}
|
||||
}
|
||||
|
||||
function* endlessLaby() {
|
||||
function* endlessLoadingMaze() {
|
||||
while (true) {
|
||||
for (const tr of labyTable.children) {
|
||||
for (const tr of loadingMazeTable.children) {
|
||||
for (const td of tr.children) {
|
||||
td.className = "wall"
|
||||
}
|
||||
}
|
||||
|
||||
walls = Array(labyHeight).fill(true).map(row => Array(labyWidth).fill(true))
|
||||
walls = Array(loadingMazeHeight).fill(true).map(row => Array(loadingMazeWidth).fill(true))
|
||||
|
||||
let x0 = Math.floor(labyWidth / 2)
|
||||
let y0 = Math.floor(labyHeight / 2)
|
||||
let x0 = Math.floor(loadingMazeWidth / 2)
|
||||
let y0 = Math.floor(loadingMazeHeight / 2)
|
||||
|
||||
dig(x0, y0)
|
||||
yield* build(x0, y0)
|
||||
}
|
||||
}
|
||||
|
||||
let labyIterator = endlessLaby()
|
||||
|
||||
let interval = window.setInterval(() => labyIterator.next(), 200)
|
||||
|
||||
let interval
|
||||
|
||||
const loadMngr = new THREE.LoadingManager()
|
||||
const loader = new THREE.TextureLoader(loadMngr)
|
||||
loader.setPath("textures/")
|
||||
let t0
|
||||
|
||||
loadMngr.onStart = function (url, itemsLoaded, itemsTotal) {
|
||||
progress.innerText = "0"
|
||||
t0 = Date.now()
|
||||
|
||||
let loadingMazeIterator = endlessLoadingMaze()
|
||||
interval = window.setInterval(() => loadingMazeIterator.next(), 200)
|
||||
}
|
||||
loadMngr.onProgress = function (url, itemsLoaded, itemsTotal) {
|
||||
progress.innerText = Math.floor(100 * itemsLoaded / itemsTotal)
|
||||
@ -203,10 +202,10 @@ function repeatGroundMaterial (texture) {
|
||||
}
|
||||
const groundMaterial = new THREE.MeshStandardMaterial({
|
||||
map : loader.load('angled-blocks-vegetation/albedo.webp', repeatGroundMaterial),
|
||||
aoMap : loader.load('angled-blocks-vegetation/ao.webp', repeatGroundMaterial),
|
||||
metalnessMap: loader.load('angled-blocks-vegetation/metallic.webp', repeatGroundMaterial),
|
||||
aoMap : loader.load('angled-blocks-vegetation/ao-roughness-metalness.webp', repeatGroundMaterial),
|
||||
metalnessMap: loader.load('angled-blocks-vegetation/ao-roughness-metalness.webp', repeatGroundMaterial),
|
||||
normalMap : loader.load('angled-blocks-vegetation/normal-dx.webp', repeatGroundMaterial),
|
||||
roughnessMap: loader.load('angled-blocks-vegetation/roughness.webp', repeatGroundMaterial),
|
||||
roughnessMap: loader.load('angled-blocks-vegetation/ao-roughness-metalness.webp', repeatGroundMaterial),
|
||||
/*hexTiling : {
|
||||
patchScale: 1,
|
||||
useContrastCorrectedBlending: true,
|
||||
|
||||
39
style.css
39
style.css
@ -3,7 +3,7 @@ body {
|
||||
background-color: #041626;
|
||||
font-size: 1.3em;
|
||||
overscroll-behavior: none;
|
||||
cursor: wait;
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
#loading {
|
||||
@ -12,27 +12,54 @@ body {
|
||||
font-size: 1.3em;
|
||||
top: 20vh;
|
||||
margin: auto;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#loadingMessage {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
#labyTable {
|
||||
@keyframes perspective {
|
||||
from {
|
||||
transform: rotateX(0deg) perspective(0px);
|
||||
filter: drop-shadow(0px 00px 0px #0f2437);
|
||||
}
|
||||
to {
|
||||
transform: rotateX(40deg) perspective(150px);
|
||||
filter: drop-shadow(0px 10px 0px #0f2437);
|
||||
}
|
||||
}
|
||||
|
||||
#loadingMazeShadow {
|
||||
width: 230px;
|
||||
height: 230px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 20vh;
|
||||
margin-bottom: 5vh;
|
||||
border-collapse: collapse;
|
||||
animation: perspective 30s;
|
||||
}
|
||||
|
||||
#labyTable td {
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#loadingMazeTable {
|
||||
border-collapse: collapse;
|
||||
animation: rotation 60s infinite;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#loadingMazeTable td {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transition: background-color 1s;
|
||||
border: 0;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -70,7 +97,7 @@ body {
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
color: gray;
|
||||
font-family: Times, "Times New Roman", Georgia, serif;
|
||||
font-family: serif;
|
||||
}
|
||||
|
||||
#message a {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user