How to build a game like Battleship?

I intend to create a game like battleship, but only for one player. Draws first and then distribute the ships across the board. Then the player must click on one of the points of intersection between the coordinates (X = 1-10 - Y = 1-10). From there is mounted an equation using the coordinates and if have a ship or part of it in that area, he will have to answer the equation in order to hit it. I need to know what the best way to build this game? How should I program the board and the distribution of ships (array? Do not understand anything). I want only some tips. Could anyone help me with this?

I don't think you have to make it very complicated really. And maybe twist the normal battleship a bit to make it more interesting.

This is just an idea to how you could do it.

1. Make a range of ships as sprites that you want in the game. Different sizes etc.

2. Give each of them some hit points. Big ships more and small ones less.

Two ways

3a. Randomly place the ships on the map during the start of the game. If they overlap you move one of them to a new location.

3b. Give the ships some path finding and let them sail around randomly at a slow phase. Or maybe just a car behaviour, whatever way to want.

3. Make a Crosshair that the player can use to aim with.

4. The player then click the map and if there is an overlap between the crosshair and a ship, you can activate the Equation thing. And if its correct you subtract 1 from health.

To spice it up, you could add a cannon in the bottom of the screen or something that shoots at the crosshair when the player clicks, and if its a miss you make a water splash and if its a hit you can make an explosion.

Think that would be the easiest way to do it.

---------

If you want to copy the normal Battleship.

I would make grid with fix intervals, for instant 32 pixels.

Then you randomly place the ships with that factor. So all ships would be placed at 32,64,96,128 etc in both X and Y direction.

Then you make a crosshair that snap to these intervals as you move the mouse around.

You can rotate the ships by multiplying the first part of the ship position with a integer.

So if you have a ship that is 2 spaces long and you want it to be horizontal, you just take the first part of the ship X-position and set the second part to X = ShipFirstPart.X * 2 Y = ShipFirstPart.Y etc.

You don't need to use arrays if you just keep to a fixed factor such as 32. As you know that the first space in the top left corner would be 0,0.

So to show the grid in numbers it would look something like this:

(0,0) (32,0) (64,0)

(0,32)(32,32)(64,32)

(0,64)(32,64)(64,64)

Hope it make sense :D

Thanks nimos100

Thank you for giving me suggestions. I have imagined something like this. The problem is that I do not know how to spread the ships across the board. The rest, I think I can implement alone. Could you give me an example? Thanks again.

I have to go to work now, so Ill do it later :)

Which one do you need an example for?`

No problem.

I need to know how to distribute the ships across the board, randomly, in the vertical and horizontal axes, so that they are not close together.

I've one more question: The board will be divided into 100 squares (10x * 10y), if one ship can occupy more than one square, how to know which part of it was shot in the game?

Could you not cut each ship into tiles and using image points placed at the top/bottom of each tile join them together, ie. "every tick" or "on layout start" use 'move to another object' to place them in the right order?

It might also help in the board positioning. You could place each ships initial part to a random x,y location at a random angle of 0/90/180/270 degrees, join the rest of the parts up and check for overlaps (or outside of layer) in which case reposition it.

Doing it in tiles would also make it easy to know which part got bombed/shot.

Just throwing ideas out :)

No problem.

I need to know how to distribute the ships across the board, randomly, in the vertical and horizontal axes, so that they are not close together.

I've one more question: The board will be divided into 100 squares (10x * 10y), if one ship can occupy more than one square, how to know which part of it was shot in the game?

Start

You make some sprites for each part of the ships, depending on how big you want them. Each part is 32x32 pixels.

For each of them you set the Origin in the sprite editor to 0,0.

That is important as it will make it a little bit easier to randomly place, and it will also make it easier when you have to decide which part was hit.

Secondly you need a sprite that are the crosshair that the player use to bomb ships with. Make this 16x16 and leave the Origin in the middle.(the Standard)

To randomly distribute them.

Lets imagine that we have a ship that occupies 3 spaces.

It could be done like this I think.

1. Place first pieces at a random space.

Ship_part_1 = int(random(0,9))*32 (You can do that for both the X and Y axis)

2. Check if there is already an Ship_part in the space.

a. If that's the case, Go to 1 and do another random roll.

b. If its not the case go to Ship_part_2

3. Place Ship_part_2

Depending on direction, again you can do that by a random roll.

Ship_part_2 = Ship_part_1.x + 32, Ship_part_1.y (Which would try to place it to the right of Ship_part_1)

4. Check if Ship_part_2 is overlapping another ship.

a. if that's the case, go to 3 and try to place it another place.

b. if not then go to Ship_part_3.

5. Place ship_part_3

a. Check if ship_part_1 and ship_part_2 have the same Y-value, that would mean that they are on a horizontal line.

b. Check if ship_part_1.x is less that ship_part_2.x, if that the case it means that its sailing from Right -> Left. <--

You would need more checks, these are just examples, but depending on these checks you know where to place the last part of the ship, as it can only be placed in one spot, when all checks have been made.

c. Final you have to test if ship_part_3 is overlapping another ship.

If that's the case, you can either remove the last ship part, and then just make it a 2 part ship, or you can destroy the whole ship, and try to place it again from step 1.

How to know which part is shot

Since you made a sprite that will be used to decide which space to bomb, and made it half the size of the ship parts, and the origin is in the middle it will automatically snap to the center of the ship parts. If you add a snap function that force it to move 32 pixel in a direction when you move it, it will always only overlap one ship part at the time, so you simply check what part is overlapping.

To make the snap functionality you just dividing and multiplying each mouse coordinates, and use proper rounding.

flibble: Thanks for the suggestions. I'll try to follow.

nimos100: Thank you so much for the explanations. I'm implementing now and I have some initial doubts:

• I decided to use the size of 40px because 32 is very small in the cell. How can I create a space of 40 pixels around the entire area of ??the game (10x10 squares) to avoid the ship doesn't get along the margin.

• I need to create a space around each ship also.

In the tests that I did initially, the first part of the ship always appears on the X axis. How can I do for the ships appear in different orientations?

- I decided to use the size of 40px because 32 is very small in the cell. How can I create a space of 40 pixels around the entire area of ??the game (10x10 squares) to avoid the ship doesn't get along the margin.

- I need to create a space around each ship also.

In the tests that I did initially, the first part of the ship always appears on the X axis. How can I do for the ships appear in different orientations?

Not sure if you have done it already or not, but turning on grid while in the editor will help you get an overview. Just make it the same size as you ratio. So in your case 40 by 40. And its a good idea to turn on grid snapping as well, so you can visually test things. As I think what you want to do, requires that you can to some degree imagine how it works, before you start programming, otherwise you will loose control quite fast I think.

So no matter what ratio you are working with, just to keep it simple, you have to multiply the ratio with the amount of spaces you want in each direction, otherwise things could start to get messy.

To explain it a bit more clear:

If you want to use 40x40 sprites with 10 spaces in each direction, your layout should be 10 x 40 pixels. (only if the origin is at 0,0)

So layout width and height should be 400 pixels.

This is because when you have to move things around, like the crosshair or place ships, you know that you can always multiply 40 with an integer to place things correctly in the grid.

To make it even easier you move the origin of the sprites so instead of it being 20,20 as standard for a 40x40 sprite, you move it to 0,0. Again then you can multiply with an integer to get the correct position.

To explain that, imagine you have a grid like this.

(0,0)(1.0)(2,0)

(0,1)(1,1)(2,1)

(0,2)(1,2)(2,2)

The values in this grid will then be the factor you have to multiply with when placing things. So imagine that we want to place a sprite at the (2,2) position. You simply multiply 40 by 2 for both X and Y, which would place it at (80.80) if it was pixels.

If you have the origin in the middle of the sprite, i think it starts to get a bit more complicated. Because then you have to make the layout 40 pixel larger. There is nothing wrong in doing it, it just add confusion I think.

To explain it.

If you have two 40x40 sprites. 1 with Origin 0,0 and the other with origin 20x20 as standard.

And you want to work with spaces that are 40x40 as well.

Then if you place each sprite at position (0,0) in the grid i made above.

The actual position of each sprite would be:

Sprite_1 with 0,0 origin = 0,0 pixel

Sprite_2 with 20,20 origin = 20,20 pixel (Assuming that you want the sprite to be on the layout, you can put it at 0,0 but then it would go outside the layout.)

So if you want to place them at the last space in X axis for instant, you would have to multiply with 10 to get that position.

So it would be like this:

Sprite_1 position = 400,0

Sprite_2 position = 420,20 (which would throw it outside the layout again if the layout you use is 400,400px. The actual 10 position when the origin is in the centre should be 380,20px)

Therefore you need to make the layout 40 pixel larger if you don't have the origin in 0,0. And then you suddenly have to work with 20s as well. And as i said there is nothing wrong in doing it, it just add confusion i think.

The easiest way to see this for you self is to turn on "show grid" and "snap to grid" and set width and height to 40. And then place a 40x40 sprite which have the origin in the centre in the top left space in the grid and see how it behaves when you move it around.

Regarding the space around the ships

Then it really starts to get complicated. Because then you have to add that to all the calculations.

In the tests that I did initially, the first part of the ship always appears on the X axis. How can I do for the ships appear in different orientations?

You can use the grid i showed above. since it will go from 0-9 in each direction you just have to see how much you have to add or subtract from the sprite position to place it.

If this is a Ship with two parts:

(0,0)(1.0)(2,0)

(0,1)(X1)(2,1)

(0,2)(X2)(2,2)

X(1) = 1 part Position in grid (1,1)

X(2) = 2 part Position in grid (1,2)

X(1): Actual position would be (40*1,40*1) = 40,40 pixel.

X(2): Actual position (40*1,40*2) = 40,80 pixel.

Personally this way of doing it, is a lot harder than the first suggestion i posted, because you have a lot more rules to look out for :D

However you might be able to do some tricky things if you pin the ships together instead and then just move 1 part around....but that's just a thought.

- I decided to use the size of 40px because 32 is very small in the cell. How can I create a space of 40 pixels around the entire area of ??the game (10x10 squares) to avoid the ship doesn't get along the margin.

Sorry I forgot to answer you actual question I think :)

If you want to have 40 px all around the grid and still keep the origin in the centre you have to make the layout size (480x480)px so its actually 12x12 spaces.

You first grid position then have to be (60,60)px. but then again I would simply just move the origin in the sprite editor if I were you, that would remove all this automatically.

nimos100

Thank you for all these explanations. Were very detailed , though some points were a bit confusing for me (I'm starting to program ) .

I had already changed the origin of the sprites to 0.0, as indicated in the previous post and I intend to keep it there.

My idea is to make a panel with buttons and a display to show the equation and, on the left side, display area of the game ( whith ships in hidden) . This area should be slightly smaller than the height of the panel , so I talked about creating a space around the area of ??the game . I still do not understand how I can do to determine the position of the playing area .

I also do not understand how to create random orientation to the ship (X / Y or left / right).

To prevent the ship stayed along the margin , I am using ( int ( random ( 0,9 ) ) * 40 +40 ) for the first part of it . This solves the problem or not ? The tests done so far with the first part of the ship, worked very well.

Another possibility to distribute the ships : if I create the sprites in the overall size of the ship ( eg 40px / 120 px) and then control it through overlapp event to know which object it is overlapping and how many pieces are still missing from this object through the local variables? This would be more complicated to do?

nimos100

I created a CAPX in accordance with your instructions

dropbox.com/s/6ef019rjkvj6ptp/test.capx

Currently ships are overlapping in some times and the ship in vertical axis leaves at times of the playing area (sea sprite). I included a loop (repeat) to verify the overlap, but even so the boats are overlapping from time to time.

"I still do not understand how I can do to determine the position of the playing area ."

Well basically you decide that for yourself, and can place it where ever you want as long as the math you use to place the ships are correct. Its up to you to decide it, I just used 0,0 as a starting point because its easier to explain then.

But whether you add 40*1 to 0,0 or to 280,280 doesn't make any difference. The ratio of 40 is the same no matter what, because that's what you decided before hand.

And as long as you go from 0-9 (10 spaces).

But if you start at 0,0 you gaming area will be from 0-400 pixels. And if you started at 280,280 it will go from 280-680 pixels.

So if o are the playing area. And you want it to start at 0,0 your screen would look something like that.

oooooo------

oooooo------

oooooo------

oooooo------

------------

------------

------------

If you wanted it to start at 280,280, it would look something like this.

------------

---oooooo---

---oooooo---

---oooooo---

---oooooo---

------------

------------

(This is no where accurate :D)

But the factor are the same, no matter what starting point you choose.

for 0,0

(400 - 0) / 10 = 40px

for 280,280

(680 - 280) / 10 = 40px

I also do not understand how to create random orientation to the ship (X / Y or left / right).

Another possibility to distribute the ships : if I create the sprites in the overall size of the ship ( eg 40px / 120 px) and then control it through overlapp event to know which object it is overlapping and how many pieces are still missing from this object through the local variables? This would be more complicated to do? And if I separate the parts of the ship, but use a container to place it in the game and then go checking and destroying the parts separately? Which do you think would be the best (easy, quick, codeless) solution?

Dropping the grid all together is the easiest I think.

////// OK THIS ISNT CORRECTLY DESCRIBED //////////////

If you make the ships as separate objects, and in design mode you align them as you would like them to be in the game and add a pin behaviour to them, and then in "Start of layout" you pin all the ships correctly. And then you make a container for each ship that you need.

Then you just create one part of the ship, place it at a random point and give it a random angle, and if set up correctly the rest of the ship will appear as it should. And then you can just use overlapping on each part to see if they are hit. That I would think is the easiest way to do it.   

//////////////////////////////////////////////////////

Should have tested it first :D

I have modified your CAPX.

This is how you could do it.

Just press Q to spawn a ship.

Battleship test

To explain it:

I have added 2 image points to the middle part of the ship. One is called "Front" and other "End".

You can use these to place the rest of the parts correctly. Then you just pin these part to the middle part.

nimos100

I think with the PIN behavior is more practical, but I don't understand why you changed the point of origin. Now the sprite appears on the line rather than within the squares. It's necessary because you are using PIN?

Two other important issues that it's very difficult for me: the problem of overlap and the fact that the ship is out of the playing area (sea sprite).

I tried to create a loop with Repeat event and not work 100%. Sometimes the ship appears overlapping other.

I also need to restrict the area to ensure that ships always appear on the sea sprite. Do you know how can I solve this?