Een spel maken in - PHP
Het is de bedoeling dat de speler zelf de schepen kan plaatsen, ik denk dat dit zowel foto's als gekleurde vlakjes mogen zijn. Ik weet niet welke optie het makkelijkste is.
Aantal keer schepen soort schip aantal vakjes
1 x--------------------vliegdekschip---------5
2 x---------------------slagschip------------4
3 x---------------------onderzeeër-----------3
3 x--------------------Torpedobootjager------3
4 x---------------------Patrouilleschip------2
Dit zijn de schepen die ik volgens de officiële regels zou moeten toevoegen.
Op deze pagina kun je het dan misschien zo maken dat de schepen verschoven kunnen worden. ze moeten ook nog 90 graden draaibaar zijn.
Ik heb nu twee pagina's aangemaakt één waar je de schepen kan plaatsen en één waar je kunt spelen.
Ik heb het idee dat ik eerst nu een tabel moet gaan maken met waar je de vakjes een kleur kunt geven dus de schepen kunt plaatsen, ik dacht misschien kun je elk schip een aparte kleur geven.
Schepen zijn 1,2,3,4 of 5 vakjes lang kun je ook een max stellen aan de hoeveelheid dat iemand een kleur mag gebruiken, en zo ja hoe doe je dat en zorg je dat het dan ook daadwerkelijk in die tabel komt?
Alvast bedankt :)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<?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>
<button>Start game!</button>
</div>
</form>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$( document ).ready(function() {
// initialisatie
var shiplengths = [2,4]; /* 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>
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>
<button>Start game!</button>
</div>
</form>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$( document ).ready(function() {
// initialisatie
var shiplengths = [2,4]; /* 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>
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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?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";
?>
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
<?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>
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>
<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 :)
Gewijzigd op 13/05/2016 11:49:22 door Maaike Doornhein
Bijvoorbeeld als iemand op een knop drukt dan wil je dat er iets gebeurt. dat gebeurt met het on('click') event.
Als je op de knop drukt in het voorbeeld van je leraar dan zal de code vanaf regel 14 tot 28 uitgevoerd worden.
In dit stukje code zit nog een nieuw voorbeeld. Hier laat je leraar zien hoe je met jquery een nieuw request aan je webserver kunt starten waarop je webserver (testdatabase.php) iets uit de database kan halen of kan wegschrijven en iets kan terugsturen in JSON formaat.
Om dit voorbeeld daadwerkelijk in actie te zien zul je dus ook een testdatabase.php naast dit voorbeeld op je server moeten plaatsen die de aangeleverde data opslaat in de database.
immers: javascript draait in de browser op de computer van de client. deze heeft geen toegang tot jouw database.
Dus om data van de browser naar de database te sturen moet je twee stappen uitvoeren. stap 1 is het starten van een nieuw request waarbij je de data aanlevert in get of post mode (er zijn ook nog andere modes maar dat laat ik even terzijde) Stap 2 is (met PHP) de data valideren (altijd valideren) en als de validatie gelukt is opslaan in de database.
Met console.log() wordt er iets naar de console van je webbrowser gestuurd. Die vindt je onder de F12 knop en dan bij de console tab.
Gewijzigd op 14/05/2016 10:11:33 door Frank Nietbelangrijk
Ik zit een beetje met mijn handen haar wat betreft mijn opdracht zeeslag :(.
Mijn opdracht moet maandag 13 juni worden ingeleverd en ik kom niet echt verder, mijn docent heeft zijn best gedaan me te helpen maar ik snap het gewoon simpel weg niet en kom niet verder, ik heb zelfs een php cursus geprobeerd te volgen maar ook dat werkt niet!
Ik ben nog steeds bezig met de gegevens in de database te krijgen...
Maar weet niet wat voor tabel handig is en hoe het er dan ook in komt en zorg dat het op een volgende pagina zichtbaar is.
Ik hoop dat iemand me kan helpen.
Ik heb nog even een ander vraagje, ik zit namelijk in 5 VWO, vinden jullie dat deze opdracht te hoog gegrepen is voor een 5 VWO klas? Ik heb in 4 VWO alleen een site moeten maken met html.
Ik heb het vak informatie gekozen met de intentie dat je meer bezig zou zijn met misschien een keer een site maken of fotobewerking. Maar dit had ik niet verwacht dit is ook nooit bij ons op school uitgelegd helaas :(.
Ik heb nog steeds het bestandje:
zeeslag.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
<?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 '<pre>' . print_r($_GET, 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>
</div>
</form>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(document).ready(function () {
$('#share').append("<form action='zeeslagsatabase.php.php' method='GET'>");
$('#share form').append("<div class='schepen'>hallo<div/>");
$('#share form').append("<input type='text' placeholder='Name' name='routename' id='rname'/>");
$('#share form').append("<input type='text' placeholder='description' id='rdescription' name='routedescription' class='address'/>");
$('#share form').append("<input type='text' placeholder='tags' id='tags' name='routetags' />");
$('#share form').append("<br><input type='submit' id='savebutton' value='Save' />");
// 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>
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 '<pre>' . print_r($_GET, 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>
</div>
</form>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(document).ready(function () {
$('#share').append("<form action='zeeslagsatabase.php.php' method='GET'>");
$('#share form').append("<div class='schepen'>hallo<div/>");
$('#share form').append("<input type='text' placeholder='Name' name='routename' id='rname'/>");
$('#share form').append("<input type='text' placeholder='description' id='rdescription' name='routedescription' class='address'/>");
$('#share form').append("<input type='text' placeholder='tags' id='tags' name='routetags' />");
$('#share form').append("<br><input type='submit' id='savebutton' value='Save' />");
// 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>
En ik heb het bestandje:
zeeslagdatabase.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
include_once "connect.php";
include_once "zeeslag.php";
$sql = "insert into zeeslag (Speler,Boot,Colom,Rij,vh,Lengte) values (:speler,:boot,:Colom,:Rij,:vh,:Lengte)";
$speler->bindValue(":speler",filter_input(INPUT_GET,'speler'));
$row->bindValue(":row",filter_input(INPUT_GET,'row'));
$col->bindValue(":col",filter_input(INPUT_GET,'col'));
$dir->bindValue(":dir",filter_input(INPUT_GET,'dir'));
$speler = $_GET['speler'];
foreach($info['schip']as $k => $val);
$row = $val['row'];
$col = $val ["col"];
$dir = $val ['dir'];
"update boot(row,col,dir,speler) values('$r','$c','$d','$speler')";
?>
include_once "connect.php";
include_once "zeeslag.php";
$sql = "insert into zeeslag (Speler,Boot,Colom,Rij,vh,Lengte) values (:speler,:boot,:Colom,:Rij,:vh,:Lengte)";
$speler->bindValue(":speler",filter_input(INPUT_GET,'speler'));
$row->bindValue(":row",filter_input(INPUT_GET,'row'));
$col->bindValue(":col",filter_input(INPUT_GET,'col'));
$dir->bindValue(":dir",filter_input(INPUT_GET,'dir'));
$speler = $_GET['speler'];
foreach($info['schip']as $k => $val);
$row = $val['row'];
$col = $val ["col"];
$dir = $val ['dir'];
"update boot(row,col,dir,speler) values('$r','$c','$d','$speler')";
?>
Ik hoop echt dat jullie me kunnen helpen...
Alvast ontzettend bedankt!
https://github.com/benjamw/battleship/blob/master/game.php
https://github.com/joseairosa/Battleship
Niet om klakkeloos te kopiëren, maar om van te leren. ;-)
Maaike Doornhein op 01/06/2016 13:22:33:
Ik heb nog even een ander vraagje, ik zit namelijk in 5 VWO, vinden jullie dat deze opdracht te hoog gegrepen is voor een 5 VWO klas? Ik heb in 4 VWO alleen een site moeten maken met html.
Ik heb het vak informatie gekozen met de intentie dat je meer bezig zou zijn met misschien een keer een site maken of fotobewerking. Maar dit had ik niet verwacht dit is ook nooit bij ons op school uitgelegd helaas :(.
Ik heb het vak informatie gekozen met de intentie dat je meer bezig zou zijn met misschien een keer een site maken of fotobewerking. Maar dit had ik niet verwacht dit is ook nooit bij ons op school uitgelegd helaas :(.
Ik vind dit niet te hoog gegrepen voor 5 VWO: Zeeslag is een eenvoudig kansspel en het spelbord is weinig meer dan een tweedimensionale matrix c.q. array (hint). Wel vind ik het wat te veel gevraagd om dat ins Blaue hinein te moeten programmeren zonder wat uitleg over de basisbeginselen van PHP en MySQL.
Mocht je de opdracht of het spel zelf uitkiezen?