Battle City (Tanks 1990) remake

Hello!

I wanted to make something fun so I came up with an idea of recreating a popular game from 80’s in vanilla JavaScript (almost :smiley: ).
My aim was to use modules, Webpack and I already see how useful it is. To make a map I created a tiny app called EasyMapGenerator which is an independent app. In it a user can click on every square on the map plan- it creates a single brick. If a map is done a user can write a name of file and click save- it will dowland a JSON file with a map plan (and here I used p5js library and that’s the reason why it is almost in vanilla JS). The file needs to be pasted in src directory to the maps folder. In a file map.js user must change the url if the name of new file is other than map.json.

This is just a basic game mechanism for example enemies behaviour is goofy, some collisions require improvements and there’s no points and targets except for enemies, so I don’t expect You to be delighted by this game. Making different changes to a project when it is not completely done is easier so I’m posting this post now, when the game has just basic functions. I just want You all to take a look on it, suggest some improvements and tell what features may be useful in this game because I’d like to develop it further in spare time :smiley: .

Here are links to live demo and github


https://battle-city-tanks-1990-remake-06fd.hostman.site/

Cheers guys !

Hi @KopfSzmercen,

Great project :slight_smile: .

… some collisions require improvements

In my game (not finished) the collision detection is like this:


/*
 * 0     = free cell 
 * 1     = wall 
 * "M"   = monster
 */
var scene = [
 [1, 1,  1, 1, 1, 1,  1, 1,   1, 1]
 [1,"M", 0, 0, 0, 0,  0, 0,   0, 1]
 [1, 0,  0, 0, 0, 0,  0, "M", 0, 1]
 [1, 0,  0, 0, 0, "M",0, 0,   0, 1]
 [1, 0,  0, 0, 0, 0,  0, "M", 0, 1]
 [1, 1,  1, 1, 1, 1,  1, 1,   1, 1]
];


function collisionDetection(extendedState, event) {

  let nextMove = extendedState.nextMove;
  let x = nextMove.x;
  let y = nextMove.y;

  if (scene[y][x] === 0) {
    return "WALK";
  } else if (scene[y][x] === 1) {
    return "WALL";
  } else if (typeof scene[y][x] === "string") {
    return "MONSTER";
  }
}

That way I should only need to check the “type” of the array element to check for collisions (just an idea) .

Cheers and happy coding :slight_smile:

1 Like