Untuk luas dan lebar permainan bisa diatur pada tag style dengan id class area --> #area, pada id area terdapat width untuk mengatur lebar dan height untuk mengatur panjang.
Kode Program :
<script>
// Function Element
function $_E(a) {
el = document.getElementById(a);
rec = el.getBoundingClientRect();
// Element Width - Height
function width(b) { el.style.width = b; return rec.width; };
function height(b) { el.style.height = b; return rec.height; };
// Element Left - Top - Right - Bottom
function left(b) { el.style.left = b; return rec.left; };
function top(b) { el.style.top = b; return rec.top; };
function right(b) { el.style.right = b; return rec.right; };
function bottom(b) { el.style.bottom = b; return rec.bottom; };
function html(b) { el.innerHTML = b; return el.innerHTML; }
// Return
return {
width: width,
height: height,
left: left,
top: top,
right: right,
bottom: bottom,
html: html
}
};
// Function Random
function $_R() {
function dec(a = 1) { return Math.random() * a; }
function bool() { return Math.random(); }
return {
dec: dec
}
}
</script>
<style>
#area {
width: 100%; height: 500px;
font-family: arial, sans-serif;
}
/* Background */
.bg-red { background-color: #f55; }
.bg-green { background-color: #0a5; }
.bg-blue { background-color: #55f; }
.bg-purple { background-color: #a5f; }
.bg-magenta { background-color: #f0a; }
.bg-yellow { background-color: #fc0; }
.bg-orange { background-color: #ea0; }
.bg-white { background-color: #fff; }
.bg-black { background-color: #000; }
.bg-gray { background-color: #555; }
/* Display */
.d-table { display: table; }
.d-flex { display: flex; }
/* Position */
.p-abs { position: absolute; }
.p-fix { position: fixed; }
.p-rel { position: relative; }
/* Font */
.fn-verybig { font-size: 58pt; }
.fn-big { font-size: 32pt; }
.fn-large { font-size: 18pt; }
.fn-normal { font-size: 12pt; }
.fn-small { font-size: 8pt; }
.cl-white { color: #fff; }
.cl-black { color: #000; }
.o_bar {
width: 75%;
height: 10px;
}
button {
width: 50%;
padding: 10px;
border: 0;
border-radius: 10px;
}
</style>
<div id="area">
<!-- Jangan Hapus Tag ini -->
</div>
<script>
var v_field = '';
var score = 0;
var play = 0;
function start() {
loading();
}
function loading() {
v_field = '<table class="bg-black cl-white" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">' +
'<tr valign="middle" align="center">' +
'<td width="100%" height="100%">' +
'<label class="fn-large">MH Creative</label><br>' +
'<label class="fn-small">Developer</label><br><br>' +
'<div id="o_bar" class="o_bar bg-white"></div>'
'</td>' +
'</tr>' +
'</table>'
;
$_E('area').html(v_field);
var o_w = $_E('o_bar').width();
var o_time = setInterval(function() {
if(o_w < 0) {
$_E('o_bar').width(0);
clearInterval(o_time);
mainmenu();
}
else {
o_w -= 2;
$_E('o_bar').width(o_w);
}
}, 10);
}
function mainmenu() {
v_field = '<table class="bg-black cl-white" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">' +
'<tr valign="middle" align="center">' +
'<td width="100%" height="100%">' +
'<label class="fn-large">Mini Game </label>' +
'<label class="fn-big">20</label><br><br>' +
'<button class="bg-purple cl-white" onclick="javascript: startgame();">Mulai</button><br><br>' +
'<button class="bg-purple cl-white" onclick="javascript: insgame();">Cara Main</button><br><br>' +
'</td>' +
'</tr>' +
'</table>'
;
$_E('area').html(v_field);
}
function startgame() { // Reset Data
score = 0;
pos = 1;
var o_first = $_R().dec();
o_f_text = '';
if(o_first > 0.5) {
o_f_text = 'Kamu mendapat giliran Pertama';
play = 1;
}
else {
o_f_text = 'Kamu mendapat giliran Kedua';
play = 0;
enemyturn();
}
v_field = '<table class="bg-black cl-white" width="100%" height="100%" border="0" cellspacing="5" cellpadding="0">' +
'<tr valign="middle" align="center">' +
'<td class="bg-gray fn-verybig" colspan="4" width="100%" height="100%">' +
'<div id="o_score">' + score + '</div>' +
'</td>' +
'</tr>' +
'<tr valign="middle" align="center">' +
'<td class="bg-black" colspan="4" width="100%" height="30">' +
'<div id="o_text">' + o_f_text + '</div>' +
'</td>' +
'</tr>' +
'<tr class="bg-blue cl-white" valign="middle" align="center">' +
'<td width="25%" height="60" onclick="javascript: playeraction(1);">' +
'1' +
'</td>' +
'<td width="25%" height="60" onclick="javascript: playeraction(2);">' +
'2' +
'</td>' +
'<td class="bg-orange" width="25%" height="60" onclick="javascript: playeraction(3);">' +
'Menyerah' +
'</td>' +
'<td class="bg-red" width="25%" height="60" onclick="javascript: playeraction(0);">' +
'Keluar' +
'</td>' +
'</tr>' +
'</table>'
;
$_E('area').html(v_field);
o_time = setInterval(function() { $_E('o_score').html(score);
$_E('o_text').html(o_f_text);
}, 250);
}
function insgame() {
v_field = '<table class="bg-black cl-white" width="100%" height="100%" border="0" cellspacing="5" cellpadding="0">' +
'<tr valign="middle" align="center">' +
'<td width="100%" height="100%">' +
'<label class="fn-big">Cara Main :</label><br><br>' +
'<label class="fn-normal">Permainan dilakukan secara bergantian.<br><br>Setiap pemain bisa menambahkan nilai 1 atau 2.<br><br>Yang berhasil menambahkan nilai menjadi 20, menang.</label><br><br>' +
'<button class="bg-red cl-white" onclick="javascript: mainmenu();">Kembali</button>' +
'</td>' +
'</tr>' +
'</table>'
;
$_E('area').html(v_field);
}
function exitgame() {
window.open('', '_self').close();
}
function playerstatus(a) {
var p_status = '';
if(a == 1) { p_status = 'You Win'; }
else { p_status = 'You Lose'; }
// Reset Score
score = 0;
pos = 1;
v_field = '<table class="bg-orange cl-white" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">' +
'<tr valign="middle" align="center">' +
'<td class="fn-big" width="100%" height="100%">' +
'<label class="">' + p_status + '</label><br></br>' +
'<button class="bg-black cl-white fn-normal" onclick="javascript: startgame();">Mulai Lagi</button>' +
'</td>' +
'</tr>' +
'</table>'
;
$_E('area').html(v_field);
}
function playeraction(a) {
if(a == 0) {
clearInterval(o_time);
// Reset Score
score = 0;
// Main Menu
mainmenu();
}
else if(a == 3) {
clearInterval(o_time);
playerstatus(0);
}
if(play == 1) {
score += a;
play = 0;
if(score < 20) { enemyturn();
}
else {
playerstatus(1);
clearInterval(o_time);
}
}
}
function enemyturn() {
setTimeout(function(){ o_f_text = 'Thinking...'; }, 300);
setTimeout(function(){
var e_choose = $_R().dec();
if(e_choose > 0.5) { score += 2; o_f_text = 'Lawan Memilih 2'; }
else { score += 1; o_f_text = 'Lawan Memilih 1'; }
if(score >= 20) {
playerstatus(0);
clearInterval(o_time);
}
setTimeout(function(){ o_f_text = 'Giliran Anda!'; play = 1; }, 700);
}, 1500);
}
start();
</script>
EmoticonEmoticon