Added block collision and collision offset
This commit is contained in:
parent
d7eab96f8a
commit
5a2638a15d
@ -14,6 +14,10 @@ export class Block {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getAllBoxes() {
|
||||||
|
return this._boxes;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Box {
|
export class Box {
|
||||||
@ -27,4 +31,20 @@ export class Box {
|
|||||||
draw(ctx, x, y, tile){
|
draw(ctx, x, y, tile){
|
||||||
ctx.drawImage(tile, this._xBox, this._yBox, this._wBox, this._hBox, x + this._xBox, y + this._yBox, this._wBox, this._hBox);
|
ctx.drawImage(tile, this._xBox, this._yBox, this._wBox, this._hBox, x + this._xBox, y + this._yBox, this._wBox, this._hBox);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getXMin(){
|
||||||
|
return this._xBox;
|
||||||
|
}
|
||||||
|
|
||||||
|
getXMax() {
|
||||||
|
return this._xBox + this._wBox;
|
||||||
|
}
|
||||||
|
|
||||||
|
getYMin() {
|
||||||
|
return this._yBox;
|
||||||
|
}
|
||||||
|
|
||||||
|
getYMax() {
|
||||||
|
return this._yBox + this._hBox;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -4,4 +4,8 @@ export class Forest extends Block {
|
|||||||
constructor(boxes, tile){
|
constructor(boxes, tile){
|
||||||
super(boxes, tile);
|
super(boxes, tile);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getAllBoxes(){
|
||||||
|
return [];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -1,13 +1,17 @@
|
|||||||
import { Constants } from "../constants";
|
import { Constants } from "../constants";
|
||||||
|
import { Map } from "../Graphics/Map/map";
|
||||||
import { CollisionTypeEnum } from "./collisionType";
|
import { CollisionTypeEnum } from "./collisionType";
|
||||||
|
|
||||||
export class CollisionManager {
|
export class CollisionManager {
|
||||||
|
/**
|
||||||
|
* @type {Map}
|
||||||
|
*/
|
||||||
_map;
|
_map;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
}
|
}
|
||||||
|
|
||||||
attachMap(map){
|
attachMap(map) {
|
||||||
this._map = map;
|
this._map = map;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -41,8 +45,46 @@ export class CollisionManager {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_checkBlockCollision(xMin, xMax, yMin, yMax) {
|
_checkBlockCollision(xMin, xMax, yMin, yMax) {
|
||||||
|
const blocksToCheck = this._getAllElementsOfMapOn(xMin, xMax, yMin, yMax);
|
||||||
|
const tilesize = Constants.TILE_SIZE.getValue();
|
||||||
|
|
||||||
|
for (let i = 0; i < blocksToCheck.length; i++) {
|
||||||
|
let boxes = blocksToCheck[i]["block"].getAllBoxes();
|
||||||
|
let x = blocksToCheck[i]["xPos"];
|
||||||
|
let y = blocksToCheck[i]["yPos"];
|
||||||
|
|
||||||
|
for (let j = 0; j < boxes.length; j++) {
|
||||||
|
const box = boxes[j];
|
||||||
|
if (this.intersect(xMin, xMax, yMin, yMax, x * tilesize + box.getXMin(), x * tilesize + box.getXMax(),
|
||||||
|
y * tilesize + box.getYMin(), y * tilesize + box.getYMax())) return CollisionTypeEnum.Block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_getAllElementsOfMapOn(xMin, xMax, yMin, yMax) {
|
||||||
|
const tilesize = Constants.TILE_SIZE.getValue();
|
||||||
|
let elements = [];
|
||||||
|
|
||||||
|
for (let x = 0; x < this._map.width; x++) {
|
||||||
|
for (let y = 0; y < this._map.height; y++) {
|
||||||
|
if (this.intersect(xMin, xMax, yMin, yMax, x * tilesize, (x + 1) * tilesize, y * tilesize, (y + 1) * tilesize))
|
||||||
|
elements.push({
|
||||||
|
"block": this._map.getElement(x, y),
|
||||||
|
"xPos": x,
|
||||||
|
"yPos": y
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return elements;
|
||||||
|
}
|
||||||
|
|
||||||
|
intersect(xMin, xMax, yMin, yMax, anXMin, anXMax, anYMin, anYMax) {
|
||||||
|
return (xMin <= anXMax && xMax >= anXMin) &&
|
||||||
|
(yMin <= anYMax && yMax >= anYMin);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -6,7 +6,6 @@ export class Map {
|
|||||||
this._enemies = [];
|
this._enemies = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
pushElement(element) {
|
pushElement(element) {
|
||||||
this._map.push(element);
|
this._map.push(element);
|
||||||
}
|
}
|
||||||
@ -14,4 +13,5 @@ export class Map {
|
|||||||
getElement(x, y){
|
getElement(x, y){
|
||||||
return this._map[x + y*this.width];
|
return this._map[x + y*this.width];
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -24,6 +24,6 @@ export class TankKeyAdapter extends GameKeyAdapterInterface {
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(event.key);
|
//console.log(event.key);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -12,27 +12,34 @@ export class PlayerTank {
|
|||||||
}
|
}
|
||||||
|
|
||||||
move(direction) {
|
move(direction) {
|
||||||
const tilesize = Constants.TILE_SIZE.getValue();
|
const tanksize = Constants.TANK_SIZE.getValue();
|
||||||
|
const collisionOffset = Constants.TANK_COLL_OFFSET.getValue() * tanksize;
|
||||||
|
|
||||||
this.direction = direction;
|
this.direction = direction;
|
||||||
|
|
||||||
|
const collisionMinX = this.x + collisionOffset;
|
||||||
|
const collisionMaxX = this.x + tanksize - collisionOffset;
|
||||||
|
const collisionMinY = this.y + collisionOffset;
|
||||||
|
const collisionMaxY = this.y + tanksize - collisionOffset;
|
||||||
|
|
||||||
switch (direction) {
|
switch (direction) {
|
||||||
case DirectionEnum.Up:
|
case DirectionEnum.Up:
|
||||||
if (!this.collisionManager.checkCollisionForTank(this.x, this.x + tilesize, this.y - this.speed, this.y + tilesize - this.speed))
|
if (!this.collisionManager.checkCollisionForTank(collisionMinX, collisionMaxX, collisionMinY - this.speed, collisionMaxY - this.speed))
|
||||||
this.y -= this.speed;
|
this.y -= this.speed;
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case DirectionEnum.Left:
|
case DirectionEnum.Left:
|
||||||
if (!this.collisionManager.checkCollisionForTank(this.x - this.speed, this.x + tilesize - this.speed, this.y, this.y + tilesize))
|
if (!this.collisionManager.checkCollisionForTank(collisionMinX - this.speed, collisionMaxX - this.speed, collisionMinY, collisionMaxY))
|
||||||
this.x -= this.speed;
|
this.x -= this.speed;
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case DirectionEnum.Right:
|
case DirectionEnum.Right:
|
||||||
if (!this.collisionManager.checkCollisionForTank(this.x + this.speed, this.x + tilesize + this.speed, this.y, this.y + tilesize))
|
if (!this.collisionManager.checkCollisionForTank(collisionMinX + this.speed, collisionMaxX + this.speed, collisionMinY, collisionMaxY))
|
||||||
this.x += this.speed;
|
this.x += this.speed;
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case DirectionEnum.Down:
|
case DirectionEnum.Down:
|
||||||
if (!this.collisionManager.checkCollisionForTank(this.x, this.x + tilesize, this.y + this.speed, this.y + tilesize + this.speed))
|
if (!this.collisionManager.checkCollisionForTank(collisionMinX, collisionMaxX, collisionMinY + this.speed, collisionMaxY + this.speed))
|
||||||
this.y += this.speed;
|
this.y += this.speed;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
export class Constants {
|
export class Constants {
|
||||||
static TILE_SIZE = new Constants(32);
|
static TILE_SIZE = new Constants(32);
|
||||||
static TANK_SIZE = new Constants(28);
|
static TANK_SIZE = new Constants(24);
|
||||||
|
static TANK_COLL_OFFSET = new Constants(0.125);
|
||||||
|
|
||||||
constructor(value){
|
constructor(value){
|
||||||
this._value = value;
|
this._value = value;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user