zero-to-mastery · Kingtastix · Jun 24, 2023
diff --git a/src/art/kingtastix/SpaceInvader.png b/src/art/kingtastix/SpaceInvader.png
diff --git a/src/art/kingtastix/index.html b/src/art/kingtastix/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <title>Document</title>
+</head>
+<body>
+    <canvas></canvas>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/src/art/kingtastix/meta.json b/src/art/kingtastix/meta.json
@@ -0,0 +1,5 @@
+{
+    "art_name": "Void Space",
+    "author_name": "Kingtastix",
+    "author_github_url": "https://github.com/Kingtastix"
+  }
diff --git a/src/art/kingtastix/script.js b/src/art/kingtastix/script.js
@@ -0,0 +1,93 @@
+const canvas = document.querySelector('canvas');
+const context = canvas.getContext('2d');
+
+canvas.width = 600;
+canvas.height = 600;
+
+class Player {
+    constructor(){
+
+        this.radius = 20;
+
+        this.position = {
+            x: Math.floor(Math.random() * canvas.width) + this.radius,
+            y: Math.floor(Math.random() * canvas.height) + this.radius
+        };
+
+        this.velocity = {
+            x: Math.floor(Math.random() * 10),
+            y: Math.floor(Math.random() * 10),
+        }
+
+        this.color = 'white';
+
+    }
+
+    draw(){
+        context.beginPath();
+        context.arc(this.position.x, this.position.y, this.radius, 0, Math.PI * 2);
+        context.fillStyle = this.color;
+        context.fill();
+        context.closePath();
+    }
+
+    update(){
+
+        this.draw();
+        const colors = ['white', 'red', 'green', 'purple'];
+
+        if(this.position.x + this.radius > canvas.width){
+            this.velocity.x = -this.velocity.x;
+            this.color = colors[Math.floor(Math.random() * colors.length)];
+        }
+
+        if(this.position.x - this.radius < 0){
+            this.velocity.x = -this.velocity.x;
+            this.color = colors[Math.floor(Math.random() * colors.length)];
+        }
+
+        if(this.position.y + this.radius > canvas.height){
+            this.velocity.y = -this.velocity.y;
+            this.color = colors[Math.floor(Math.random() * colors.length)];
+        }
+
+        if(this.position.y - this.radius < 0){
+            this.velocity.y = -this.velocity.y;
+            this.color = colors[Math.floor(Math.random() * colors.length)];
+        }
+
+        this.position.x += this.velocity.x;
+        this.position.y += this.velocity.y;
+
+        console.log(this.velocity);
+
+        /*if (radius + x > innerWidth)
+            vx = 0 - vx;
+
+        if (x - radius < 0)
+            vx = 0 - vx;
+
+        if (y + radius > innerHeight)
+            vy = 0 - vy;
+
+        if (y - radius < 0)
+            vy = 0 - vy;*/
+
+
+    }
+
+}
+
+const player = new Player();
+
+
+function animate(){
+
+    requestAnimationFrame(animate);
+    context.fillStyle = 'black';
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    player.update();
+
+}
+
+animate()
diff --git a/src/art/kingtastix/style.css b/src/art/kingtastix/style.css
@@ -0,0 +1,13 @@
+*{
+    box-sizing: border-box;
+}
+
+body{
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    overflow: hidden;
+    background-color: black;
+}