add draw collision map & attack state

Viet281101 · Dec 17, 2023 · 02ef354 · 02ef354
1 parent d263f2f
commit 02ef354
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 37 deletions.
diff --git a/js/game/lvl1/display-01.js b/js/game/lvl1/display-01.js
@@ -22,7 +22,21 @@ const Display = function(canvas) {
 				destination_x, destination_y, 
 				tile_size, tile_size
 			);
+		}
+	};
+
+	//// Show collision map to screen (just for debuging and test) ////
+	this.drawCollisionMap = function(collision_map, map_columns, tile_size) {
+		this.buffer.strokeStyle = "red";
+		this.buffer.lineWidth = 2;
 
+		for (let index = collision_map.length - 1; index > -1; -- index) {
+			let value		 = collision_map[index];
+			if (value) {
+				let destination_x =           (index % map_columns  ) * tile_size;
+				let destination_y = Math.floor(index / map_columns  ) * tile_size;
+				this.buffer.strokeRect(destination_x, destination_y, tile_size, tile_size);
+			}
 		}
 	};
 

diff --git a/js/game/lvl1/game-01.js b/js/game/lvl1/game-01.js
@@ -100,8 +100,8 @@ const Game = function() {
 						if (this.collidePlatformBottom (object, tile_y + tile_size)) return;
 						if (this.collidePlatformLeft   (object, tile_x            )) return;
 							this.collidePlatformRight  (object, tile_x + tile_size); break;
-				case 16:     this.collideSlopeRight  (object, tile_x + tile_size, tile_y, tile_size); break;
-				case 17:     this.collideSlopeLeft   (object, tile_x, tile_y, tile_size); break;
+				case 16:    this.collideSlopeRight  (object, tile_x + tile_size, tile_y, tile_size); break;
+				case 17:    this.collideSlopeLeft   (object, tile_x, tile_y, tile_size); break;
 			}
 		}
 	};
@@ -148,42 +148,30 @@ const Game = function() {
 			} return false;
 		},
 
-		collideSlopeLeft:function(object, tile_x, tile_y, tile_size) {
-			var tile_bottom = tile_y + tile_size;
-			var tile_right  = tile_x + tile_size;
-
-			var object_bottom = object.getBottom();
-			var object_right  = object.getRight();
-
-			if (object_bottom > tile_y && object_right > tile_x) {
-				var slope = (tile_bottom - object.getTop()) / (tile_right - object.getLeft());
-				if (slope > 1) {
-					object.setBottom(tile_bottom);
-					object.velocity_y = 0;
-				} else if (slope < 1) {
-					object.setRight(tile_right);
-					object.velocity_x = 0;
-				}
+		collideSlopeLeft: function(object, tile_x, tile_y, tile_size) {
+			let base_y = tile_y + tile_size;
+			let slope = (object.x - tile_x) / tile_size;
+			let top_y = base_y - slope * tile_size;
+
+			if (object.getBottom() > top_y) {
+				object.setBottom(top_y - 0.01);
+				object.velocity_y = 0;
+				object.jumping = false;
+				return true;
 			}
+			return false;
 		},
-
-		collideSlopeRight:function(object, tile_x, tile_y, tile_size) {
-			var tile_bottom = tile_y + tile_size;
-			var tile_left   = tile_x;
-
-			var object_bottom = object.getBottom();
-			var object_left   = object.getLeft();
-
-			if (object_bottom > tile_y && object_left < tile_x) {
-				var slope = (tile_bottom - object.getTop()) / (object.getRight() - tile_left);
-				if (slope > 1) {
-					object.setBottom(tile_bottom);
-					object.velocity_y = 0;
-				} else if (slope < 1) {
-					object.setLeft(tile_left - object.width);
-					object.velocity_x = 0;
-				}
+		collideSlopeRight: function(object, tile_x, tile_y, tile_size) {
+			let slope = (tile_x + tile_size - object.getRight()) / tile_size;
+			let top_y = tile_y + slope * tile_size;
+
+			if (object.getBottom() > top_y) {
+				object.setBottom(top_y - 0.01);
+				object.velocity_y = 0;
+				object.jumping = false;
+				return true;
 			}
+			return false;
 		},
 	};
 
@@ -317,13 +305,13 @@ const Game = function() {
 		},
 
 		squat:function() {
-			if (!this.jumping) {
+			if (!this.jumping && !this.squatting) {
 				this.squatting = true;
 			}
 		},
 
 		attack:function() {
-			if (!this.jumping) {
+			if (!this.attacking) {
 				this.attacking = true;
 			}
 		},
@@ -341,6 +329,9 @@ const Game = function() {
 				} else if (this.squatting) {
 					this.changeFrameSet(this.frame_sets["sit-left"], "once", 10);
 					this.squatting = false;
+				} else if (this.attacking) {
+					this.changeFrameSet(this.frame_sets["attack-left"], "once", 5);
+					this.attacking = false;
 				} else {
 					this.changeFrameSet(this.frame_sets["idle-left"], "loop", 6);
 				}
@@ -350,6 +341,9 @@ const Game = function() {
 				} else if (this.squatting) {
 					this.changeFrameSet(this.frame_sets["sit-right"], "once", 10);
 					this.squatting = false;
+				} else if (this.attacking) {
+					this.changeFrameSet(this.frame_sets["attack-right"], "once", 5);
+					this.attacking = false;
 				} else {
 					this.changeFrameSet(this.frame_sets["idle-right"], "loop", 6);
 				}

diff --git a/js/game/lvl1/main-01.js b/js/game/lvl1/main-01.js
@@ -87,6 +87,8 @@ window.addEventListener("load", function(event) {
 			game.world.player.y + frame.offset_y, 
 			frame.width, frame.height
 		);
+
+		// display.drawCollisionMap(game.world.collision_map, game.world.columns, game.world.tile_set.tile_size);
 		display.render();
 
 	};