Defend the Base [contest]

⛾ ⛹

Dont want to read theory, just let me see the simulation directly

I wish to see how you approached this challenge

Step 1: Mind Makeup

when facing tough problems like this, then

I Face my fears headon so that next time it wont bully me.
Cant say its hard without trying.
Any problem can be solved, might take long (week, month, year) sometimes.
I read problem statements multiple times to understand and feel comfortable.
Doubts arise when I imagine various scenarios related to problem statement in my mind
If something not clear best to discuss and clarify, thanks to friends few doubts were already cleared in comments and many helpful discussions, so I read all the comments attentively.

Step 2: Planning

Best to set up some deadline and milestones. I started on this problem on 6 July, and sololearns deadline for submission was on 10 July, its a good deadline so I wont invest more than 4 days and by looking at problem, I think I ll take

one day to make an independent and modular visualization code with HTML canvas
One day to make the Object Oriented Class taxonomy (using the new class syntax, (that I havent used yet) to denote flying objects i.e friend, enemy and missile. Also to decide on related properties and method logics to perform flying, hitting, etc.
Complex problems like this needs clean coding, easy to use UI and a good documentation for others and your future-self, so one day here.
Last day dedicated to Simulation and figure out the logic to maximise largest no. of enemy objects destroyed with some sort of flight strategy for missiles and also will need to do as many tests as possible with weird cases before making public.

NOTE: These 4 tasks will proceed at any order over the 4 days period and I will do a bit of all in single day as well but the plan is not to allocate more than one day for a single task.

Step 3: Problem breakdown

Understand and break the problem satement in following terms

Input

boardSize (integer): the number of rows/columns which forms the grid representation of sky in small cells
missileCount (integer): the limited number of missiles

Output

There will be these 2 outputs for each missile

launchPosition (integer): a value between 0 to boardSize-1 denoting the postion from where missile fired in last row.
launchPattern (string): a long string consisting of "LRUD" characters denoting the complete path taken by missile from launch position till its hit.

Objective

To maximise the number of enemy planes destroyed

Theme of the challenge

while working on a NxN grid , find where 2 objects meet while avoiding a third object, when all 3 have a movement pattern and speed associated with them, and the thing we can control is the inital position of missile object.

Step 4: Assumptions

I collect whatever details I can to clear my initial doubts, but while coding there are always new doubts and missing details, so I try to fill up the missing details by thinking about the real life scenario with that problem and make a lot of assumptions myself hoping that it would work out, often times it wont work out, so I will make changes wherever needed. Thats why keeping modular codebase and tools like Git comes very handy.

Few of my assumptions here

Can all missiles be launched at once, whats the minimum gap between consecutive launches?
So I guess since in a real life scenario it will depend when an enemy enters our zone, so I will fire missiles depending upon the entry of enemy in the grid so there can be simultaneous fires as well if multiple enemies came together.
I had to make many assumptions for better visualization during simulation and a lot of those assumptions relied on board size
−I wont exceed enemy count more than twice the number of missiles.
−Friend count will be very less or for better visulaization, as they have to be on grid to be functional.
−To still prevent crowding I wont release more than 5 objects at a time, friends and enemies both included.
−Size of objects wont exceed quarter of the grid size.
−If speed of objects is high in small grids then visualization would be bad so I decided to use the 1:4 ratio for speed and board size
−Missile power would also vary from 1 to max object size, which can be quarter of the board size.
I think the solution required here is not based on Neural Networks as solution needs to respond to unforseen variables that cannot be used for training.Therefore in order to set some sort of flight strategy for missiles for succesful hit and avoid friendly fire, missile must know the flight pattern and speed of both enemy and friend objects in advance
Enemy will be hit when it appears completely on the grid, if part of its body is outside grid and its still entering then it wont be hit.
Since missile will know the trajectory for all the 3 parties in advance therefore assuming ideal conditions there will always be a successful hit when fired, or else missile wont fire and keep waiting for opportunity.
Missile wont fire when an enemy is overlapping with friend
Damaged cells of planes both enemy and friend(if it got hit) will be colored gray, sp that we can have better visulaization of missile attacks
Each Object missile, friend and enemy will show its id in its first cell
The movement pattern for missiles cannot contain D or else random generation of their pattern will contain missiles that cant go up
If an enemy or friend object crossed grid without getting hit then it will spawn from opposite side again

Step 5: Object-oriented Methodology

OOP was so beautiful when I first saw it work, and by "saw it work I mean" that I never really understood the charm in OOP by reading books and doing example codes but only when I solved same problem with and without Object oriented programming.

In case you are in love with OOP yourself then you dont wanna miss this book Applying UML and patterns, By Craig Larman

One golden rule that I learned is not to overdo OOP and use only where it is needed so I mix OOP and functional paradigm a lot, therefore the visualization module and simulation module in my code follows pure functional approach.

Players

Players help us to decide classes in OOP so that we can reuse related functionalities by extending classes and save myself from ton of redundant codes (less codes mean less bugs to find), seems to me like we will have 3 players for our Object oriented code

Missile(object): the red colored object which occupies single cell, its properties and methods are:-
PROPERTIES
−id (string): a 2 character string that ll show up in grid like M1, M2 .. and so on
−type (string): will have value missile
−start (object): an object denoting x-y coordinates as current positon on the grid
−power (integer): how many cells can missile destroy when it hits target
−speed (integer): speed in cells/second i.e. how many cells it moves in 1 second along its pattern
−pattern (string): a random string composed of only 4 letters "RLUD" denoting movement pattern along the grid
−isAlive (boolean): says whether missile active or already used
−firePosition (integer): a number from 0 to boardSize - 1, saves the value from where missile fired
−firePattern (string): a string with "RLUD" characters denoting the complete path of missile
METHODS
−fly(): it makes the object move based on its speed and pattern for the next second
−moveTo(x1, y1): it makes the object move to the provided position
Friend(object): the green colored object in grid whose job is to make life tougher by coming between my target.

PROPERTIES

type

start

end

size

currentSize

speed

pattern

METHODS

fly()

moveTo(x1, y1)

Enemy(object): the blue colored rectangle on the grid that must be hit intelligently by missiles.

PROPERTIES

type

start

end

size

currentSize

speed

pattern

METHODS

fly()

moveTo(x1, y1)

Do you see all that repeated properties and methods hence we use OOP classes to keep it ordered and categorized

class FlyingType{
  // Properties
  start, end, speed, pattern

  // Methods
  fly()
  moveTo()
}

class Missile extends FlyingType{
  // extra Properties
  id, type, power, isAlive, firePosition, firePattern

  // Methods
  hit()
}

class Plane extends FlyingType{
  // extra Properties
  size, currentSize

  // Methods
}

class Friend extends Plane{
  // extra Properties
  id, type,

  // Methods
}

class Enemy extends Plane{
  // extra Properties
  id, type,

  // Methods
}

Now with such beautiful class structure we can conveniently create objects in our simulation code and play with it.

var m1 = new Missile()
var f1 = new Friend()
var e1 = new Enemy()

NOTE: JS is not pure OOP and has many flaws but I ll take what I have

Step 6: Implementation (Coding)

Since coding was divided into 4 phases, thus I ll discuss on them accordingly

Visualization:-
Since I used 2d canvasAPI to do it so it was quite easy for me, but the 2 main challenge were
−To make it work for all screen sizes without distorting or breaking and provide flexibility in customizations, hence the first Radar.init() method. This Radar module can handle pretty large grid sizes.
−To make it logic agnostic, and independent so that it can be used by anyone, Hence I thought it would be best to design a function that would take all the flying objects as an array argument, thus I separated all the logic from the visualization code using Radar.draw() method.
I have this sololearn code that goes indepth regarding usage of this Visualization code for your logic, Here's the complete code for it
GUI:-
I try not to use libraries when doing practice codes it helps me to be a better programmer, thus after months of responsive designing with pure CSS and various Web APIs I can easily handle client side stuffs, so this GUI was cakewalk but painful thing was writing all this html documentation.
Writing, reading and correcting documentation is really boring but very important when working with other people therefore I try to learn ways to write docs that are easy to write and understand. Github taught me how to write docs and code in a team. I am still learning though.
Class structure:-
I used the new ES6 class syntax to write the class structure, before I used to do the same with function declarations and prototype property. I found the new syntax very helpful and I think I ll always use it in future.
Class structure is already discussed in the previous section so here's the code for it. Writing these classes was the most fun I had during the whole project.
Simulation:-
It was not easy because of many reasons but the major reason was to decide between How much to randomize and how much to control?
The flow for my simulation is like this
−Create a grid of provided grid size
−Generate all the 3 players using our OOP class without worrying about initial placement using Simulation.start()
−Apply my assumptions on the objects and sort them accordingly
−Now Position them on the grid in a controlled manner, meeting our visualization criterias
−Now Missiles will behave depending on the enemy position on the grid so every loop will start with a grid scan.
−Missile flight function will be checked and if Missiles and enemy meet at any grid passing all the conditions then missile will be fired
−To help see it all the object array will be passed to Radar.draw() method every second and it ll draw the current status of grid every second.

The real challenge was to find the spots where both enemy and missile would meet based on missile trajectory while avoiding the friend , heres some breakdown on the process for that

Heres the complete simulation module that is tightly coupled with all the above 3 modules, sorry for dirty code in this one, coz I didnt had much time in the end.

Step 7: Testing and Tools

This project was not big and nicely modularized so I didnt wrote much test codes for it but just console.log() was enough. Another reason is this code is client side code so Chrome devtools are a petty much full package when it comes to testing, debugging and experimentation for client side stuffs.

But heres the description of how I proceeded when doing this project

New folder inside sololearn folder defend_the_base
Initialized a git repository to save commits on every break
I am a heavily armed civillian with keyboard shortcuts. And I code with my love atom editor and have tons of plugins that does wonders when I write my code here.
In parallel there is chrome tab opened with html page displayed on one left-half and right-half taken by chrome dev tools always.
In parallel there is also a bash terminal running where I run node to test for JS stuffs evry now and then while coding.
I test for responsive design by opening the page on mobile, tablet and pc view through chrome devtools, its not perfect but does the job I dont have any complains.
JS console on devtool is pretty powerful and helps a lot in debugging right there on the console itself same goes for its Inspect page tool, so I easily got away with console.log() for this code.

Randomize everything and take default values before starting simulation

Controlled Simulation

Set Control Parameters

Missile Count:

Enemy Count:

Friend Count:

Customise Radar Grid

Board Size:

Background Color:

Text Color:

Grid Color:

Tip: Use custom width and height when working with large board size value

Grid Width:

Grid Height:

Output

Output will be shown here per missiles

Realtime Data

All the players i.e. Missiles, Friends and Enemies will be shown here in their raw format but realtime during the simulation, so that results can be verified and confirm simulation is going in predicted ways. I slowed simulation time from 1 sec to 30 sec to cross verify every next step from here.

Dont want to read theory, just let me see the simulation directly

I wish to see how you approached this challenge

Input

Output

Objective

Theme of the challenge

Few of my assumptions here

Players

Do you see all that repeated properties and methods hence we use OOP classes to keep it ordered and categorized

Visualization:-

GUI:-

Class structure:-

Simulation:-

The real challenge was to find the spots where both enemy and missile would meet based on missile trajectory while avoiding the friend , heres some breakdown on the process for that

Randomize everything and take default values before starting simulation

Controlled Simulation

Defend the base [CONTEST]