<!doctype html>
<html>
<head>
<title>Knockout 👊 Dice 🎲🎲 Game - RJM Programming - March, 2018</title>
<style>
* { font-family: 'DejaVu Sans'; }
.xone:before { font-family: 'DejaVu Sans'; content: '\002680'; color:blue; }
.xtwo:before { font-family: 'DejaVu Sans'; content: '\002681'; color:blue; }
.xthree:before { font-family: 'DejaVu Sans'; content: '\002682'; color:blue; }
.xfour:before { font-family: 'DejaVu Sans'; content: '\002683'; color:blue; }
.xfive:before { font-family: 'DejaVu Sans'; content: '\002684'; color:blue; }
.xsix:before { font-family: 'DejaVu Sans'; content: '\002685'; color:blue; }
.zone:after { font-family: 'DejaVu Sans'; content: '\002680'; color:blue; }
.ztwo:after { font-family: 'DejaVu Sans'; content: '\002681'; color:blue; }
.zthree:after { font-family: 'DejaVu Sans'; content: '\002682'; color:blue; }
.zfour:after { font-family: 'DejaVu Sans'; content: '\002683'; color:blue; }
.zfive:after { font-family: 'DejaVu Sans'; content: '\002684'; color:blue; }
.zsix:after { font-family: 'DejaVu Sans'; content: '\002685'; color:blue; }
.kout:after { content: '\01f44A'; }
#snum { background-color: yellow; }
#header { background-color: #f0f0f0; }
select { white-space:pre-wrap; border-radius: 6px; }
button { border-radius: 12px; }
</style>
<script type='text/javascript'>
// https://www.w3schools.com/charsets/ref_utf_punctuation.asp
var probabilities=[0,0,1,2,3,4,5,6,5,4,3,2,1]; // score will be 7-guessValue
var score=[0,0], goes=[0,0], names=['Player 👤 1','Player 👤 2'], sels=['',''], stillin=[true,true];
var cactiontd='';
var numplayers=2;
var theader='', tgame='';
var hris='';
var d1=7, d2=7, ccomma='', lastwinners='';
var rollno=1;
var numpdone=false, refocus=false;
function andthen() {
document.getElementById('actiontd').innerHTML=cactiontd;
document.getElementById('tdr').innerHTML='Two Dice 🎲🎲 Roll';
for (var hem=1; hem<=numplayers; hem++) {
document.getElementById('gplayer' + hem).innerHTML=sels[eval(-1 + hem)];
document.getElementById('gplayer' + hem).value='06';
stillin[eval(-1 + hem)]=true;
lastwinners='';
}
}
function roll() {
d1=7;
d2=7;
ccomma='';
rollno=1;
document.getElementById('myh3').innerHTML=document.getElementById('myh3').innerHTML.split(' ... ')[0];
fixinstone(numplayers);
if (cactiontd == '') {
cactiontd=document.getElementById('actiontd').innerHTML;
}
document.getElementById('actiontd').innerHTML='';
postroll();
}
function postroll() {
var sofarx='';
if (1 != 7) {
if (document.getElementById('tdr').innerHTML == 'Two Dice 🎲🎲 Roll') document.getElementById('tdr').innerHTML='Two Dice 🎲🎲 Rolls are ';
d1=7;
while (d1 == 7) {
d1=eval(Math.floor(Math.random() * 6) + 1);
}
if (1 == 1) {
sofarx=document.getElementById('actiontd').innerHTML;
if (eval(eval('' + sofarx.split('</div').length) % 2) == 1) { hris='<hr>Roll ' + rollno + '<hr>'; rollno++; } else { hris=''; }
document.getElementById('actiontd').innerHTML='<div style="margin-left:10%;z-index:89;">' + document.getElementById('h' + d1).outerHTML.replace(' id="h' + d1 + '"','') + '</div>' + hris + sofarx;
} else {
document.getElementById('actiontd').innerHTML+='<div style="margin-left:10%;z-index:89;">' + document.getElementById('h' + d1).outerHTML.replace(' id="h' + d1 + '"','') + '</div>';
}
d2=7;
while (d2 == 7) {
d2=eval(Math.floor(Math.random() * 6) + 1);
}
if (1 == 1) {
sofarx=document.getElementById('actiontd').innerHTML;
if (eval(eval('' + sofarx.split('</div').length) % 2) == 1) { hris='<hr>Roll ' + rollno + '<hr>'; rollno++; } else { hris=''; }
document.getElementById('actiontd').innerHTML='<div style="margin-left:10%;z-index:89;">' + document.getElementById('h' + d2).outerHTML.replace(' id="h' + d2 + '"','') + '</div>' + hris + sofarx;
} else {
document.getElementById('actiontd').innerHTML+='<div style="margin-left:10%;z-index:89;">' + document.getElementById('h' + d2).outerHTML.replace(' id="h' + d2 + '"','') + '</div>';
}
d1+=d2; //(' ' + d2).replace('6','<span class=xsix>6</span>').replace('5','<span class=xfive>5</span>').replace('4','<span class=xfour>4</span>').replace('3','<span class=xthree>3</span>').replace('2','<span class=xtwo>2</span>').replace('1','<span class=xone>1</span>');
document.getElementById('tdr').innerHTML+=ccomma + diceemojis(d1,d2);
ccomma=', ';
} else {
document.getElementById('tdr').innerHTML='Two Dice 🎲🎲 Rolls are ';
}
for (var hem=0; hem<numplayers; hem++) {
if (1 == 7) {
d1=7;
while (d1 == 7) {
d1=eval(Math.floor(Math.random() * 6) + 1);
}
if (1 == 1) {
sofarx=document.getElementById('actiontd').innerHTML;
if (eval(eval('' + sofarx.split('</div').length) % 2) == 1) { hris='<hr>Roll ' + rollno + '<hr>'; rollno++; } else { hris=''; }
document.getElementById('actiontd').innerHTML='<div style="margin-left:10%;z-index:89;">' + document.getElementById('h' + d1).outerHTML.replace(' id="h' + d1 + '"','') + '</div>' + hris + sofarx;
} else {
document.getElementById('actiontd').innerHTML+='<div style="margin-left:10%;z-index:89;">' + document.getElementById('h' + d1).outerHTML.replace(' id="h' + d1 + '"','') + '</div>';
}
d2=7;
while (d2 == 7) {
d2=eval(Math.floor(Math.random() * 6) + 1);
}
if (1 == 1) {
sofarx=document.getElementById('actiontd').innerHTML;
if (eval(eval('' + sofarx.split('</div').length) % 2) == 1) { hris='<hr>Roll ' + rollno + '<hr>'; rollno++; } else { hris=''; }
document.getElementById('actiontd').innerHTML='<div style="margin-left:10%;z-index:89;">' + document.getElementById('h' + d2).outerHTML.replace(' id="h' + d2 + '"','') + '</div>' + hris + sofarx;
} else {
document.getElementById('actiontd').innerHTML+='<div style="margin-left:10%;z-index:89;">' + document.getElementById('h' + d2).outerHTML.replace(' id="h' + d2 + '"','') + '</div>';
}
d1+=d2; //(' ' + d2).replace('6','<span class=xsix>6</span>').replace('5','<span class=xfive>5</span>').replace('4','<span class=xfour>4</span>').replace('3','<span class=xthree>3</span>').replace('2','<span class=xtwo>2</span>').replace('1','<span class=xone>1</span>');
document.getElementById('tdr').innerHTML+=ccomma + diceemojis(d1,d2);
ccomma=', ';
}
if (('' + document.getElementById('gplayer' + eval(1 + hem)).value) != '0') {
if (('' + document.getElementById('gplayer' + eval(1 + hem)).value).replace('0','') == ('' + d1)) {
goes[hem]++;
stillin[hem]=false;
document.getElementById('tdr').innerHTML=document.getElementById('tdr').innerHTML.replace(' id="' + rollno + '"', ' class="kout" id="' + rollno + '"');
document.getElementById('gplayer' + eval(1 + hem)).innerHTML="<option value='0' style='border:2px solid red;'>" + String.fromCodePoint(128074) + " Sorry, " + names[hem] + ", you are out</option>";
}
//document.getElementById('score' + eval(1 + hem)).innerHTML='Score: ' + score[hem] + '/' + goes[hem];
}
}
if (csi() == "") {
for (var jhem=0; jhem<numplayers; jhem++) {
document.getElementById('score' + eval(1 + jhem)).innerHTML='Score: ' + score[jhem] + '/' + goes[jhem];
}
setTimeout(andthen, 5000);
} else {
setTimeout(postroll, 2000);
}
if (hris == '') { hris='<hr>'; } else { hris=''; }
}
function diceemojis(totv, secv) {
var hprefix='', hsuffix='', classbit='';
var firstv=eval(totv - secv);
if (1 == 1) {
var sels=document.getElementsByTagName('select');
for (var isels=0; isels<sels.length; isels++) {
if (('' + sels[isels].value.replace(/^0/g,'')) == ('' + totv)) { classbit=' class="kout"'; }
}
hprefix=('' + secv).replace(/1/g, '<sup class=xone></sup>').replace(/2/g, '<sup class=xtwo></sup>').replace(/3/g, '<sup class=xthree></sup>').replace(/4/g, '<sup class=xfour></sup>').replace(/5/g, '<sup class=xfive></sup>').replace(/6/g, '<sup class=xsix></sup>')
hsuffix=('' + firstv).replace(/1/g, '<sub class=zone></sub>').replace(/2/g, '<sub class=ztwo></sub>').replace(/3/g, '<sub class=zthree></sub>').replace(/4/g, '<sub class=zfour></sub>').replace(/5/g, '<sub class=zfive></sub>').replace(/6/g, '<sub class=zsix></sub>')
return hprefix + '<span' + classbit + ' id="span' + rollno + '">' + totv + '</span>' + hsuffix;
}
return (' <span class="' + firstv + ' ' + secv + '">' + totv + '</span>').replace(/\ 1\"/g, ' zone"').replace(/\ 2\"/g, ' ztwo"').replace(/\ 3\"/g, ' zthree"').replace(/\ 4\"/g, ' zfour"').replace(/\ 5\"/g, ' zfive"').replace(/\ 6\"/g, ' zsix"').replace(/\"1\ /g, '"xone ').replace(/\"2\ /g, '"xtwo ').replace(/\"3\ /g, '"xthree ').replace(/\"4\ /g, '"xfour ').replace(/\"5\ /g, '"xfive ').replace(/\"6\ /g, '"xsix ');
}
function csi() {
var winners='', wsuffix='', numleft=0;
var sinc=1;
if (document.getElementById('gwta').checked) { sinc=rollno; }
for (var jhem=0; jhem<numplayers; jhem++) {
if (stillin[jhem]) {
winners+=wsuffix + jhem;
wsuffix=',';
numleft++;
}
}
if (winners == '' && numleft == 0 && document.getElementById('mytable').innerHTML.indexOf('Sorry') == -1) {
document.getElementById('myh3').innerHTML=document.getElementById('myh3').innerHTML.split(' ... ')[0] + ' ... ' + "No winners";
return '';
} else if (numleft == 1) {
goes[eval(winners)]++;
score[eval(winners)]+=sinc;
if (eval('' + sinc) > 1) {
document.getElementById('myh3').innerHTML=document.getElementById('myh3').innerHTML.split(' ... ')[0] + ' ... ' + String.fromCodePoint(127881) + String.fromCodePoint(127881) + " Well done, " + names[eval(winners)] + ", you win alone";
document.getElementById('gplayer' + eval(1 + eval(winners))).innerHTML="<option value='0' style='border:2px solid darkgreen;'>" + String.fromCodePoint(127881) + String.fromCodePoint(127881) + " Well done, " + names[eval(winners)] + ", you win alone</option>";
} else {
document.getElementById('myh3').innerHTML=document.getElementById('myh3').innerHTML.split(' ... ')[0] + ' ... ' + String.fromCodePoint(127881) + " Well done, " + names[eval(winners)] + ", you win alone";
document.getElementById('gplayer' + eval(1 + eval(winners))).innerHTML="<option value='0' style='border:2px solid darkgreen;'>" + String.fromCodePoint(127881) + " Well done, " + names[eval(winners)] + ", you win alone</option>";
}
//alert('one winner is ' + winners);
return '';
} else if (numleft == 0) {
var izero=1;
if (eval('' + lastwinners.replace(/\,$/g, '').split(',').length) >= eval('' + lastwinners.split(',').length)) { // && document.getElementById('mytable').innerHTML.indexOf('Sorry') == -1) {
izero=0;
}
if (document.getElementById('mytable').innerHTML.indexOf('Sorry') == -1) {
document.getElementById('myh3').innerHTML=document.getElementById('myh3').innerHTML.split(' ... ')[0] + ' ... ' + "No winners";
return '';
} else {
var ws=lastwinners.split(',');
for (var khem=0; khem<ws.length; khem++) {
//goes[eval('' + ws[khem])]++;
if (document.getElementById('gplayer' + eval(1 + eval(ws[khem])))) {
if (eval('' + lastwinners.replace(/\,$/g, '').split(',').length) >= eval('' + ws.length)) { // && document.getElementById('mytable').innerHTML.indexOf('Sorry') == -1) {
document.getElementById('tdr').innerHTML=document.getElementById('tdr').innerHTML.replace(' id="' + rollno + '"', ' class="kout" id="' + rollno + '"');
document.getElementById('gplayer' + eval(1 + eval(ws[khem]))).innerHTML="<option value='0' style='border:2px solid lightgreen;'>" + String.fromCodePoint(128074) + " Even Stevens, " + names[eval(ws[khem])] + ", you lose but not alone</option>";
} else {
document.getElementById('tdr').innerHTML=document.getElementById('tdr').innerHTML.replace(' id="' + rollno + '"', ' class="kout" id="' + rollno + '"');
document.getElementById('gplayer' + eval(1 + eval(ws[khem]))).innerHTML="<option value='0' style='border:2px solid lightgreen;'>" + String.fromCodePoint(128074) + " Well done, " + names[eval(ws[khem])] + ", you win but not alone</option>";
}
score[eval('' + ws[khem])]+=izero;
}
}
if (eval('' + lastwinners.replace(/\,$/g, '').split(',').length) >= eval('' + ws.length)) {
document.getElementById('myh3').innerHTML=document.getElementById('myh3').innerHTML.split(' ... ')[0] + ' ... ' + "No winners";
} else {
document.getElementById('myh3').innerHTML=document.getElementById('myh3').innerHTML.split(' ... ')[0] + ' ... ' + "Well done, " + manynames(lastwinners) + ", you win but not alone";
}
//alert('several winners are ' + lastwinners);
}
return '';
} else {
lastwinners=winners;
//document.title=lastwinners;
document.getElementById('actiontd').innerHTML+='<hr>';
document.getElementById('myh3').innerHTML=document.getElementById('myh3').innerHTML.split(' ... ')[0];
return lastwinners;
}
}
function manynames(lw) {
var iissa=lw.replace(/\,$/g, '').split(',');
var outx='';
for (var ij=0; ij<iissa.length; ij++) {
if (outx == '') {
outx='' + names[iissa[ij]];
} else {
outx+=',' + names[iissa[ij]];
}
}
return outx;
}
function checkt() {
var inpn=location.search.split('numplayers=')[1] ? decodeURIComponent(location.search.split('numplayers=')[1].split('&')[0]) : '02';
if (sels[0] == '') {
sels[0]=document.getElementById('gplayer1').innerHTML;
}
if (sels[1] == '') {
sels[1]=document.getElementById('gplayer2').innerHTML;
}
if (theader == '') {
theader=document.getElementById('header').innerHTML;
}
if (tgame == '') {
tgame=document.getElementById('game').innerHTML;
}
if (inpn.replace(/^0/g,'') == inpn && inpn.trim() != '') {
fixinstone(inpn);
}
}
function namechange(tid,tval) {
names[eval(tid.replace('dname','') - 1)]=tval;
}
function fixinstone(ihow) {
//document.getElementById('dnum').innerHTML='' + ihow;
document.getElementById('dnum').innerHTML='<span onfocus="refocus=true;" onlosefocus="setTimeout(function(){ refocus=false; }, 3000);" contenteditable=true onblur="fixinstone(this.innerHTML); refocus=false;">' + ihow + '</span>';
if (numpdone && refocus && ('' + numplayers) != ('' + ihow)) { location.href=document.URL.split('?')[0].split('#')[0] + '?numplayers=' + ihow; }
numpdone=true;
if (numplayers < eval(ihow)) {
numplayers=eval(ihow);
var th='', tg='';
for (var jhow=3; jhow<=numplayers; jhow++) {
score.push(0);
goes.push(0);
stillin.push(true);
sels.push(sels[0]);
names.push('Player 👤 ' + jhow);
th+="<th>Knockout 👊 Choice</th><th><div onchange='namechange(this.id,this.innerHTML);' id='dname" + jhow + "' contenteditable=true>Player 👤 " + jhow + "</div><br>Score</th>";
tg+="<td><select style=width:100%;background-color:cyan; id='gplayer" + jhow + "'><option value='06'>[6] Knockout value ...</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option></select></td><td><div id='score" + jhow + "'>Score: 0/0</div></td>";
}
document.getElementById('header').innerHTML=theader + th;
document.getElementById('game').innerHTML=tgame + tg;
}
}
</script>
<style>
td { text-align: center; vertical-align: top; }
h4 { background-color: lightblue; font-size: 26px; text-align: center; width: 50px; height: 50px; padding: 10px 10px 10px 10px; border: 5px solid black; }
.six { padding-top: 2px; padding-bottom: 18px; }
</style>
</head>
<body onload="checkt();">
<h1><div id=divword style=display:inline-block;>Knockout 👊</div> Dice 🎲🎲 Game for <div id='dnum' style='display:inline-block;'><select style='display:inline-block;' onchange='fixinstone(this.value);' id='snum'><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option></select></div> <span id=sgwta style=opacity:1.0;><input onchange="document.getElementById('sgwta').style.opacity='' + eval(1.1 - eval('' + document.getElementById('sgwta').style.opacity));" style=display:inline-block;opacity:1.0; type=checkbox id=gwta checked></input>Winner Take All</span> Players 👥</h1>
<h3 id=myh3>RJM Programming <a target=_self href='/HTMLCSS/knockout_dice_game.html' title=Reload>-</a> March, 2018</h3>
<div style='display:none;'>
<h4 id="h1" class="one">․</h4>
<h4 id="h2" class="two">⁚</h4>
<h4 id="h3" class="three">…</h4>
<h4 id="h4" class="four">⁘</h4>
<h4 id="h5" class="five">⁙</h4>
<h4 id="h6" class="six">…<br>…</h4>
</div>
<table id=mytable style='width:100%;' border=20 cellpadding=5>
<tr id='header'><th><div id='dname1' contenteditable=true>Player 👤 1</div><br>Score</th><th>Knockout 👊 Choice</th><th id='tdr'>Two Dice 🎲🎲 Roll</th><th>Knockout 👊 Choice</th><th><div id='dname2' contenteditable=true>Player 👤 2</div><br>Score</th></tr>
<tr id='game'><td><div id='score1'>Score: 0/0</div></td><td><select style=width:100%;background-color:cyan; id='gplayer1'><option value='06'>[6] Knockout value ...</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option></select></td><td id='actiontd'><button style='width:100%;background-color:yellow;height:150px;border:7px solid red;' type='button' onclick='roll();' data-value='Roll the Dice for Each Player'>Roll the <br>Dice 🎲🎲 for <br>Each Player 👤</button></td><td><select style=width:100%;background-color:cyan; id='gplayer2'><option value='06'>[6] Knockout value ...</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option></select></td><td><div id='score2'>Score: 0/0</div></td></tr>
</table>
</body>
</html>