Shwoomple
/
Asteroids
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: Shwoomple:8d5471f937af9ee3116c17365cf492f756819149
Branches Tags
Shwoomple:master
...
compare: Shwoomple:1a69f86e4a8bb292a55c3d8a4983952cfd0c4443
Branches Tags
Shwoomple:master

3 Commits
8d5471f937 ... 1a69f86e4a

Author SHA1 Message Date
Milan Suman 1a69f86e4a add more vector methods and asteroid path node generation 2022-07-27 00:06:10 +05:30
Milan Suman 73120c9326 Merge branch 'master' of https://lostcave.ddnss.de/git/Shwoomple/Asteroids 2022-07-26 15:11:15 +05:30
Milan Suman f5584acffb first commit 2022-07-26 15:11:00 +05:30
3 changed files with 93 additions and 0 deletions
Show Stats Expand all files Collapse all files

7
index.css Normal file
View File

@ -0,0 +1,7 @@
*{
box-sizing: border-box;
}
html, body{
margin: 0px;
}

14
index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Asteroids</title>
</head>
<body>
<noscript>Javascript is either disabled or not supported by your browser. Here's a 🍪</noscript>
<canvas id="canvas"></canvas>
<script src="index.js"></script>
</body>
</html>

72
index.js Normal file
View File

@ -0,0 +1,72 @@
'use strict';
class Vector{
constructor(x, y){
this.x = x;
this.y = y;
}
scalarProduct(other){
return this.x*other.x + this.y*other.y;
}
magnitude(){
return Math.sqrt(this.x**2 + this.y**2);
}
//vector product would be useless because the resultant would be in the z-axis
angle(other = new Vector(1, 0)){ //need some magnitude for origin vector to avoid division by 0
//cosθ = a.b/|a||b|
return Math.acos(this.scalarProduct(other)/(this.magnitude()*other.magnitude()));
}
//figuring out coordinates from angle and distance
positionFromAngle(angle, distance){
return new Vector((this.x + distance) * Math.cos(angle), (this.y+distance)*Math.sin(angle));
}
}
class Asteroid{
//FIXME: Asteroid generation is very wonky
constructor(size, position, edges=5){
this.size = size;
this.edges = edges;
this.position = position;
this.nodes = [this.position];
for(let i=0; i<this.edges; i++){
let pos = this.nodes[i].positionFromAngle( this.nodes[i].angle() + (Math.max(Math.PI/6, Math.random()*(Math.PI/3))), 5);
this.nodes.push(pos);
}
}
draw(ctx){
ctx.beginPath();
this.nodes.forEach((node, _) => {
ctx.lineTo(node.x,node.y);
})
ctx.closePath();
ctx.stroke();
}
}
//initializing canvas
const canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext("2d");
const asteroid = new Asteroid(50, new Vector(300, 240));
function animate(){
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
asteroid.draw(ctx);
}
animate();