URL: https://www.lisa-clark.be/blackjack/index.php

Er zullen wel nog fouten in zitten en waarschijnlijk kunnen sommige zaken nog beter.
Ik hoor jullie reacties wel :)

Het spel is blackjack (21)
Je hebt 5 handen, elk hand moet zo kort mogelijk bij 21 zijn.
Minimum aantal punten die je nodig hebt is 98 en maximum 105 (5 x 21 = 105)
Als 1 hand meer dan 21 heeft dan is het spel gedaan.
Vanaf 98 punten kan je verzamelen of door gaan om beter te hebben.
... Verder uitleg vind je in het spel en kan je uitproberen.

<?php
/**************************************************\
	Start een nieuwe sessie
\**************************************************/
if (function_exists('session_status')){
	if (session_status() == PHP_SESSION_NONE) { session_start(); }
} elseif (function_exists('session_id')){
	if (session_id() === NULL){ session_start(); }
}

/**************************************************\
	Maak de kaarten
\**************************************************/
if (!isset($_SESSION['deck'])){
	// Van Aas (Ace) tot Koning (King)
	$numbers = str_split('A23456789TJQK');
	// Symbolen: Harten (Hearts) - Klaveren (Clubs) - Ruiten (Diamonds) - Schoppen (Spades)
	$signs = str_split('HCDS');
	// Omzetten van letters naar cijfers en symbolen
	foreach ($numbers as $number){
		if ($number == 'T'){ $setNumber = 10; $setPoints = 10; } else // 10 (Ten) = 10 punten
		if ($number == 'J'){ $setNumber = '&#9821;'; $setPoints = 10; } else // Jack (J) = 10 punten
		if ($number == 'Q'){ $setNumber = '&#9819;'; $setPoints = 10; } else // Queen (Q) = 10 punten
		if ($number == 'K'){ $setNumber = '&#9818;'; $setPoints = 10; } else // King (K) = 10 punten
		if ($number == 'A'){ $setNumber = 'A'; $setPoints = 11; } else // Ace (A) = 11 punten
		{
			// Punten van 2 tot 9
			$setNumber = $number;
			$setPoints = $number;
		}
		foreach ($signs as $sign){
			// Hearts
			if ($sign == 'H'){
				$setSign = '&hearts;';
				$setColor = 'red';
			} else
			// Clubs
			if ($sign == 'C'){
				$setSign = '&clubs;';
				$setColor = 'black';
			} else
			// Diamonds
			if ($sign == 'D'){
				$setSign = '&diams;';
				$setColor = 'red';
			} else
			// Spades
			if ($sign == 'S'){
				$setSign = '&spades;';
				$setColor = 'black';
			}
			$_SESSION['deck'][] = array(
				'sign' => $setSign,
				'number' => $setNumber,
				'color' => $setColor,
				'points' => $setPoints,
			);
		}	
	}
	shuffle($_SESSION['deck']);
}

/**************************************************\
	Maak de score
\**************************************************/
$score = array(
	105 => 250,
	104 => 100,
	103 => 50,
	102 => 25,
	101 => 20,
	100 => 15,
	99 => 10,
	98 => 5,
);

/**************************************************\
	Sessions
\**************************************************/
// Handen
for ($i=1; $i<=5; $i++){
	$_SESSION['hand'][$i]	= isset($_SESSION['hand'][$i])	? $_SESSION['hand'][$i]		: array('points' => array(), 'card' => array());
	$_SESSION['stack'][$i]	= isset($_SESSION['stack'][$i])	? $_SESSION['stack'][$i]	: array();
}
// Speler
$_SESSION['points'] = isset($_SESSION['points']) ? $_SESSION['points'] : 0; // Behaalde punten ronde
$_SESSION['score'] = isset($_SESSION['score']) ? $_SESSION['score'] : 0; // Behaalde totale punten
$_SESSION['high'] = isset($_SESSION['high']) ? $_SESSION['high'] : 0; // Hi-score
// Toon de knoppen 'handen' of 'Nieuw spel'
$_SESSION['reset'] = isset($_SESSION['reset']) ? $_SESSION['reset'] : true; // true = handen, false = nieuw spel
// Toon de knop Collect
$_SESSION['collect'] = isset($_SESSION['collect']) ? $_SESSION['collect'] : false; // true = collect, false = disabled
// Toon de kaart
$_SESSION['count'] = isset($_SESSION['count']) ? $_SESSION['count'] : 0;
$top = $_SESSION['deck'][$_SESSION['count']]['sign'].' '.$_SESSION['deck'][$_SESSION['count']]['number'];
$middle = $_SESSION['deck'][$_SESSION['count']]['number'];
$bottom = $_SESSION['deck'][$_SESSION['count']]['number'].' '.$_SESSION['deck'][$_SESSION['count']]['sign'];
$draw_points = $_SESSION['deck'][$_SESSION['count']]['points'];
$draw_color = $_SESSION['deck'][$_SESSION['count']]['color'];
$script = '';

/**************************************************\
	Controleer verzenden
\**************************************************/
if ($_SERVER['REQUEST_METHOD'] === 'POST'){
	// Nieuw spel
	$key = key($_POST);
	if ($key == 'new'){
		if ($_SESSION['score'] > $_SESSION['high']){ $_SESSION['high'] = $_SESSION['score']; }
		for ($i=1; $i<=5; $i++){
			$_SESSION['hand'][$i]	= array('points' => array(), 'card' => array());
			$_SESSION['stack'][$i]	= array();
		}
		$_SESSION['points'] = 0;
		$_SESSION['score'] = 0;
		$_SESSION['reset'] = true;
		$_SESSION['count'] = 0;
		shuffle($_SESSION['deck']);
	} elseif ($key == 'collect') {
		$_SESSION['score'] = $_SESSION['score'] + $score[$_SESSION['points']];
		if ($_SESSION['score'] > $_SESSION['high']){ $_SESSION['high'] = $_SESSION['score']; }
		for ($i=1; $i<=5; $i++){
			$_SESSION['hand'][$i]	= array('points' => array(), 'card' => array());
			$_SESSION['stack'][$i]	= array();
		}
		$_SESSION['count'] = 0;
		shuffle($_SESSION['deck']);
	} else {
		$hand = NULL;
		switch (strtolower($_POST['hand'])){
			case "hand 1":
			$hand = 1;
			break;

			case "hand 2":
			$hand = 2;
			break;

			case "hand 3":
			$hand = 3;
			break;

			case "hand 4":
			$hand = 4;
			break;

			case "hand 5":
			$hand = 5;
			break;
		}
		$_SESSION['hand'][$hand]['points'][] = $draw_points;
		$_SESSION['hand'][$hand]['card'][] = '						<ul class="card '.$draw_color.'">
							<li>'.$top.'</li>
							<li>'.$middle.'</li>
							<li>'.$bottom.'</li>
						</ul>'.PHP_EOL;
		
		if (array_sum($_SESSION['hand'][$hand]['points']) > 21){
			foreach ($_SESSION['hand'][$hand]['points'] as $key => $val){
				if ($val == 11 && array_sum($_SESSION['hand'][$hand]['points']) > 21){
					$_SESSION['hand'][$hand]['points'][$key] = 1;
				}
			}
		}
		$_SESSION['count']++;
	}
	header('Location: '.$_SERVER['PHP_SELF']);
	exit;
}

$total = array_sum($_SESSION['hand'][1]['points']) + array_sum($_SESSION['hand'][2]['points']) + array_sum($_SESSION['hand'][3]['points']) + array_sum($_SESSION['hand'][4]['points']) + array_sum($_SESSION['hand'][5]['points']);
$_SESSION['points'] = $total;
if ($total > 97 && $total < 106){
	$_SESSION['collect'] = true;
} elseif ($total > 105){
	$_SESSION['reset'] = false;
	$_SESSION['collect'] = false;
} else {
	$_SESSION['collect'] = false;
}

/**************************************************\
	Maak de handen
\**************************************************/
$hand1 = '';
foreach ($_SESSION['hand'][1]['card'] as $card){
	$hand1 .= $card;
}

$hand2 = '';
foreach ($_SESSION['hand'][2]['card'] as $card){
	$hand2 .= $card;
}

$hand3 = '';
foreach ($_SESSION['hand'][3]['card'] as $card){
	$hand3 .= $card;
}

$hand4 = '';
foreach ($_SESSION['hand'][4]['card'] as $card){
	$hand4 .= $card;
}

$hand5 = '';
foreach ($_SESSION['hand'][5]['card'] as $card){
	$hand5 .= $card;
}

$_SESSION['reset'] = true;
for ($i=1; $i<=5; $i++){
	$class[$i] = '';
	if (array_sum($_SESSION['hand'][$i]['points']) > 21){
		$hand[$i] = 'BUSTED !!';
		$class[$i] = ' class="red"';
		$_SESSION['reset'] = false;
		$_SESSION['collect'] = false;
	} else {
		$hand[$i] = array_sum($_SESSION['hand'][$i]['points']);
	}
}

/**************************************************\
	Maak script
\**************************************************/
for ($i=1; $i<=5; $i++){
	foreach ($_SESSION['hand'][$i]['points'] as $key => $val){
		if ($val == 11){
			$script .= '	cancel = setInterval(\'setCounter("stack'.$i.'")\', 1000);'.PHP_EOL;
		}
	}
}

/**************************************************\
	Maak score-tabel
\**************************************************/
$tabel = '';
foreach ($score as $point => $get){
	if ($point == $total && $_SESSION['reset'] == true){ $active = ' class="animate"'; } else { $active = ''; }
	$tabel .= '			<tr'.$active.'>
				<td>'.$point.'</td>
				<td>'.$get.'</td>
			</tr>'.PHP_EOL;
}

/**************************************************\
	Maak de knoppen
\**************************************************/
if ($_SESSION['reset'] == false){
	$disabledHand = ' disabled';
	$disabledNew = '';
} else {
	$disabledHand = '';
	$disabledNew = ' disabled';
}

if ($_SESSION['collect'] == false){
	$disabledCollect = ' disabled';
} else {
	$disabledCollect = '';
}

/**************************************************\
	Output
\**************************************************/
print '<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>♥ ♣ Blackjack ♦ ♠</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style media="all" type="text/css">
*
{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1vw;
	font-weight: 100;
	outline: none 0 transparent;
	text-decoration: none;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html
{
	background: #627d4d;
	background: -moz-radial-gradient(center, ellipse cover, #627d4d 0%, #1f3b08 100%);
	background: -webkit-radial-gradient(center, ellipse cover, #627d4d 0%,#1f3b08 100%);
	background: radial-gradient(ellipse at center, #627d4d 0%,#1f3b08 100%);
	background-size: 100%;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#627d4d\', endColorstr=\'#1f3b08\', GradientType=1);
	height: 100%;
	margin: 0 0 0 0;
	overflow: hidden;
	padding: 0 0 0 0;
	width: 100%;
}

body
{
	align-content: space-evenly;
	background: none transparent;
	display: grid;
	grid-column-gap: 0;
	grid-row-gap: 0;
	grid-template-areas:
		\'header header header\'
		\'nav nav aside\'
		\'main main aside\'
		\'footer footer aside\';
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto 1fr auto;
	height: 100%;
	justify-content: space-evenly;
	margin: 0 0 0 0;
	min-height: 100%;
	overflow: hidden;
	padding: 0 0 0 0;
	width: 100%;
}

/**************************************************\
	Header
\**************************************************/
body > header
{
	display: block;
	grid-area: header;
	margin: 0 0 0 0;
	overflow: hidden;
	padding: 0 0 0 0;
}

body > header h1
{
	background: none rgba(0, 255, 102, 0.3);
	border-bottom: solid 1px #fff;
	color: #fff;
	display: block;
	margin: 0 0 0 0;
	overflow: hidden;
	padding: 0.5vw 0.5vw 0.5vw 0.5vw;
	text-align: center;
}

body > header h1 span
{
	font-size: 3vw;
}

/**************************************************\
	Nav
\**************************************************/
nav
{
	display: block;
	grid-area: nav;
	margin: 0 0 0 0;
	overflow: hidden;
	padding: 0.5em 0.5em 0.5em 0.5em;
}

nav div
{
	display: inline-block;
}

nav div.back
{
	background-color: #6d695c;
	background-image:
		repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
		repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
		linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
		linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
	background-size: 70px 120px;
	border: solid 1px #000;
	border-radius: 0.3em;
	box-shadow: 0.3em 0.3em 0.51em #333;
	color: #fff;
	list-style: none;
	margin: 0 0 0 0;
	overflow: hidden;
	padding: 0.2vw 0.2vw 0.2vw 0.2vw;
	position: relative;
	text-align: center;
	width: 8vw;
}

nav div.back span
{
	display: block;
	font-size: 6vw;
	line-height: 11.8vw;
}

nav fieldset
{
	background: none #fff;
	border: solid 1px #333;
	border-radius: 0.3em;
	color: #000;
	display: inline-block;
	font-size: 1vw;
	margin: 0 1vw 0 1vw;
	overflow: hidden;
	padding: 1vw 1vw 1vw 1vw;
	vertical-align: top;
}

nav fieldset legend
{
	background: none #fff;
	border: solid 1px #333;
	border-radius: 0.3em;
	color: #000;
	margin: 0 1vw 0 1vw;
	overflow: hidden;
	padding: 1vw 1vw 1vw 1vw;
}

nav fieldset p
{
	line-height: 1.5vw;
	margin: 0 0 0 0;
	overflow: hidden;
	padding: 0 0 0 0;
}

/**************************************************\
	Card
\**************************************************/
ul.card
{
	background: none #ffe;
	border: solid 1px #000;
	border-radius: 0.3em;
	display: inline-block;
	list-style: none;
	margin: 0 0 0 0;
	overflow: hidden;
	padding: 0.2vw 0.2vw 0.2vw 0.2vw;
	position: relative;
	width: 8vw;
}

ul.card li
{
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 1.2vw;
	margin: 0 0 0 0;
	overflow: hidden;
	padding: 0 0 0 0;
	text-transform: uppercase;
}

ul.card li:nth-child(1)
{
	text-align: left;
}

ul.card li:nth-child(2)
{
	font-size: 6vw !important;
	text-align: center;
}

ul.card li:nth-child(3)
{
	text-align: right;
}

.red
{
	color: #f00;
}

.black
{
	color: #000;
}

/**************************************************\
	Stack
\**************************************************/
div.stack
{
	background: none transparent;
	display: inline-block;
	margin: 0 0 0 0;
	overflow: hidden;
	padding: 0 0 0 0;
	vertical-align: top;
	width: 12vw;
}

.stack ul.card:not(:first-child)
{
	margin-top: -10vw !important;
}

/**************************************************\
	Section
\**************************************************/
section
{
	grid-area: main;
}

section table
{
	border: solid 1px #000;
	height: 100%;
	margin: 0 auto 0 auto;
	padding: 0 0 0 0;
	width: 80%;
}

section table tr
{
}

section table tr td
{
	height: auto;
	text-align: center;
	vertical-align: top;
}

section table tr:nth-child(1) td
{
	background: none #fff;
	color: #000;
}

section table tr:nth-child(2) td
{
	background: none rgba(0, 255, 0, 0.1);
	height: 100%;
}

section table tr:nth-child(3) td
{
	background: none #fff;
	color: #000;
}

/**************************************************\
	Aside
\**************************************************/
aside
{
	display: block;
	grid-area: aside;
	margin: 0 0 0 0;
	padding: 0 1vw 0 1vw;
}

aside table
{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 100%;
}

aside table tr
{
}

aside table tr th
{
	background: none #000;
	color: #fff;
	font-weight: 900;
	padding: 0.3em 0.3em 0.3em 0.3em;
}

aside table tr td
{
	text-align: center;
	padding: 0.3em 0.3em 0.3em 0.3em;
}

aside table tr:nth-child(odd) td
{
	background: none #ccc;
}

aside table tr:nth-child(even) td
{
	background: none #fff;
}

aside table tr.animate td
{
	animation-direction: alternate-reverse;
	animation-duration: 0.2s;
	animation-iteration-count: infinite;
	animation-name: choose;
}

aside article
{
	background: none #fff;
	color: #000;
	font-size: 1vw;
	display: block;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

aside article header
{
	display: block;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

aside article header h2
{
	background: none #000;
	color: #fff;
	display: block;
	margin: 0 0 0 0;
	padding: 1vw 0 1vw 0;
	text-align: center;
}

aside article p
{
	display: block;
	line-height: 1.5vw;
	margin: 1vw 0 1vw 0;
	padding: 0 1vw 0 1vw;
}

/**************************************************\
	Footer
\**************************************************/
footer
{
	grid-area: footer;
	margin: 1vw 0 1vw 0;
	padding: 0 0 0 0;
	text-align: center;
}

/**************************************************\
	Input
\**************************************************/
form
{
	display: block;
	height: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

input[type="submit"]
{
	border: solid 1px #000;
	border-radius: 0.3em;
	color: #000;
	margin: 0 0 0 0;
	padding: 1vw 1vw 1vw 1vw;
}

input[type="submit"]:enabled
{
	animation-direction: alternate-reverse;
	animation-duration: 0.3s;
	animation-iteration-count: infinite;
	animation-name: choose;
}

input[type="submit"]:disabled
{
	background: none #ccc;
	color: #999;
}

/**************************************************\
	Animations
\**************************************************/
@keyframes choose
{
  from { background-color: #fff; }
  to { background-color: #999; }
}

@-webkit-keyframes choose
{
  from { background-color: #fff; }
  to { background-color: #999; }
}
</style>
</head>

<body>
<header>
	<h1>
		<span class="red">&hearts;</span>
		<span class="black">&clubs;</span>
		<span class="blackjack">Blackjack</span>
		<span class="red">&diams;</span>
		<span class="black">&spades;</span>
	</h1>
</header>
<nav>
	<div class="back">
		<span>'.round(51 - $_SESSION['count']).'</span>
	</div>
	<div class="draw">
		<ul class="card '.$draw_color.'">
			<li>'.$top.'</li>
			<li>'.$middle.'</li>
			<li>'.$bottom.'</li>
		</ul>
    </div>
	<fieldset>
		<legend>Punten</legend>
		<p>'.$total.'</p>
	</fieldset>
	<fieldset>
		<legend>Bonus</legend>
		<p>'.round($_SESSION['score']).'</p>
	</fieldset>
	<fieldset>
		<legend>Hoogste</legend>
		<p>'.round($_SESSION['high']).'</p>
	</fieldset>
</nav>
<section>
	<form action="" enctype="multipart/form-data" method="post">
		<table>
			<tr>
				<td id="stack1">'.$hand[1].'</td>
				<td id="stack2">'.$hand[2].'</td>
				<td id="stack3">'.$hand[3].'</td>
				<td id="stack4">'.$hand[4].'</td>
				<td id="stack5">'.$hand[5].'</td>
			</tr>
			<tr>
				<td>
					<div class="stack">
'.$hand1.'					</div>
				</td>
				<td>
					<div class="stack">
'.$hand2.'					</div>
				</td>
				<td>
					<div class="stack">
'.$hand3.'					</div>
				</td>
				<td>
					<div class="stack">
'.$hand4.'					</div>
				</td>
				<td>
					<div class="stack">
'.$hand5.'					</div>
				</td>
			</tr>
			<tr>
				<td><input'.$disabledHand.' id="hand1" name="hand" type="submit" value="Hand 1"></td>
				<td><input'.$disabledHand.' id="hand2" name="hand" type="submit" value="Hand 2"></td>
				<td><input'.$disabledHand.' id="hand3" name="hand" type="submit" value="Hand 3"></td>
				<td><input'.$disabledHand.' id="hand4" name="hand" type="submit" value="Hand 4"></td>
				<td><input'.$disabledHand.' id="hand5" name="hand" type="submit" value="Hand 5"></td>
			</tr>
		</table>
	</form>
</section>
<aside>
	<table>
		<thead>
			<tr>
				<th>Punten</th>
				<th>Bonus</th>
			</tr>
		</thead>
		<tbody>
'.$tabel.'		</tbody>
	</table>
	<article>
		<header>
			<h2>Help</h2>
		</header>
		<p>Probeer om in elke hand 21 punten te behalen.</p>
		<p>Je totale punten zijn alle punten van elk hand.</p>
		<p>Als 1 hand meer dan 21 punten heeft is het spel afgelopen.</p>
		<p>De aas telt voor 1 of 11 punten. Zodra een hand meer dan 21 punten heeft zal de aas voor 1 punt tellen.</p>
		<p>De boer (J), dame (Q) en heer (K) tellen elk voor 10 punten.</p>
		<p>De resterende kaarten tellen voor hun eigen. De 2 voor 2 punten, 3 voor 3 punten, enzovoorts...</p>
		<p>Je hebt minimaal 98 punten nodig om door te gaan naar de volgende ronde en de bonus te verzamelen.</p>
	</article>
</aside>
<footer>
	<form action="" enctype="multipart/form-data" method="post">
		<input'.$disabledNew.' id="new" name="new" type="submit" value="Nieuw Spel">
		<input'.$disabledCollect.' id="collect" name="collect" type="submit" value="Verzamelen">
	</form>
</footer>
<script type="text/javascript">
	var el, switchNumber, cancel, stack = Array;

	function setCounter(setID){
		if (stack[setID] == "up"){
			stack[setID] = "down";
			setUp(setID);
		} else {
			stack[setID] = "up";
			setDown(setID);
		}
	}

	function setDown(setID){
		el = document.getElementById(setID);
		switchNumber = Math.round(el.innerText);
		el.innerText = Math.round(switchNumber - 10);
	}

	function setUp(setID){
		el = document.getElementById(setID);
		switchNumber = Math.round(el.innerText);
		el.innerText = Math.round(switchNumber + 10);
	}

'.$script.'
</script>
</body>
</html>';

?>
Waarom gooi je je hele output op het einde in print?
Je kan ook deze ook prima buiten PHP behandelen.
In random order:
- lijstje maken voor 2..9,T,J,Q,K,A (met "number", points, ...), zodat je niet steeds if..then..else nodig hebt (maar gewoon door het lijstje heen kunt foreach-en)
- Dito voor H,C,D,S
- Voor hand 1 t/m 5 staat soms ook helemaal uitgeschreven (maar soms ook als for(..) ?)
- Soms zijn functies ook wel handig om repeterend werk eenvoudiger te maken, en het maakt ook de code wat overzichtelijker (wat je nu in de /***\ blokken hebt staan worden dan bijvoorbeeld functies, en dan kun je in 1 oogopslag beter zien wat er nou precies gebeurt, zonder meteen alle details om je oren/ogen te krijgen)
- Initialiseer de $_SESSION eenmalig, en niet met een sloot isset (nieuwe sessie = structuur aanmaken)
- isset($_SESSION['x']) ? $_SESSION['x'] : 0 kan tegenwoordig eenvoudiger via $_SESSION['x'] ?? 0
- if ($point == $total && $_SESSION['reset'] == true){ $active = ' class="animate"'; } else { $active = ''; }
zou ik schrijven als
$active = ($point == $total && $_SESSION['reset']) ? ' class="animate"' : = '';
- Volgens mij kun je veel meer client-side doen (geen round trip naar de server per kaart) (tenzij je dingen wilt kunnen controleren, maar dan moet je bijvoorbeeld ook controleren of $_POST['hand'] wel 1..5 is). Of minimaal de herhalende stukjes JS in JS herhalen, en niet in PHP (waardoor het stuk JS er steeds letterlijk een x aantal keer in staat).
Offtopic: het is vooral erg verslavend ;-)

Het viel wel op dat de onderste regel van de uitleg (rechtsonder) buiten het beeld viel en dat scrollen niet mogelijk is, oftewel; niet zichtbaar.
@Arien, maakt het een verschil?
@Rob, ik zal zeker verbeteringen aan brengen
@Ramon, met welke browser heb je getest? Mobieltje, Tablet, PC??

Ik heb nooit een cursus gevolgd van PHP, html, css enzovoorts... Alles wat ik ken is enkel met "domme" vragen te stellen hier op phphulp en met de antwoorden zeker iets te doen.
Ja, het maakt wat snelheid (milliseconden), en is makkelijker te onderhouden.
- Ariën - op 26/03/2019 20:48:12

(milliseconden)

Echt? volgens mij zie je d'r niks van terug op een enkele call. Pas bij een paar miljoen keer zie je misschien iets van milliseconden terug.

Nanoseconden dan... :-)

Leuk en verslavend spel! De code kan inderdaad netter en de print aan het eind is inderdaad vreemd. Waarom heb je hiervoor gekozen?
De schaalbaarheid zou evt nog beter kunnen. Als height te laag is tov de width (bijv 1900x800), vallen er dingen buiten.
Het is jammer dat 30% van de kaarten 10 punten is, dit maakt het spel wel heel lastig. Ik krijg soms 4x een 10 punten kaart achtereen, waardoor je er vaak niet meer mee weg kan.
In regel 295 (html) en 318 (body) de style aanpassen :

/*overflow: hidden;*/


Dan scrollt de pagina wel.

Reageren