adrien/daedalus
adrien/daedalus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

merge into: adrien:hexTiling
Branches Tags
adrien:master
adrien:hexTiling
...
pull from: adrien:master
Branches Tags
adrien:master
adrien:hexTiling

8 Commits
hexTiling ... master

Author SHA1 Message Date
Adrien MALINGREY
b70bdfb955 Add README 2025-05-21 10:19:08 +02:00
adrien
6de586ba01 meta 2025-05-20 17:02:24 +02:00
adrien
d0446e680d rename laby to loadingMaze 2024-03-20 16:41:00 +01:00
adrien
852394c54c perspective rotation 2024-03-20 16:38:26 +01:00
adrien
4717ec0877 loading perspective 2024-03-15 02:47:24 +01:00
adrien
9ac5c35c90 rotating loading maze 2024-03-14 21:37:05 +01:00
adrien
1fb8296bcd Merge branch 'master' of https://git.malingrey.fr/adrien/daedalus 2024-03-13 03:20:26 +01:00
Adrien MALINGREY
9187d8d9ef Merge pull request 'use three-hex-tiling for ground material' (#1) from hexTiling into master 
Reviewed-on: #1
 2023-11-18 12:48:30 +01:00
4 changed files with 72 additions and 31 deletions
Show Stats Expand all files Collapse all files

5
README.md Normal file
View File

@ -0,0 +1,5 @@
# Daedalus
3D Maze Web game made with Three.js library
![screenshot](https://git.malingrey.fr/adrien/daedalus/raw/branch/master/thumbnail.png)

18
index.html
View File

@ -5,6 +5,15 @@
<title>Daedalus</title> <title>Daedalus</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <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"/> <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"> <link rel="stylesheet" href="style.css">
<!-- Import maps polyfill --> <!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported --> <!-- Remove this when import maps will be widely supported -->
@ -12,9 +21,8 @@
<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.161.0/build/three.module.min.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.161.0/examples/jsm/", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/"
"three-hex-tiling": "https://cdn.jsdelivr.net/npm/three-hex-tiling@0.1.1/dist/index.js"
} }
} }
</script> </script>
@ -144,7 +152,9 @@
</head> </head>
<body> <body>
<div id="loading"> <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 id="loadingMessage">Construction du labyrinthe : <span id="progress">0</span>%</div>
<div> <div>
Se déplacer : ↑←↓→, ZQSD ou clic<br/> Se déplacer : ↑←↓→, ZQSD ou clic<br/>

41
main.js
View File

@ -14,13 +14,13 @@ import MazeMesh from './MazeMesh.js'
// LOADING // LOADING
const labyWidth = 23 const loadingMazeWidth = 23
const labyHeight = 23 const loadingMazeHeight = 23
for(let y=0; y < labyHeight; y++) { for(let y=0; y < loadingMazeHeight; y++) {
let tr = document.createElement("tr") let tr = document.createElement("tr")
labyTable.appendChild(tr) loadingMazeTable.appendChild(tr)
for(let x=0; x < labyWidth; x++) { for(let x=0; x < loadingMazeWidth; x++) {
let td = document.createElement("td") let td = document.createElement("td")
tr.appendChild(td) tr.appendChild(td)
} }
@ -30,7 +30,7 @@ let walls
function dig(x, y) { function dig(x, y) {
walls[y][x] = false 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]] const directions = [[0, 1], [0, -1], [1, 0], [-1, 0]]
@ -41,7 +41,7 @@ function* build(x, y) {
let y1 = y + dy let y1 = y + dy
let x2 = x1 + dx let x2 = x1 + dx
let y2 = y1 + dy 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) dig(x1, y1)
yield x1, y1 yield x1, y1
dig(x2, y2) dig(x2, y2)
@ -51,36 +51,35 @@ function* build(x, y) {
} }
} }
function* endlessLaby() { function* endlessLoadingMaze() {
while (true) { while (true) {
for (const tr of labyTable.children) { for (const tr of loadingMazeTable.children) {
for (const td of tr.children) { for (const td of tr.children) {
td.className = "wall" 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 x0 = Math.floor(loadingMazeWidth / 2)
let y0 = Math.floor(labyHeight / 2) let y0 = Math.floor(loadingMazeHeight / 2)
dig(x0, y0) dig(x0, y0)
yield* build(x0, y0) yield* build(x0, y0)
} }
} }
let labyIterator = endlessLaby() let interval
let interval = window.setInterval(() => labyIterator.next(), 200)
const loadMngr = new THREE.LoadingManager() const loadMngr = new THREE.LoadingManager()
const loader = new THREE.TextureLoader(loadMngr) const loader = new THREE.TextureLoader(loadMngr)
loader.setPath("textures/") loader.setPath("textures/")
let t0
loadMngr.onStart = function (url, itemsLoaded, itemsTotal) { loadMngr.onStart = function (url, itemsLoaded, itemsTotal) {
progress.innerText = "0" progress.innerText = "0"
t0 = Date.now()
let loadingMazeIterator = endlessLoadingMaze()
interval = window.setInterval(() => loadingMazeIterator.next(), 200)
} }
loadMngr.onProgress = function (url, itemsLoaded, itemsTotal) { loadMngr.onProgress = function (url, itemsLoaded, itemsTotal) {
progress.innerText = Math.floor(100 * itemsLoaded / itemsTotal) progress.innerText = Math.floor(100 * itemsLoaded / itemsTotal)
@ -203,10 +202,10 @@ function repeatGroundMaterial (texture) {
} }
const groundMaterial = new THREE.MeshStandardMaterial({ const groundMaterial = new THREE.MeshStandardMaterial({
map : loader.load('angled-blocks-vegetation/albedo.webp', repeatGroundMaterial), map : loader.load('angled-blocks-vegetation/albedo.webp', repeatGroundMaterial),
aoMap : loader.load('angled-blocks-vegetation/ao.webp', repeatGroundMaterial), aoMap : loader.load('angled-blocks-vegetation/ao-roughness-metalness.webp', repeatGroundMaterial),
metalnessMap: loader.load('angled-blocks-vegetation/metallic.webp', repeatGroundMaterial), metalnessMap: loader.load('angled-blocks-vegetation/ao-roughness-metalness.webp', repeatGroundMaterial),
normalMap : loader.load('angled-blocks-vegetation/normal-dx.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 : { /*hexTiling : {
patchScale: 1, patchScale: 1,
useContrastCorrectedBlending: true, useContrastCorrectedBlending: true,

39
style.css
View File

@ -3,7 +3,7 @@ body {
background-color: #041626; background-color: #041626;
font-size: 1.3em; font-size: 1.3em;
overscroll-behavior: none; overscroll-behavior: none;
cursor: wait; cursor: progress;
} }
#loading { #loading {
@ -12,27 +12,54 @@ body {
font-size: 1.3em; font-size: 1.3em;
top: 20vh; top: 20vh;
margin: auto; margin: auto;
font-family: sans-serif;
} }
#loadingMessage { #loadingMessage {
margin-bottom: 0.5em; 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; width: 230px;
height: 230px; height: 230px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: 20vh; margin-top: 20vh;
margin-bottom: 5vh; 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; width: 10px;
height: 10px; height: 10px;
transition: background-color 1s; transition: background-color 1s;
border: 0; border: none;
padding: 0; padding: 0;
} }
@ -70,7 +97,7 @@ body {
justify-content: center; justify-content: center;
z-index: 1; z-index: 1;
color: gray; color: gray;
font-family: Times, "Times New Roman", Georgia, serif; font-family: serif;
} }
#message a { #message a {