Create Base Shooting

yuki0418 · Nov 12, 2020 · ce50272 · ce50272
1 parent af8f7e9
commit ce50272
Show file tree

Hide file tree

Showing 5 changed files with 212 additions and 0 deletions.
diff --git a/base-shooter/Base.js b/base-shooter/Base.js
@@ -0,0 +1,48 @@
+export default class Base {
+  x;
+  y;
+  deg;
+  ctx;
+
+  constructor(x, y, deg, ctx) {
+    this.x = x || 0;
+    this.y = y || 0;
+    this.deg = deg || 0;
+    this.ctx = ctx;
+  };
+
+  show() {
+    const canvas = {
+      width: this.ctx.canvas.width,
+      height: this.ctx.canvas.height
+    }
+    this.ctx.save();
+    this.ctx.translate(canvas.width / 2, canvas.height / 2);
+    this.ctx.rotate(this.deg);
+    this.ctx.beginPath();
+    this.ctx.fillStyle = 'white';
+    this.ctx.arc(this.x, this.y, 10, 0, Math.PI * 2, false);
+    this.ctx.closePath();
+    this.ctx.fill();
+
+    this.ctx.beginPath();
+    this.ctx.lineTo(-10, 0);
+    this.ctx.lineTo(0, -20);
+    this.ctx.lineTo(10, 0);
+    this.ctx.closePath();
+    this.ctx.fill();
+    this.ctx.restore();
+  };
+
+  update() {}
+
+  rotate(mouse) {
+    const canvas = {
+      width: this.ctx.canvas.width,
+      height: this.ctx.canvas.height
+    }
+    let targetX = (mouse.x - canvas.width / 2) - this.x;
+    let targetY = (mouse.y - canvas.height / 2) - this.y;
+    this.deg = Math.atan2(targetY, targetX) + Math.PI / 2;
+  }
+}
diff --git a/base-shooter/Bullet.js b/base-shooter/Bullet.js
@@ -0,0 +1,61 @@
+export default class Base {
+  x;
+  y;
+  deg;
+  canvas;
+  ctx;
+  speed;
+  clickedPosi;
+
+  constructor(x, y, ctx, clickedPosi) {
+    this.x = x || 0;
+    this.y = y || 0;
+    this.ctx = ctx;
+    this.clickedPosi = clickedPosi;
+    this.speed = 3;
+    this.velocityX = 0;
+    this.velocityY = 0;
+
+    this.canvas = {
+      width: this.ctx.canvas.width,
+      height: this.ctx.canvas.height
+    };
+
+    this.setDeg();
+  };
+
+  show() {
+    this.ctx.save();
+    this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2);
+    this.ctx.rotate(this.deg);
+    this.ctx.fillStyle = 'white';
+    this.ctx.beginPath();
+    this.ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
+    this.ctx.fill();
+    this.ctx.closePath();
+    // this.ctx.fillRect(this.x, this.y, 10, 10);
+    this.ctx.restore();
+  }
+
+  update() {
+    this.x = this.x + this.speed;
+    this.y = this.y + this.speed;
+  }
+
+  setDeg() {
+    let targetX = (this.clickedPosi.x - this.canvas.width / 2) - this.x;
+    let targetY = (this.clickedPosi.y - this.canvas.height / 2) - this.y;
+    this.deg = Math.atan2(targetY, targetX) - Math.PI / 4;
+  }
+
+  isOutofCanvas() {
+    if(
+      this.x > this.canvas.width / 2 || this.x < -this.canvas.width / 2 ||
+      this.y > this.canvas.height / 2 || this.y < -this.canvas.height / 2
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+}
diff --git a/base-shooter/index.html b/base-shooter/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Base Shooter</title>
+</head>
+<!-- <script src="./Base.js"></script> -->
+<body>
+  <canvas id="canvas"></canvas>
+</body>
+<style>
+  body {
+    margin: unset;
+  }
+
+  canvas {
+    display: block;
+    margin: auto;
+  }
+</style>
+<script type="module" src="./index.js"></script>
+</html>
diff --git a/base-shooter/index.js b/base-shooter/index.js
@@ -0,0 +1,78 @@
+import Base from './Base.js';
+import Bullet from './Bullet.js';
+
+let canvas = document.getElementById('canvas');
+let ctx = canvas.getContext('2d');
+let canvasWidth = 500;
+let canvasHeight = window.innerHeight;
+let mouse = {
+  x: 0, y: 0
+};
+let base;
+let bullets = [];
+
+function setup() {
+  initAddEvents();
+
+  // Setup canvas
+  clear();
+
+  base = new Base(0, 0, 0, ctx);
+}
+
+function start() {
+  window.requestAnimationFrame(draw);
+}
+
+function draw() {
+  clear();
+
+  base.update();
+  base.show();
+
+  // update and show bullets
+  for(let i in bullets) {
+    bullets[i].update();
+    bullets[i].show();
+
+    if(bullets[i].isOutofCanvas()) {
+      bullets.splice(i, 1);
+    };
+  }
+
+  window.requestAnimationFrame(draw);
+}
+
+function clear() {
+  // Setup canvas
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  ctx.fillStyle = 'black';
+  ctx.fillRect(0,0,canvasWidth,canvasHeight);
+}
+
+
+function reset() {}
+
+function end() {}
+
+function initAddEvents() {
+  // Get Cliant location on Canvas
+  canvas.addEventListener('mousemove', (event) => {
+    mouse.x = event.offsetX;
+    mouse.y = event.offsetY;
+    base.rotate(mouse);
+  });
+
+  // Click action
+  canvas.addEventListener('click', (event) => {
+    const clickedPosi = {
+      x: event.offsetX,
+      y: event.offsetY
+    }
+    bullets.push(new Bullet(0, 0, ctx, clickedPosi));
+  });
+}
+
+setup();
+start();
diff --git a/index.html b/index.html
@@ -11,5 +11,7 @@
   <a href="./breakout/breakout.html">Breakout</a>
   <br>
   <a href="./starfield/index.html">Starfield</a>
+  <br>
+  <a href="./base-shooter/index.html">Base Shooter</a>
 </body>
 </html>