Shoot lasers

src/index.pug

@@ -22,6 +22,9 @@ html(lang='en')
           .canon
             - for (let i = 0; i < SEGMENTS; ++i)
               .canon__segment
+            .laser
+              - for (let i = 0; i < SEGMENTS; ++i)
+                .laser__segment
         .fuselage.fuselage--back
           .engine.engine--center
             - for (let i = 0; i < SEGMENTS; ++i)

src/scripts/components/Laser.js

@@ -0,0 +1,37 @@
+/**
+ * @author Alain Cao Van Tuong <contact@alain-caovantruong.fr>
+ */
+
+/* Definition */
+
+/**
+ * @class Laser
+ */
+class Laser {
+  constructor() {
+    this.laser = document.querySelector('.laser')
+    this.state = 'isShot'
+    this.isShooting = false
+  }
+
+  init() {
+    window.addEventListener('keydown', (event) => {
+      if (event.keyCode === 32 && !this.isShooting) {
+        const clone = this.laser.cloneNode(true)
+        this.isShooting = true
+        this.laser.classList.add(this.state)
+        this.laser.parentElement.appendChild(clone)
+
+        setTimeout(() => {
+          this.laser.parentElement.removeChild(this.laser)
+          this.laser = clone
+          this.isShooting = false
+        }, 500)
+      }
+    })
+  }
+}
+
+/* Export */
+
+export default Laser

src/scripts/components/Space.js

@@ -102,7 +102,7 @@ class Space {
         star.y = mod(y - position.y * (DEPTH  - z) / REDUCER, width)
       })
 
-      // window.requestAnimationFrame(loop)
+      window.requestAnimationFrame(loop)
     }
     loop()
   }

src/scripts/index.js

@@ -3,9 +3,11 @@
 import '~/styles/index.scss'
 
 import Grabber from './components/Grabber'
+import Laser from './components/Laser'
 import Space from './components/Space'
 
 /* Initialization */
 
 new Grabber('.area').init()
+new Laser().init()
 new Space().init()

src/styles/index.scss

@@ -8,6 +8,7 @@
 @import './modules/spaceship';
 @import './modules/fuselage';
 @import './modules/canon';
+@import './modules/laser';
 @import './modules/basement';
 @import './modules/engine';
 @import './modules/fire';

src/styles/modules/_fire.scss

@@ -19,7 +19,7 @@
       &:nth-child(#{index($heightsFires, $index $height)}) {
         height: $height;
         width: $height * 2;
-        // animation: flaming #{index($heightsFires, $index $height) * .125s} ease-in-out infinite;
+        animation: flaming #{index($heightsFires, $index $height) * .125s} ease-in-out infinite;
       }
     }
   }

src/styles/modules/_laser.scss

@@ -0,0 +1,49 @@
+.laser {
+  position: absolute;
+  top: $radiusCanon / 2;
+  left: $radiusCanon / 2 - .5px;
+  transition: transform 1s ease-in-out;
+  transform: translateZ(0);
+  will-change: transform;
+
+  &.isShot {
+    transform: translateZ(#{$sizeSpaceship * 10});
+  }
+
+  &__segment {
+    position: absolute;
+    top: -.5px;
+    left: -.5px;
+    height: $radiusLaser;
+    width: $sizeLaserSegments;
+
+    @for $i from 0 to $totalSegments {
+      &:nth-child(#{$i}) {
+        transform: rotateZ(#{$i / ($totalSegments * 2)}turn);
+      }
+    }
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      height: $radiusCanon * 5;
+      width: 100%;
+      background-color: red;
+      opacity: .125;
+      transform-origin: 0 0;
+    }
+
+    &::before {
+      top: 100%;
+      transform: rotateX(-90deg);
+      transform-origin: 50% 0%;
+    }
+
+    &::after {
+      bottom: 100%;
+      transform: rotateX(90deg);
+      transform-origin: 50% 100%;
+    }
+  }
+}

src/styles/modules/_spaceship.scss

@@ -2,5 +2,5 @@
   position: relative;
   margin: auto;
   will-change: transform;
-  // animation: navigating 5s ease-in-out infinite;
+  animation: navigating 5s ease-in-out infinite;
 }

src/styles/tools/_variables.scss

@@ -12,6 +12,8 @@ $totalSegments: 16;
 $sizeMuzzle: 1px;
 $radiusCanon: 10px;
 $sizeCanonSegments: $radiusCanon / 10;
+$radiusLaser: 1px;
+$sizeLaserSegments: $radiusLaser;
 $radiusEngine: 125px;
 $sizeEngineSegments: $radiusEngine / 10;
 $distanceFire: 12.5px;