Hello,
I am Maaike from the Netherlands, so I will try to write english as good as possible.
For school I have to make the game Battleship in PHP. Actually I’m not good in PHP.
What I’ve already done is that the player can register, login and finally comes in to a waiting area where the player can choose with who he wants to play. The player is then redirected to the page where he can place the ships.
That looks like this:
[php]
<?php include_once "connect.php"; if($_SERVER['REQUEST_METHOD'] == 'POST') { // normaal ga je de posities van de schepen opslaan in de database echo '' . print_r($_POST, TRUE) . ''; echo 'Opnieuw'; exit; } ?> Mijn titel
<canvas id="myCanvas" width="420" height="420" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<form method="post" action>
<div>
<label>Schip 1 (2 hokjes)</label>
<select class="schepen" name="schip[1][col]">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<select class="schepen" name="schip[1][row]">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
<option>I</option>
<option>J</option>
</select>
<select class="schepen" name="schip[1][dir]">
<option>Horizontaal</option>
<option>Verticaal</option>
</select>
</div>
<div>
<label>Schip 2 (2 hokjes)</label>
<select class="schepen" name="schip[2][col]">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<select class="schepen" name="schip[2][row]">
<option>A</option>
<option selected>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
<option>I</option>
<option>J</option>
</select>
<select class="schepen" name="schip[2][dir]">
<option>Horizontaal</option>
<option>Verticaal</option>
</select>
</div>
<div>
<label>Schip 3 (2 hokjes)</label>
<select class="schepen" name="schip[3][col]">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<select class="schepen" name="schip[3][row]">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
<option>I</option>
<option>J</option>
</select>
<select class="schepen" name="schip[3][dir]">
<option>Horizontaal</option>
<option>Verticaal</option>
</select>
</div>
<div>
<label>Schip 4 (3 hokjes)</label>
<select class="schepen" name="schip[4][col]">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<select class="schepen" name="schip[4][row]">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
<option>I</option>
<option>J</option>
</select>
<select class="schepen" name="schip[4][dir]">
<option>Horizontaal</option>
<option>Verticaal</option>
</select>
</div>
<div>
<label>Schip 5 (3 hokjes)</label>
<select class="schepen" name="schip[5][col]">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<select class="schepen" name="schip[5][row]">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
<option>I</option>
<option>J</option>
</select>
<select class="schepen" name="schip[5][dir]">
<option>Horizontaal</option>
<option>Verticaal</option>
</select>
</div>
<div>
<label>Schip 6 (3 hokjes)</label>
<select class="schepen" name="schip[6][col]">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<select class="schepen" name="schip[6][row]">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
<option>I</option>
<option>J</option>
</select>
<select class="schepen" name="schip[6][dir]">
<option>Horizontaal</option>
<option>Verticaal</option>
</select>
</div>
<div>
<label>Schip 7 (4 hokjes)</label>
<select class="schepen" name="schip[7][col]">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<select class="schepen" name="schip[7][row]">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
<option>I</option>
<option>J</option>
</select>
<select class="schepen" name="schip[7][dir]">
<option>Horizontaal</option>
<option>Verticaal</option>
</select>
</div>
<div>
<label>Schip 8 (4 hokjes)</label>
<select class="schepen" name="schip[8][col]">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<select class="schepen" name="schip[8][row]">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
<option>I</option>
<option>J</option>
</select>
<select class="schepen" name="schip[8][dir]">
<option>Horizontaal</option>
<option>Verticaal</option>
</select>
</div>
<div>
<label>Schip 9 (5 hokjes)</label>
<select class="schepen" name="schip[9][col]">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<select class="schepen" name="schip[9][row]">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
<option>I</option>
<option>J</option>
</select>
<select class="schepen" name="schip[9][dir]">
<option>Horizontaal</option>
<option>Verticaal</option>
</select>
</div>
<div>
<button> Start game!</button>
</div>
</form>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$( document ).ready(function() {
$("button").click(function(){
$.get("Zeeslag.php", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
// initialisatie
var shiplengths = [2,2,2,3,3,3,4,4,5]; /* array van hoe lang ieder schip is. Nu zijn er dus twee schepen, 1 met een lengte van twee vakken en 1 met een lengte van vier vakken. */
var canvas = document.getElementById(“myCanvas”);
var ctx = canvas.getContext(“2d”);
ctx.font = “12px Arial”;
// event handlers
$('.schepen').change( function() { /* als 1 van de elementen met class="schepen" veranderd voer dan deze functie uit*/
draw(); /* teken alles opnieuw! */
});
// vertaal functie van letters naar nummers ( A -> 1 )
function charToNum(character) {
return character.charCodeAt(0) - 64;
}
// teken het zeeslag raster met de letters
function drawGameBoard()
{
ctx.fillStyle = 'black';
ctx.beginPath();
for (var i = 0; i < 10; i++) {
ctx.fillText(i + 1, i * 40 + 35, 12);
}
for (var i = 0; i < 10; i++) {
ctx.fillText(String.fromCharCode(65 + i), 5, i * 40 + 45);
}
for (var i = 0; i <= 10; i++) {
ctx.moveTo(20, i * 40 + 20);
ctx.lineTo(420, i * 40 + 20);
}
for (var i = 0; i <= 10; i++) {
ctx.moveTo(i * 40 + 20, 20);
ctx.lineTo(i * 40 + 20, 420);
}
ctx.stroke();
}
// zorgt er voor dat ieder schip op de juiste plek getekend wordt middels de drawShip() functie
function drawShips()
{
for(var schip = 1 ; schip <= shiplengths.length ; schip++) {
var col = $('select[name="schip['+schip+'][col]"]').val();
var row = $('select[name="schip['+schip+'][row]"]').val();
var dir = $('select[name="schip['+schip+'][dir]"]').val();
var len = shiplengths[schip-1];
drawShip(col, row, dir, len);
}
}
// tekent een enkel schip op het canvas
function drawShip(col, row, dir, len)
{
ctx.beginPath();
if(dir == 'Horizontaal')
ctx.rect(col*40-16, charToNum(row)*40-16, len*40-8, 32);
else
ctx.rect(col*40-16, charToNum(row)*40-16, 32, len*40-8);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.closePath();
ctx.stroke();
}
// teken gewoon alles!
function draw()
{
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawGameBoard();
drawShips();
}
// hier begint het script
draw();
});
</script>
</body>
I all l ready have a few problems on this page. The ships can now be placed over each other and that should not be. I don’t know how to fix this. I also have to send the places of the ships to the other person for the game I have to send the coordinates from the places ships through the database to the other person. I already have make a table with the name, zeeslag and the coloms: player (1 or 2), boat (I have make 9 boats), colom, row (for the coordinates), horizontal or verticale and the length. I actually don’t know how I have to put all the data in the database.
After you have placed the ships it is intended that you will be redirected to the next page where you will be playing the game. First I don’t know how to go to the next page, to zeeslagspel.php. And second I don’t know where I have to start to make te game…
First there have to be random fuction that chooses who will start and the game for the other player will be block, I even don’t know how I have to do that 
. The changes must be passed by means of ajax technology. The database must be accessed in CRUD and every time one the players do something I have to communicate that with the database.
I really hope someone can help me!
I appreciate all the comments and tips.
Thanks for reading and maybe answering.