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 = '♝'; $setPoints = 10; } else // Jack (J) = 10 punten
if ($number == 'Q'){ $setNumber = '♛'; $setPoints = 10; } else // Queen (Q) = 10 punten
if ($number == 'K'){ $setNumber = '♚'; $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 = '♥';
$setColor = 'red';
} else
// Clubs
if ($sign == 'C'){
$setSign = '♣';
$setColor = 'black';
} else
// Diamonds
if ($sign == 'D'){
$setSign = '♦';
$setColor = 'red';
} else
// Spades
if ($sign == 'S'){
$setSign = '♠';
$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">♥</span>
<span class="black">♣</span>
<span class="blackjack">Blackjack</span>
<span class="red">♦</span>
<span class="black">♠</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>';
?>