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=1 year)
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
Split 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 */
canvas {
background-color: rgb(0, 0, 43);
border: 2px solid black;
border: 2px solid rgb(15, 38, 88);
border-radius: 5px;
}

218
js/main.js
Unescape View File

@ -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();

2
templates/index.html
Unescape View File

@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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="../js/main.js"></script>
<script src="../js/main.js" defer></script>
<title>Space traders</title>
</head>
<body>

Write Preview
Loading…
Cancel
Save