Merge branch 'main' of github.com:kurumayusamugariko/otamesi

.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+package-lock.json
+package.json
+modules

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+	"cSpell.words": [
+		"metamon",
+		"metown"
+	]
+}

README.md

@@ -0,0 +1,12 @@
+# kurumayusamugariko
+### お試し用リポジトリです  
+
+\絶賛公開中 遊んでみてね/
+
+
+
+
+1.[ブロック崩しゲーム](https://kurumayusamugariko.github.io/otamesi/game)
+---
+<img src="https://img.shields.io/badge/-Javascript-black.svg?logo=javascript&style=popout-square"> <img src="https://img.shields.io/badge/-Node.js-black.svg?logo=node.js&style=popout-square">
+

app.js

@@ -0,0 +1,23 @@
+let express = require("express");
+let app = express();
+const bodyParser = require('body-parser');
+
+app.use(express.urlencoded({ extended: true }));
+app.use(express.static(__dirname + '/public'));
+app.use(bodyParser.json());
+
+app.get('/', (request, response) => {
+  response.sendFile(__dirname + '/game.html');
+});
+
+app.get('/2', (request, response) => {
+  response.sendFile(__dirname + '/game2.html');
+});
+
+app.use((req, res, next) => {
+  res.status(404).send("<h1>ページが見つかりません</h1>");
+});
+
+app.listen(8080, () => {
+  console.log("Start Server on port 8080!");
+});

classes.js

@@ -0,0 +1,57 @@
+//playerのアニメーション
+class Sprite {
+  constructor({ position, velocity, image, frames = { max: 1 }, sprites }) {
+    this.position = position;
+    this.image = image;
+    this.frames = { ...frames, val: 0, elapsed: 0 };
+
+    this.image.onload = () => {
+      this.width = this.image.width / this.frames.max;
+      this.height = this.image.height;
+    };
+    this.moving = false;
+		this.sprites = sprites;
+  }
+
+  draw() {
+    c.drawImage(
+      this.image,
+      this.frames.val * this.width,
+      0,
+      this.image.width / this.frames.max,
+      this.image.height,
+      this.position.x,
+      this.position.y,
+      this.image.width / this.frames.max,
+      this.image.height
+    );
+
+    if (!this.moving) return
+
+      if (this.frames.max > 1) {
+        this.frames.elapsed++;
+      }
+
+      //フレームの切り替え
+      if (this.frames.elapsed % 10 === 0) {
+        if (this.frames.val < this.frames.max - 1) this.frames.val++;
+        else this.frames.val = 0;
+      }
+
+  }
+}
+
+class Boundary {
+  static width = 48.2;
+  static height = 48;
+  constructor({ position }) {
+    this.position = position;
+    this.width = 40;
+    this.height = 20;
+  }
+  //当たり判定の描画
+  draw() {
+    c.fillStyle = "rgba(255, 0, 0, 0.2)"; //透明
+    c.fillRect(this.position.x, this.position.y, this.width, this.height);
+  }
+}