# How to build a game like Battleship?

Get help using Construct 2

### » Wed Nov 06, 2013 4:49 pm

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?RenatoB2013-11-12 18:58:12
B
74
S
14
G
4
Posts: 1,045
Reputation: 8,193

### » Thu Nov 07, 2013 9:57 am

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

nimos1002013-11-07 09:59:58
B
45
S
12
G
3
Posts: 1,209
Reputation: 7,537

### » Thu Nov 07, 2013 11:09 am

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.
B
74
S
14
G
4
Posts: 1,045
Reputation: 8,193

### » Thu Nov 07, 2013 11:19 am

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

Which one do you need an example for?`
B
45
S
12
G
3
Posts: 1,209
Reputation: 7,537

### » Thu Nov 07, 2013 11:31 am

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?
B
74
S
14
G
4
Posts: 1,045
Reputation: 8,193

### » Thu Nov 07, 2013 12:38 pm

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 :)
flibble2013-11-07 12:41:18
B
6
S
2
Posts: 23
Reputation: 712

### » Thu Nov 07, 2013 8:26 pm

[QUOTE=RenatoB] 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?[/QUOTE]

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. nimos1002013-11-07 20:33:32
B
45
S
12
G
3
Posts: 1,209
Reputation: 7,537

### » Fri Nov 08, 2013 12:43 am

@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?
B
74
S
14
G
4
Posts: 1,045
Reputation: 8,193

### » Fri Nov 08, 2013 1:47 am

[QUOTE=RenatoB]
- 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?[/QUOTE]

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.

nimos1002013-11-08 11:01:57
B
45
S
12
G
3
Posts: 1,209
Reputation: 7,537

### » Fri Nov 08, 2013 10:50 am

[QUOTE=RenatoB]
- 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.
[/QUOTE]

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. nimos1002013-11-08 10:51:37
B
45
S
12
G
3
Posts: 1,209
Reputation: 7,537

Next