Hallo,
Ik ben nu alweer een stukje verder, ik heb negen scheepjes gemaakt.
Het enige waar ik nu nog problemen mee heb is de gegevens op te slaan in de database. De gegevens die ik moet opslaan in de database zijn: De speler (1 of 2), de boot (1 t/m 9), de rij, de colom (de begin coördinaten van de boot dus), of de boot verticaal of horizontaal is en tenslotte hoelang de boot is.
Ik heb nu dit bestandje daarvoor:
Zeeslagdatabase.php
<?php
include_once "connect.php";
if($_SERVER['REQUEST_METHOD']=="GET")
$Speler = filter_input(INPUT_GET,"Speler" );
$Boot = filter_input(INPUT_GET,"Boot" );
$Colom = filter_input(INPUT_GET,"Colom" );
$Rij = filter_input(INPUT_GET,"Rij" );
$vh = filter_input(INPUT_GET,"vh" );
$Lengte = filter_input(INPUT_GET,"Lengte" );
$sql = "insert into zeeslag (Speler, Boot, Colom, Rij, vh, Lengte) values (:Speler,:Boot,:Colom,:Rij,:vh,:Lengte)";
$prep = $db -> prepare($sql);
$prep -> bindValue( ':Speler', $Speler );
$prep -> bindValue( ':Boot', $Boot );
$prep -> bindValue( ':Colom', $Colom );
$prep -> bindValue( ':Rij', $Rij );
$prep -> bindValue( ':vh', $vh );
$prep -> bindValue( ':Lengte', $Lengte );
$prep -> execute ();
include_once "Zeeslagspel.php";
?>
ik heb alleen geen idee hoe ik zorg dat deze gegevens ook daadwerkelijk in de database komen het bestand zeeslag.php ziet er zo uit:
<?php
include_once "connect.php";
if($_SERVER['REQUEST_METHOD'] == 'POST') {
// normaal ga je de posities van de schepen opslaan in de database
echo '<pre>' . print_r($_POST, TRUE) . '</pre>';
echo '<a href="'.$_SERVER['PHP_SELF'].'">Opnieuw</a>';
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Mijn titel</title>
<meta charset="UTF-8">
</head>
<body>
<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</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</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</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</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</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</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</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</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</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>
<p id="demo"></p>
</div>
</form>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$( document ).ready(function() {
// 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>
</html>
Verder nog een ander vraagje.
Ik heb van mijn docent deze code gekregen ik weet alleen niet zo goed wat ik er mee moet.
<button>Click me</button>
<p id="demo"></p>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(document).ready(function () {
function hoezee(result) {
console.log(result)
$("demo").html("hoezee");
}
;
$('button').on('click', function () {
console.log("kfkadsjflk")
var data = {naam: 1,
boot1: [1, 3, 'h', 3],
boot2: {x: 4, y: 7, z: 'v', a: 3},
};
console.log(data)
$.getJSON('testdatabase.php', data, function(data) {
hoezee(data);
}
);
})
})
</script>
Ik hoop dat jullie me misschien kunnen helpen.
Alvast ontzettend bedankt :)
