From b3c2858bc7574ba89b4aa7069d815b7c6c3f4f67 Mon Sep 17 00:00:00 2001 From: Sacha Leone Date: Fri, 1 Dec 2023 16:18:41 +0100 Subject: [PATCH] =?UTF-8?q?Rotation=20des=20polygones=20et=20fond=20de=20c?= =?UTF-8?q?anevas=20d=C3=A9grad=C3=A9=20(comment=C3=A9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 3 +- js/main.js | 218 +++++++++++++++++++++++++------------------ templates/index.html | 2 +- 3 files changed, 130 insertions(+), 93 deletions(-) diff --git a/css/style.css b/css/style.css index 25b6d16..a29feec 100644 --- a/css/style.css +++ b/css/style.css @@ -1,6 +1,5 @@ /* Copyright © 2023 Entreprise SpaceTarders */ canvas { - background-color: rgb(0, 0, 43); - border: 2px solid black; + border: 2px solid rgb(15, 38, 88); border-radius: 5px; } \ No newline at end of file diff --git a/js/main.js b/js/main.js index 0b5d816..2b4adb0 100644 --- a/js/main.js +++ b/js/main.js @@ -1,9 +1,33 @@ //Copyright © 2023 Entreprise SpaceTarders +//variables de rotation +let msPrev = window.performance.now() +const fps = 60 +const msPerFrame = 1000 / fps +let frames = 0 +//variables de tailles de planète +let xxl = 20 +let xl = 15 +let l = 10 +let m = 5 +let s = 4 +let xs = 3 +let max = 40; +let min = 35; +//jeton d'agent let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQk9VRkZPTjM4IiwidmVyc2lvbiI6InYyLjEuMiIsInJlc2V0X2RhdGUiOiIyMDIzLTExLTE4IiwiaWF0IjoxNzAwODI5NjE2LCJzdWIiOiJhZ2VudC10b2tlbiJ9.Oh-ecWSm0hOcSHfsngFdPN6C20OkHzqIfhOS3fSb2NXIy6v3ZqlN1C6BDVbz6080FaYv3zcmPVXwpa7igfqC05iVGNvcP3XitzcrmtUlxNUd2g1ohndSir8RduI0qso9ZSNOYaMGm7HEp4lH7OVU7cr45Msx92SinpjFi802X0CGmZtT5eli1szHcrol6Lw6KgN_rBJ-TmJayLylpDVL5I7koxsXLj8IhWTryExF4euiTIS_flDSiEpomPA3iWK-ytyjAj8URaLm9vAZQa-IxjuznS2N5F6WM0Wzi1l6JW47k8MM13spKwXLqAWhTRDoo-jdjLmH8faMPDgCxO3yfw"; +//décalage let offset = { x: 2, y: 2 }; +//Instanciation du canevas +const canvas = document.getElementById("canvas"); +canvas.style="width:100%;height:100vh;" +let w = canvas.width = canvas.offsetWidth; +let h = canvas.height = canvas.offsetHeight; +const ctx = canvas.getContext("2d"); +let wayPoints = null +//Initialisation du jeu function initGame() { const settings = { async: true, @@ -22,7 +46,7 @@ function initGame() { console.log(response); }); } - +//Récuperer l'agent function getAgent() { const settings = { async: true, @@ -49,12 +73,12 @@ function getAgent() { getSystem(metaSystem[0] + "-" + metaSystem[1]); }); } - +//Récuperer les planètes function getWayPoint(wayPoint) { const settings = { async: true, crossDomain: true, - url: `https://api.spacetraders.io/v2/systems/systemSymbol/waypoints/waypointSymbol`, + url: `https://api.spacetraders.io/v2/systems/systemSymbol/waypoints/${wayPoint}`, method: 'GET', headers: { Accept: 'application/json' @@ -65,7 +89,7 @@ function getWayPoint(wayPoint) { console.log(response); }); }; - +//Récuperer le système function getSystem(system) { const settings = { async: true, @@ -76,96 +100,114 @@ function getSystem(system) { Accept: 'application/json' } }; - - + $.ajax(settings).done(function (response) { - drawSystem(response.data.waypoints); + response.data.waypoints.forEach((waypoint) => { + waypoint.rotation = 0 + if (waypoint.orbits) { + let x = Math.floor(Math.random() * max - Math.random() * max); + let y = Math.floor(Math.random() * max - Math.random() * max); + waypoint.x += x > 0 ? x + min : x - min; + waypoint.y += y > 0 ? y + min : y - min; + } + }) + wayPoints = response.data.waypoints; }); } +// function drawBackground(){ +// // Create gradient +// var grd = ctx.createRadialGradient(650, 450, 5, 600, 450, 550); +// grd.addColorStop(0, "rgb(15, 38, 88)"); +// grd.addColorStop(1, "rgb(13, 7, 46)"); +// // Fill with gradient +// ctx.fillStyle = grd; +// ctx.fillRect(0, 0, w, h); +// ctx.clearRect(0, 0, w, h); +// } -function drawSystem(wayPoints) { - const canvas = document.getElementById("canvas"); - canvas.style="width:100%;height:100vh;" - let w = canvas.width = canvas.offsetWidth; - let h = canvas.height = canvas.offsetHeight; - let xxl = 20 - let xl = 15 - let l = 10 - let m = 5 - let s = 4 - let xs = 3 - let max = 40; - let min = 35; - const ctx = canvas.getContext("2d"); +//dessiner le système +function drawSystem() { + window.requestAnimationFrame(drawSystem) + ctx.fillStyle = "rgb(0,0,0)" + ctx.fillRect(0, 0, w, h); + const msNow = window.performance.now() + const msPassed = msNow - msPrev + + if (msPassed < msPerFrame) return + + const excessTime = msPassed % msPerFrame + msPrev = msNow - excessTime + + frames++ + if(wayPoints) { wayPoints.forEach(wayPoint => { - if (wayPoint.orbits) { - let x = Math.floor(Math.random() * max - Math.random() * max); - let y = Math.floor(Math.random() * max - Math.random() * max); - wayPoint.x += x > 0 ? x + min : x - min; - wayPoint.y += y > 0 ? y + min : y - min; - } - switch (wayPoint.type) { - //PLANÈTE - case "PLANET": - //QG - if(wayPoint.x/offset.x + w == 0 && wayPoint.y/offset.y + h == 0){ - drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(255, 255, 0)', xxl); //jaune clair - } - else{ - drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(6, 218, 52)', m); //vert clair - } - break; - //PLANÈTE GAZEUSE - case "GAS_GIANT": - drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(255, 174, 0)', l); //orange clair - break; - //LUNE - case "MOON": - drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(255, 255, 255)', xs) //blanc - break; - //STATION EN ORBITE - case "ORBITAL_STATION": - drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(0, 153, 255)', 4, s) //bleu clair - break; - //PORTAIL - case "JUMP_GATE": - drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(67, 0, 250)', 5, xl) //violet - break; - //ASTÉROÏDE - case "ASTEROID": - drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(163, 163, 163)', 5, m) //bleu clair - break; - case "ASTEROID_FIELD": - case "ASTEROID_BASE": - case "ENGINEERED_ASTEROID": - drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(255, 0, 255)', m) //jaune - break; - //NEBULEUSE - case "NEBULA": - drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(67, 0, 250)', m) //violet fluo - break; - //CHAMP DE DÉBRIS - case "DEBRIS_FIELD": - drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(107, 106, 143)', m) //gris/bleu - break; - //PUIT DE GRAVITÉ - case "GRAVITY_WELL": - case "ARTIFICIAL_GRAVITY_WELL": - drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb()') // - break; - //STATION ESSENCE - case "FUEL_STATION": - drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(255, 0, 0)', 4, m) //rouge - break; - } - }); + switch (wayPoint.type) { + //PLANÈTE + case "PLANET": + //QG + if(wayPoint.x/offset.x + w == 0 && wayPoint.y/offset.y + h == 0){ + drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(255, 255, 0)', xxl); //jaune clair + } + else{ + drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(6, 218, 52)', m); //vert clair + } + break; + //PLANÈTE GAZEUSE + case "GAS_GIANT": + drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(255, 174, 0)', l); //orange clair + break; + //LUNE + case "MOON": + drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(255, 255, 255)', xs) //blanc + break; + //STATION EN ORBITE + case "ORBITAL_STATION": + drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(0, 153, 255)', 4, s) //bleu clair + break; + //PORTAIL + case "JUMP_GATE": + wayPoint.rotation += Math.PI / 50 + drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(67, 0, 250)', 5, xl) //violet + break; + //ASTÉROÏDE + case "ASTEROID": + wayPoint.rotation += Math.PI / 200 + drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(163, 163, 163)', 5, m) //bleu clair + break; + case "ASTEROID_FIELD": + case "ASTEROID_BASE": + case "ENGINEERED_ASTEROID": + drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(255, 0, 255)', m) //jaune + break; + //NEBULEUSE + case "NEBULA": + drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(67, 0, 250)', m) //violet fluo + break; + //CHAMP DE DÉBRIS + case "DEBRIS_FIELD": + drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(107, 106, 143)', m) //gris/bleu + break; + //PUIT DE GRAVITÉ + case "GRAVITY_WELL": + case "ARTIFICIAL_GRAVITY_WELL": + drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb()') // + break; + //STATION ESSENCE + case "FUEL_STATION": + drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(255, 0, 0)', 4, m) //rouge + break; + } + }); + } } +//dessiner un cercle function drawWaypointCircle(wayPoint, ctx, w, h, color, radius) { ctx.beginPath(); ctx.fillStyle = color; ctx.arc(wayPoint.x/offset.x + w, wayPoint.y/offset.y + h, radius, 0, 2 * Math.PI); ctx.fill() } +//dessiner une forme polygonale function drawWaypointPolygone(wayPoint, ctx, w, h, color, nbCote, radius){ let numberOfSides = nbCote; let x = wayPoint.x/offset.x + w; @@ -173,16 +215,12 @@ function drawWaypointPolygone(wayPoint, ctx, w, h, color, nbCote, radius){ let angle = 2*Math.PI/numberOfSides; ctx.beginPath(); ctx.fillStyle = color; - ctx.moveTo (x + radius*Math.cos(0), y + radius*Math.sin(0)); - for (let i = 1; i <= numberOfSides; i++) { - ctx.lineTo (x + radius*Math.cos(i * angle), y + radius*Math.sin(i * angle)); + ctx.moveTo (x + radius*Math.cos(wayPoint.rotation + 0), y + radius*Math.sin(wayPoint.rotation + 0)); + for (let i = 0; i < numberOfSides; i++) { + ctx.lineTo (x + radius*Math.cos(wayPoint.rotation + (i * angle)), y + radius*Math.sin(wayPoint.rotation +(i * angle))); } ctx.fill(); } -// function rotationAnimation(ctx){ -// while(true){ -// ctx.rotate(80*Math.PI /180) -// } -// } +drawSystem(); getAgent(); \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 01c65d3..da62bde 100644 --- a/templates/index.html +++ b/templates/index.html @@ -7,7 +7,7 @@ - + Space traders