anulax
/
skamkraft.anulax.ch
1
0
Fork 0
Code Issues Pull Requests Packages project_board Releases Wiki Activity

Rotation des polygones et fond de canevas dégradé (commenté)

Browse Source
agent_sacha
Sacha Leone ago%!(EXTRA string=2 years)
parent 7df8951fa1
commit b3c2858bc7
3 changed files with 130 additions and 93 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      css/style.css
  2. 218
      js/main.js
  3. 2
      templates/index.html

3
css/style.css
Unescape View File

@ -1,6 +1,5 @@
/* Copyright © 2023 Entreprise SpaceTarders */ /* Copyright © 2023 Entreprise SpaceTarders */
canvas { canvas {
background-color: rgb(0, 0, 43); border: 2px solid rgb(15, 38, 88);
border: 2px solid black;
border-radius: 5px; border-radius: 5px;
} }

218
js/main.js
Unescape View File

@ -1,9 +1,33 @@
//Copyright © 2023 Entreprise SpaceTarders //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"; let token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGlmaWVyIjoiQk9VRkZPTjM4IiwidmVyc2lvbiI6InYyLjEuMiIsInJlc2V0X2RhdGUiOiIyMDIzLTExLTE4IiwiaWF0IjoxNzAwODI5NjE2LCJzdWIiOiJhZ2VudC10b2tlbiJ9.Oh-ecWSm0hOcSHfsngFdPN6C20OkHzqIfhOS3fSb2NXIy6v3ZqlN1C6BDVbz6080FaYv3zcmPVXwpa7igfqC05iVGNvcP3XitzcrmtUlxNUd2g1ohndSir8RduI0qso9ZSNOYaMGm7HEp4lH7OVU7cr45Msx92SinpjFi802X0CGmZtT5eli1szHcrol6Lw6KgN_rBJ-TmJayLylpDVL5I7koxsXLj8IhWTryExF4euiTIS_flDSiEpomPA3iWK-ytyjAj8URaLm9vAZQa-IxjuznS2N5F6WM0Wzi1l6JW47k8MM13spKwXLqAWhTRDoo-jdjLmH8faMPDgCxO3yfw";
//décalage
let offset = { let offset = {
x: 2, x: 2,
y: 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() { function initGame() {
const settings = { const settings = {
async: true, async: true,
@ -22,7 +46,7 @@ function initGame() {
console.log(response); console.log(response);
}); });
} }
//Récuperer l'agent
function getAgent() { function getAgent() {
const settings = { const settings = {
async: true, async: true,
@ -49,12 +73,12 @@ function getAgent() {
getSystem(metaSystem[0] + "-" + metaSystem[1]); getSystem(metaSystem[0] + "-" + metaSystem[1]);
}); });
} }
//Récuperer les planètes
function getWayPoint(wayPoint) { function getWayPoint(wayPoint) {
const settings = { const settings = {
async: true, async: true,
crossDomain: 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', method: 'GET',
headers: { headers: {
Accept: 'application/json' Accept: 'application/json'
@ -65,7 +89,7 @@ function getWayPoint(wayPoint) {
console.log(response); console.log(response);
}); });
}; };
//Récuperer le système
function getSystem(system) { function getSystem(system) {
const settings = { const settings = {
async: true, async: true,
@ -76,96 +100,114 @@ function getSystem(system) {
Accept: 'application/json' Accept: 'application/json'
} }
}; };
$.ajax(settings).done(function (response) { $.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) { //dessiner le système
const canvas = document.getElementById("canvas"); function drawSystem() {
canvas.style="width:100%;height:100vh;" window.requestAnimationFrame(drawSystem)
let w = canvas.width = canvas.offsetWidth; ctx.fillStyle = "rgb(0,0,0)"
let h = canvas.height = canvas.offsetHeight; ctx.fillRect(0, 0, w, h);
let xxl = 20 const msNow = window.performance.now()
let xl = 15 const msPassed = msNow - msPrev
let l = 10
let m = 5 if (msPassed < msPerFrame) return
let s = 4
let xs = 3 const excessTime = msPassed % msPerFrame
let max = 40; msPrev = msNow - excessTime
let min = 35;
const ctx = canvas.getContext("2d"); frames++
if(wayPoints) {
wayPoints.forEach(wayPoint => { wayPoints.forEach(wayPoint => {
if (wayPoint.orbits) { switch (wayPoint.type) {
let x = Math.floor(Math.random() * max - Math.random() * max); //PLANÈTE
let y = Math.floor(Math.random() * max - Math.random() * max); case "PLANET":
wayPoint.x += x > 0 ? x + min : x - min; //QG
wayPoint.y += y > 0 ? y + min : y - min; 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
switch (wayPoint.type) { }
//PLANÈTE else{
case "PLANET": drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(6, 218, 52)', m); //vert clair
//QG }
if(wayPoint.x/offset.x + w == 0 && wayPoint.y/offset.y + h == 0){ break;
drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(255, 255, 0)', xxl); //jaune clair //PLANÈTE GAZEUSE
} case "GAS_GIANT":
else{ drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(255, 174, 0)', l); //orange clair
drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(6, 218, 52)', m); //vert clair break;
} //LUNE
break; case "MOON":
//PLANÈTE GAZEUSE drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(255, 255, 255)', xs) //blanc
case "GAS_GIANT": break;
drawWaypointCircle(wayPoint, ctx, w/2, h/2, 'rgb(255, 174, 0)', l); //orange clair //STATION EN ORBITE
break; case "ORBITAL_STATION":
//LUNE drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(0, 153, 255)', 4, s) //bleu clair
case "MOON": break;
drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(255, 255, 255)', xs) //blanc //PORTAIL
break; case "JUMP_GATE":
//STATION EN ORBITE wayPoint.rotation += Math.PI / 50
case "ORBITAL_STATION": drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(67, 0, 250)', 5, xl) //violet
drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(0, 153, 255)', 4, s) //bleu clair break;
break; //ASTÉROÏDE
//PORTAIL case "ASTEROID":
case "JUMP_GATE": wayPoint.rotation += Math.PI / 200
drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(67, 0, 250)', 5, xl) //violet drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(163, 163, 163)', 5, m) //bleu clair
break; break;
//ASTÉROÏDE case "ASTEROID_FIELD":
case "ASTEROID": case "ASTEROID_BASE":
drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(163, 163, 163)', 5, m) //bleu clair case "ENGINEERED_ASTEROID":
break; drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(255, 0, 255)', m) //jaune
case "ASTEROID_FIELD": break;
case "ASTEROID_BASE": //NEBULEUSE
case "ENGINEERED_ASTEROID": case "NEBULA":
drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(255, 0, 255)', m) //jaune drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(67, 0, 250)', m) //violet fluo
break; break;
//NEBULEUSE //CHAMP DE DÉBRIS
case "NEBULA": case "DEBRIS_FIELD":
drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(67, 0, 250)', m) //violet fluo drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(107, 106, 143)', m) //gris/bleu
break; break;
//CHAMP DE DÉBRIS //PUIT DE GRAVITÉ
case "DEBRIS_FIELD": case "GRAVITY_WELL":
drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb(107, 106, 143)', m) //gris/bleu case "ARTIFICIAL_GRAVITY_WELL":
break; drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb()') //
//PUIT DE GRAVITÉ break;
case "GRAVITY_WELL": //STATION ESSENCE
case "ARTIFICIAL_GRAVITY_WELL": case "FUEL_STATION":
drawWaypointCircle(wayPoint,ctx, w/2, h/2, 'rgb()') // drawWaypointPolygone(wayPoint,ctx, w/2, h/2, 'rgb(255, 0, 0)', 4, m) //rouge
break; 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) { function drawWaypointCircle(wayPoint, ctx, w, h, color, radius) {
ctx.beginPath(); ctx.beginPath();
ctx.fillStyle = color; ctx.fillStyle = color;
ctx.arc(wayPoint.x/offset.x + w, wayPoint.y/offset.y + h, radius, 0, 2 * Math.PI); ctx.arc(wayPoint.x/offset.x + w, wayPoint.y/offset.y + h, radius, 0, 2 * Math.PI);
ctx.fill() ctx.fill()
} }
//dessiner une forme polygonale
function drawWaypointPolygone(wayPoint, ctx, w, h, color, nbCote, radius){ function drawWaypointPolygone(wayPoint, ctx, w, h, color, nbCote, radius){
let numberOfSides = nbCote; let numberOfSides = nbCote;
let x = wayPoint.x/offset.x + w; 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; let angle = 2*Math.PI/numberOfSides;
ctx.beginPath(); ctx.beginPath();
ctx.fillStyle = color; ctx.fillStyle = color;
ctx.moveTo (x + radius*Math.cos(0), y + radius*Math.sin(0)); ctx.moveTo (x + radius*Math.cos(wayPoint.rotation + 0), y + radius*Math.sin(wayPoint.rotation + 0));
for (let i = 1; i <= numberOfSides; i++) { for (let i = 0; i < numberOfSides; i++) {
ctx.lineTo (x + radius*Math.cos(i * angle), y + radius*Math.sin(i * angle)); ctx.lineTo (x + radius*Math.cos(wayPoint.rotation + (i * angle)), y + radius*Math.sin(wayPoint.rotation +(i * angle)));
} }
ctx.fill(); ctx.fill();
} }
// function rotationAnimation(ctx){
// while(true){
// ctx.rotate(80*Math.PI /180)
// } drawSystem();
// }
getAgent(); getAgent();

2
templates/index.html
Unescape View File

@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="../js/main.js"></script> <script src="../js/main.js" defer></script>
<title>Space traders</title> <title>Space traders</title>
</head> </head>
<body> <body>

Write Preview
Loading…
Cancel
Save