バトルゾーン

kurumayusamugariko · Feb 10, 2024 · 187213d · 187213d
1 parent ab4c525
commit 187213d
Show file tree

Hide file tree

Showing 10 changed files with 1,057 additions and 56 deletions.
diff --git a/battlezone.json b/battlezone.json
diff --git a/classes.js b/classes.js
@@ -1,20 +1,22 @@
 //playerのアニメーション
 class Sprite {
-  constructor({ position, velocity, image, frames = { max: 1 } }) {
+  constructor({ position, velocity, image, frames = { max: 1 }, sprites }) {
     this.position = position;
     this.image = image;
-    this.frames = frames;
+    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,
-      0,
+      this.frames.val * this.width,
       0,
       this.image.width / this.frames.max,
       this.image.height,
@@ -23,6 +25,19 @@ class Sprite {
       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;
+      }
+
   }
 }
 
@@ -34,9 +49,9 @@ class Boundary {
     this.width = 40;
     this.height = 20;
   }
-	//当たり判定の描画
+  //当たり判定の描画
   draw() {
-    c.fillStyle = "rgba(255, 0, 0, 0)";//透明
+    c.fillStyle = "rgba(255, 0, 0, 0.2)"; //透明
     c.fillRect(this.position.x, this.position.y, this.width, this.height);
   }
-}
+}
diff --git a/data/battleZones.js b/data/battleZones.js
diff --git a/game2.html b/game2.html
@@ -7,6 +7,7 @@
 	<body>
 		<h1>Nomatem</h1>
 		<canvas></canvas>
+		<script src ="data/battleZones.js"></script>
 		<script src ="data/collisions.js"></script>
 		<script src ="classes.js"></script>
 		<script src ="game2.js"></script>

diff --git a/game2.js b/game2.js
@@ -9,6 +9,11 @@ for (let i = 0; i < collisions.length; i += 80) {
   collisionsMap.push(collisions.slice(i, 80 + i));
 }
 
+const battleZonesMap = [];
+for (let i = 0; i < battleZonesData.length; i += 80) {
+  battleZonesMap.push(battleZonesData.slice(i, 80 + i));
+}
+
 const boundaries = [];
 const offset = {
   x: -544,
@@ -29,6 +34,24 @@ collisionsMap.forEach((row, i) => {
   });
 });
 
+const battleZones = [];
+
+battleZonesMap.forEach((row, i) => {
+  row.forEach((symbol, j) => {
+    if (symbol === 1025)
+      battleZones.push(
+        new Boundary({
+          position: {
+            x: j * Boundary.width + offset.x,
+            y: i * Boundary.height + offset.y,
+          },
+        })
+      );
+  });
+});
+
+console.log(battleZones);
+
 //map画像objを作成
 const image = new Image();
 image.src = "./public/metamon/metown.png";
@@ -38,19 +61,34 @@ const foregroundImage = new Image();
 foregroundImage.src = "./public/metamon/foreground.png";
 
 //player画像objを作成
-const playerImage = new Image();
-playerImage.src = "./public/metamon/player/playerDown.png";
+const playerDownImage = new Image();
+playerDownImage.src = "./public/metamon/player/playerDown.png";
+
+const playerUpImage = new Image();
+playerUpImage.src = "./public/metamon/player/playerUp.png";
+
+const playerLeftImage = new Image();
+playerLeftImage.src = "./public/metamon/player/playerLeft.png";
+
+const playerRightImage = new Image();
+playerRightImage.src = "./public/metamon/player/playerRight.png";
 
 //playerの初期位置
 const player = new Sprite({
   position: {
     x: canvas.width / 2 - 192 / 4 / 2,
     y: canvas.height / 2 - 68 / 2,
   },
-  image: playerImage,
+  image: playerDownImage,
   frames: {
     max: 4,
   },
+	sprites: {
+		up: playerUpImage,
+		left: playerLeftImage,
+		right: playerRightImage,
+		down: playerDownImage,
+	}
 });
 
 const background = new Sprite({
@@ -84,7 +122,7 @@ const keys = {
   },
 };
 
-const moveables = [background, ...boundaries, foreground];
+const moveables = [background, ...boundaries, foreground, ...battleZones];
 
 function rectangularCollision({ rectangle1, rectangle2 }) {
   return (
@@ -101,12 +139,19 @@ function animate() {
   boundaries.forEach((boundary) => {
     boundary.draw();
   });
+	battleZones.forEach(battleZone =>{
+		battleZone.draw();
+	});
   player.draw();
 	foreground.draw();
 
 	let moving = true;
+	player.moving = false;
   //playerの移動。まぁ動かしてるのは背景だけど
   if (keys.w.pressed && lastKey === "w") {
+		player.moving = true;
+		player.image = player.sprites.up;
+
     for (let i = 0; i < boundaries.length; i++) {
 			const boundary = boundaries[i];
       //player当たり判定
@@ -133,6 +178,9 @@ function animate() {
       moveable.position.y += 3;
     });
   } else if (keys.a.pressed && lastKey === "a") {
+		player.moving = true;
+		player.image = player.sprites.left;
+
 		for (let i = 0; i < boundaries.length; i++) {
 			const boundary = boundaries[i];
       //player当たり判定
@@ -159,6 +207,9 @@ function animate() {
       moveable.position.x += 3;
     });
   } else if (keys.s.pressed && lastKey === "s") {
+		player.moving = true;
+		player.image = player.sprites.down;
+
 		for (let i = 0; i < boundaries.length; i++) {
 			const boundary = boundaries[i];
       //player当たり判定
@@ -185,6 +236,9 @@ function animate() {
       moveable.position.y -= 3;
     });
   } else if (keys.d.pressed && lastKey === "d") {
+		player.moving = true;
+		player.image = player.sprites.right;
+
 		for (let i = 0; i < boundaries.length; i++) {
 			const boundary = boundaries[i];
       //player当たり判定