In the previous lesson of game development we made a multiplayer snake game in html5 and in this lesson we will make a cards game using javascript and html5 drag and drop functionality. Drag and drop a card with smaller number on the card with greater number and complete the cards pattern from 7 to 1 to make a king in the empty boxes below. Fill all the empty boxes with kings to win the game.
Read More About Html5 Drag And Drop Here
Html Code:
<div class="demo">
<b>Cards game in javascript</b><br /><br />
<div id="div1" class="card" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="each" id="bundle1_1" draggable="true" ondragstart="drag(event)" style="z-index:1;">
</div>
</div>
<div id="div2" class="card" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="each" id="bundle2_1" draggable="true" ondragstart="drag(event)" style="z-index:1;">
</div>
</div>
<div id="div3" class="card" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="each" id="bundle3_1" draggable="true" ondragstart="drag(event)" style="z-index:1;">
</div>
</div>
<div id="div4" class="card" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="each" id="bundle4_1" draggable="true" ondragstart="drag(event)" style="z-index:1;">
</div>
</div>
<div id="div5" class="card" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="each" id="bundle5_1" draggable="true" ondragstart="drag(event)" style="z-index:1;">
</div>
</div>
<div id="div6" class="card" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="each" id="bundle6_1" draggable="true" ondragstart="drag(event)" style="z-index:1;">
</div>
</div>
<div id="div7" class="card" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="each" id="bundle7_1" draggable="true" ondragstart="drag(event)" style="z-index:1;">
</div>
</div>
<div id="div8" class="card" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="each" id="bundle8_1" draggable="true" ondragstart="drag(event)" style="z-index:1;">
</div>
</div>
<div id="moves"></div>
<div id="kings">
<div id="king1" class="kings"></div>
<div id="king2" class="kings"></div>
<div id="king3" class="kings"></div>
<div id="king4" class="kings"></div>
<div id="king5" class="kings"></div>
<div id="king6" class="kings"></div>
<div id="king7" class="kings"></div>
<div id="king8" class="kings"></div>
</div>
</div>
Css Code:
.card {
width:74px;
height:104px;
border:3px solid #FFFFFF;
border-radius:10px;
float:left;
margin-left:10px;
}
.each{
width:70px;
height:100px;
background:white;
border:2px solid #000000;
border-radius:10px;
font-weight:bold;
font-size:17px;
}
.kings{
width:54px;
height:74px;
border:1px solid red;
border-radius:10px;
float:left;
margin-left:10px;
}
#kings{
margin-top:400px;
overflow:hidden;
width:800px;
padding-left:100px;
}
.demo{
width:900px;
}
#moves{
background:white;
border:1px solid #000000;
width:180px;
height:80px;
float:left;
margin-top:320px;
margin-left:300px;
margin-bottom:20px;
}
Javascript Code:
<script type="text/javascript">
var count = 0, done = 0;
function do_first(){
var moves;
var bundle1 = [];
var bundle1_1, bundle1_2, bundle1_3, bundle1_4, bundle1_5, bundle1_6, bundle1_7;
moves = document.getElementById('moves');
moves.innerHTML = "<b style = 'padding-left:50px;'>Moves "+count+"</b>";
bundle1[0] = random_numbr();
bundle1[1] = random_numbr2();
bundle1[2] = random_numbr3();
bundle1[3] = random_numbr4();
bundle1[4] = random_numbr5();
bundle1[5] = random_numbr6();
bundle1[6] = random_numbr7();
bundle1_1 = document.getElementById('bundle1_1');
bundle1_1.value = bundle1[0];
bundle1_1.innerHTML = bundle1[0]+"<div class='each' id='bundle1_2' draggable='true'
value='' ondragstart='drag(event)' style='z-index:2;margin-left:-2px;'></div>";
bundle1_2 = document.getElementById('bundle1_2');
bundle1_2.value = bundle1[1];
bundle1_2.innerHTML = bundle1[1]+"<div class='each' id='bundle1_3' draggable='true'
value='' ondragstart='drag(event)' style='z-index:3;margin-left:-2px;'></div>";
bundle1_3 = document.getElementById('bundle1_3');
bundle1_3.value = bundle1[2];
bundle1_3.innerHTML = bundle1[2]+"<div class='each' id='bundle1_4' draggable='true'
value='' ondragstart='drag(event)' style='z-index:4;margin-left:-2px;'></div>";
bundle1_4 = document.getElementById('bundle1_4');
bundle1_4.value = bundle1[3];
bundle1_4.innerHTML = bundle1[3]+"<div class='each' id='bundle1_5' draggable='true'
value='' ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle1_5 = document.getElementById('bundle1_5');
bundle1_5.value = bundle1[4];
bundle1_5.innerHTML = bundle1[4]+"<div class='each' id='bundle1_6' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle1_6 = document.getElementById('bundle1_6');
bundle1_6.value = bundle1[5];
bundle1_6.innerHTML = bundle1[5]+"<div class='each' id='bundle1_7' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle1_7 = document.getElementById('bundle1_7');
bundle1_7.value = bundle1[6];
bundle1_7.innerHTML = bundle1[6];
var bundle2 = [];
var bundle2_1, bundle2_2, bundle2_3, bundle2_4, bundle2_5, bundle2_6, bundle2_7;
var bundle2_top = 4;
bundle2[0] = random_numbr();
bundle2[1] = random_numbr2();
bundle2[2] = random_numbr3();
bundle2[3] = random_numbr4();
bundle2[4] = random_numbr5();
bundle2[5] = random_numbr6();
bundle2[6] = random_numbr7();
bundle2_1 = document.getElementById('bundle2_1');
bundle2_1.value = bundle2[0];
bundle2_1.innerHTML = bundle2[0]+"<div class='each' id='bundle2_2' draggable='true'
value='' ondragstart='drag(event)' style='z-index:2;margin-left:-2px;'></div>";
bundle2_2 = document.getElementById('bundle2_2');
bundle2_2.value = bundle2[1];
bundle2_2.innerHTML = bundle2[1]+"<div class='each' id='bundle2_3' draggable='true'
value='' ondragstart='drag(event)' style='z-index:3;margin-left:-2px;'></div>";
bundle2_3 = document.getElementById('bundle2_3');
bundle2_3.value = bundle2[2];
bundle2_3.innerHTML = bundle2[2]+"<div class='each' id='bundle2_4' draggable='true'
value='' ondragstart='drag(event)' style='z-index:4;margin-left:-2px;'></div>";
bundle2_4 = document.getElementById('bundle2_4');
bundle2_4.value = bundle2[3];
bundle2_4.innerHTML = bundle2[3]+"<div class='each' id='bundle2_5' draggable='true'
value='' ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle2_5 = document.getElementById('bundle2_5');
bundle2_5.value = bundle2[4];
bundle2_5.innerHTML = bundle2[4]+"<div class='each' id='bundle2_6' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle2_6 = document.getElementById('bundle2_6');
bundle2_6.value = bundle2[5];
bundle2_6.innerHTML = bundle2[5]+"<div class='each' id='bundle2_7' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle2_7 = document.getElementById('bundle2_7');
bundle2_7.value = bundle2[6];
bundle2_7.innerHTML = bundle2[6];
var bundle3 = [];
var bundle3_1, bundle3_2, bundle3_3, bundle3_4, bundle3_5, bundle3_6, bundle3_7;
var bundle3_top = 4;
bundle3[0] = random_numbr();
bundle3[1] = random_numbr2();
bundle3[2] = random_numbr3();
bundle3[3] = random_numbr4();
bundle3[4] = random_numbr5();
bundle3[5] = random_numbr6();
bundle3[6] = random_numbr7();
bundle3_1 = document.getElementById('bundle3_1');
bundle3_1.value = bundle3[0];
bundle3_1.innerHTML = bundle3[0]+"<div class='each' id='bundle3_2' draggable='true'
ondragstart='drag(event)' style='z-index:2;margin-left:-2px;'></div>";
bundle3_2 = document.getElementById('bundle3_2');
bundle3_2.value = bundle3[1];
bundle3_2.innerHTML = bundle3[1]+"<div class='each' id='bundle3_3' draggable='true'
ondragstart='drag(event)' style='z-index:3;margin-left:-2px;'></div>";
bundle3_3 = document.getElementById('bundle3_3');
bundle3_3.value = bundle3[2];
bundle3_3.innerHTML = bundle3[2]+"<div class='each' id='bundle3_4' draggable='true'
ondragstart='drag(event)' style='z-index:4;margin-left:-2px;'></div>";
bundle3_4 = document.getElementById('bundle3_4');
bundle3_4.value = bundle3[3];
bundle3_4.innerHTML = bundle3[3]+"<div class='each' id='bundle3_5' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle3_5 = document.getElementById('bundle3_5');
bundle3_5.value = bundle3[4];
bundle3_5.innerHTML = bundle3[4]+"<div class='each' id='bundle3_6' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle3_6 = document.getElementById('bundle3_6');
bundle3_6.value = bundle3[5];
bundle3_6.innerHTML = bundle3[5]+"<div class='each' id='bundle3_7' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle3_7 = document.getElementById('bundle3_7');
bundle3_7.value = bundle3[6];
bundle3_7.innerHTML = bundle3[6];
var bundle4 = [];
var bundle4_1, bundle4_2, bundle4_3, bundle4_4, bundle4_5, bundle4_6, bundle4_7;
var bundle4_top = 4;
bundle4[0] = random_numbr();
bundle4[1] = random_numbr2();
bundle4[2] = random_numbr3();
bundle4[3] = random_numbr4();
bundle4[4] = random_numbr5();
bundle4[5] = random_numbr6();
bundle4[6] = random_numbr7();
bundle4_1 = document.getElementById('bundle4_1');
bundle4_1.value = bundle4[0];
bundle4_1.innerHTML = bundle4[0]+"<div class='each' id='bundle4_2' draggable='true'
ondragstart='drag(event)' style='z-index:2;margin-left:-2px;'></div>";
bundle4_2 = document.getElementById('bundle4_2');
bundle4_2.value = bundle4[1];
bundle4_2.innerHTML = bundle4[1]+"<div class='each' id='bundle4_3' draggable='true'
ondragstart='drag(event)' style='z-index:3;margin-left:-2px;'></div>";
bundle4_3 = document.getElementById('bundle4_3');
bundle4_3.value = bundle4[2];
bundle4_3.innerHTML = bundle4[2]+"<div class='each' id='bundle4_4' draggable='true'
ondragstart='drag(event)' style='z-index:4;margin-left:-2px;'></div>";
bundle4_4 = document.getElementById('bundle4_4');
bundle4_4.value = bundle4[3];
bundle4_4.innerHTML = bundle4[3]+"<div class='each' id='bundle4_5' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle4_5 = document.getElementById('bundle4_5');
bundle4_5.value = bundle4[4];
bundle4_5.innerHTML = bundle4[4]+"<div class='each' id='bundle4_6' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle4_6 = document.getElementById('bundle4_6');
bundle4_6.value = bundle4[5];
bundle4_6.innerHTML = bundle4[5]+"<div class='each' id='bundle4_7' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle4_7 = document.getElementById('bundle4_7');
bundle4_7.value = bundle4[6];
bundle4_7.innerHTML = bundle4[6];
var bundle5 = [];
var bundle5_1, bundle5_2, bundle5_3, bundle5_4, bundle5_5, bundle5_6, bundle5_7;
var bundle5_top = 4;
bundle5[0] = random_numbr();
bundle5[1] = random_numbr2();
bundle5[2] = random_numbr3();
bundle5[3] = random_numbr4();
bundle5[4] = random_numbr5();
bundle5[5] = random_numbr6();
bundle5[6] = random_numbr7();
bundle5_1 = document.getElementById('bundle5_1');
bundle5_1.value = bundle5[0];
bundle5_1.innerHTML = bundle5[0]+"<div class='each' id='bundle5_2' draggable='true'
ondragstart='drag(event)' style='z-index:2;margin-left:-2px;'></div>";
bundle5_2 = document.getElementById('bundle5_2');
bundle5_2.value = bundle5[1];
bundle5_2.innerHTML = bundle5[1]+"<div class='each' id='bundle5_3' draggable='true'
ondragstart='drag(event)' style='z-index:3;margin-left:-2px;'></div>";
bundle5_3 = document.getElementById('bundle5_3');
bundle5_3.value = bundle5[2];
bundle5_3.innerHTML = bundle5[2]+"<div class='each' id='bundle5_4' draggable='true'
ondragstart='drag(event)' style='z-index:4;margin-left:-2px;'></div>";
bundle5_4 = document.getElementById('bundle5_4');
bundle5_4.value = bundle5[3];
bundle5_4.innerHTML = bundle5[3]+"<div class='each' id='bundle5_5' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle5_5 = document.getElementById('bundle5_5');
bundle5_5.value = bundle5[4];
bundle5_5.innerHTML = bundle5[4]+"<div class='each' id='bundle5_6' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle5_6 = document.getElementById('bundle5_6');
bundle5_6.value = bundle5[5];
bundle5_6.innerHTML = bundle5[5]+"<div class='each' id='bundle5_7' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle5_7 = document.getElementById('bundle5_7');
bundle5_7.value = bundle5[6];
bundle5_7.innerHTML = bundle5[6];
var bundle6 = [];
var bundle6_1, bundle6_2, bundle6_3, bundle6_4, bundle6_5, bundle6_6, bundle6_7;
var bundle6_top;
bundle6[0] = random_numbr();
bundle6[1] = random_numbr2();
bundle6[2] = random_numbr3();
bundle6[3] = random_numbr4();
bundle6[4] = random_numbr5();
bundle6[5] = random_numbr6();
bundle6[6] = random_numbr7();
bundle6_1 = document.getElementById('bundle6_1');
bundle6_1.value = bundle6[0];
bundle6_1.innerHTML = bundle6[0]+"<div class='each' id='bundle6_2' draggable='true'
ondragstart='drag(event)' style='z-index:2;margin-left:-2px;'></div>";
bundle6_2 = document.getElementById('bundle6_2');
bundle6_2.value = bundle6[1];
bundle6_2.innerHTML = bundle6[1]+"<div class='each' id='bundle6_3' draggable='true'
ondragstart='drag(event)' style='z-index:3;margin-left:-2px;'></div>";
bundle6_3 = document.getElementById('bundle6_3');
bundle6_3.value = bundle6[2];
bundle6_3.innerHTML = bundle6[2]+"<div class='each' id='bundle6_4' draggable='true'
ondragstart='drag(event)' style='z-index:4;margin-left:-2px;'></div>";
bundle6_4 = document.getElementById('bundle6_4');
bundle6_4.value = bundle6[3];
bundle6_4.innerHTML = bundle6[3]+"<div class='each' id='bundle6_5' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle6_5 = document.getElementById('bundle6_5');
bundle6_5.value = bundle6[4];
bundle6_5.innerHTML = bundle6[4]+"<div class='each' id='bundle6_6' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle6_6 = document.getElementById('bundle6_6');
bundle6_6.value = bundle6[5];
bundle6_6.innerHTML = bundle6[5]+"<div class='each' id='bundle6_7' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle6_7 = document.getElementById('bundle6_7');
bundle6_7.value = bundle6[6];
bundle6_7.innerHTML = bundle6[6];
var bundle7 = [];
var bundle7_1, bundle7_2, bundle7_3, bundle7_4, bundle7_5, bundle7_6, bundle7_7;
var bundle7_top;
bundle7[0] = random_numbr();
bundle7[1] = random_numbr2();
bundle7[2] = random_numbr3();
bundle7[3] = random_numbr4();
bundle7[4] = random_numbr5();
bundle7[5] = random_numbr6();
bundle7[6] = random_numbr7();
bundle7_1 = document.getElementById('bundle7_1');
bundle7_1.value = bundle7[0];
bundle7_1.innerHTML = bundle7[0]+"<div class='each' id='bundle7_2' draggable='true'
ondragstart='drag(event)' style='z-index:2;margin-left:-2px;'></div>";
bundle7_2 = document.getElementById('bundle7_2');
bundle7_2.value = bundle7[1];
bundle7_2.innerHTML = bundle7[1]+"<div class='each' id='bundle7_3' draggable='true'
ondragstart='drag(event)' style='z-index:3;margin-left:-2px;'></div>";
bundle7_3 = document.getElementById('bundle7_3');
bundle7_3.value = bundle7[2];
bundle7_3.innerHTML = bundle7[2]+"<div class='each' id='bundle7_4' draggable='true'
ondragstart='drag(event)' style='z-index:4;margin-left:-2px;'></div>";
bundle7_4 = document.getElementById('bundle7_4');
bundle7_4.value = bundle7[3];
bundle7_4.innerHTML = bundle7[3]+"<div class='each' id='bundle7_5' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle7_5 = document.getElementById('bundle7_5');
bundle7_5.value = bundle7[4];
bundle7_5.innerHTML = bundle7[4]+"<div class='each' id='bundle7_6' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle7_6 = document.getElementById('bundle7_6');
bundle7_6.value = bundle7[5];
bundle7_6.innerHTML = bundle7[5]+"<div class='each' id='bundle7_7' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle7_7 = document.getElementById('bundle7_7');
bundle7_7.value = bundle7[6];
bundle7_7.innerHTML = bundle7[6];
var bundle8 = [];
var bundle8_1, bundle8_2, bundle8_3, bundle8_4, bundle8_5, bundle8_6, bundle8_7;
var bundle8_top;
bundle8[0] = random_numbr();
bundle8[1] = random_numbr2();
bundle8[2] = random_numbr3();
bundle8[3] = random_numbr4();
bundle8[4] = random_numbr5();
bundle8[5] = random_numbr6();
bundle8[6] = random_numbr7();
bundle8_1 = document.getElementById('bundle8_1');
bundle8_1.value = bundle8[0];
bundle8_1.innerHTML = bundle8[0]+"<div class='each' id='bundle8_2' draggable='true'
ondragstart='drag(event)' style='z-index:2;margin-left:-2px;'></div>";
bundle8_2 = document.getElementById('bundle8_2');
bundle8_2.value = bundle8[1];
bundle8_2.innerHTML = bundle8[1]+"<div class='each' id='bundle8_3' draggable='true'
ondragstart='drag(event)' style='z-index:3;margin-left:-2px;'></div>";
bundle8_3 = document.getElementById('bundle8_3');
bundle8_3.value = bundle8[2];
bundle8_3.innerHTML = bundle8[2]+"<div class='each' id='bundle8_4' draggable='true'
ondragstart='drag(event)' style='z-index:4;margin-left:-2px;'></div>";
bundle8_4 = document.getElementById('bundle8_4');
bundle8_4.value = bundle8[3];
bundle8_4.innerHTML = bundle8[3]+"<div class='each' id='bundle8_5' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle8_5 = document.getElementById('bundle8_5');
bundle8_5.value = bundle8[4];
bundle8_5.innerHTML = bundle8[4]+"<div class='each' id='bundle8_6' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle8_6 = document.getElementById('bundle8_6');
bundle8_6.value = bundle8[5];
bundle8_6.innerHTML = bundle8[5]+"<div class='each' id='bundle8_7' draggable='true'
ondragstart='drag(event)' style='z-index:5;margin-left:-2px;'></div>";
bundle8_7 = document.getElementById('bundle8_7');
bundle8_7.value = bundle8[6];
bundle8_7.innerHTML = bundle8[6];
}
window.addEventListener("load",do_first,false);
function random_numbr(){
a = Math.floor((Math.random()*7)+1);
if(a == "NULL"){
random_numbr();
}
if(a != "NULL"){
return a;
}
}
function random_numbr2(){
b = Math.floor((Math.random()*7)+1);
if(b == a){
random_numbr2();
}
if(b == "NULL"){
random_numbr2();
}
if(b != a){
return b;
}
}
function random_numbr3(){
c = Math.floor((Math.random()*7)+1);
if(c == a || c == b){
random_numbr3();
}
if(c == "NULL"){
random_numbr3();
}
if(c != a && c!= b){
return c;
}
}
function random_numbr4(){
d = Math.floor((Math.random()*7)+1);
if(d == a || d == b || d == c){
random_numbr4();
}
if(d == "NULL"){
random_numbr4();
}
if(d != a && d!= b && d!= c){
return d;
}
}
function random_numbr5(){
e = Math.floor((Math.random()*7)+1);
if(e == a || e == b || e == c || e == d){
random_numbr5();
}
if(e == "NULL"){
random_numbr5();
}
if(e != a && e!= b && e!= c && e!= d){
return e;
}
}
function random_numbr6(){
f = Math.floor((Math.random()*7)+1);
if(f == a || f == b || f == c || f == d || f == e){
random_numbr6();
}
if(f == "NULL"){
random_numbr6();
}
if(f != a && f!= b && f!= c && f!= d && f!= e){
return f;
}
}
function random_numbr7(){
g = Math.floor((Math.random()*7)+1);
if(g == a || g == b || g == c || g == d || g == e || g == f){
random_numbr7();
}
if(g == "NULL"){
random_numbr7();
}
if(g != a && g!= b && g!= c && g!= d && g!= e && g != f){
return g;
}
}
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
var data = ev.target;
var value = data.value;
data = data.lastChild;
var a = allow(data, value);
if(a){
ev.dataTransfer.setData("Text",ev.target.id);
}else{
data.draggable= 'false';
return false;
}
}
function allow(data, value){
var value2 = data.value;
if(value2 == value -1){
if(data.lastChild){
data = data.lastChild;
value = value2;
return allow(data, value);
}
}else if(!data.lastChild){
return true;
}else if(value2 != value -1){
return false;
}
}
function drop(ev){
ev.preventDefault();
var value, value2;
var data=ev.dataTransfer.getData("Text");
value = document.getElementById(data).value;
value2 = ev.target.value;
if(ev.target.id == "div1" || ev.target.id == "div2" || ev.target.id == "div3" ||
ev.target.id == "div4" || ev.target.id == "div5" || ev.target.id == "div6" ||
ev.target.id == "div7" || ev.target.id == "div8"){
var moves;
count++;
moves = document.getElementById('moves');
moves.innerHTML = "<b style = 'padding-left:50px;'>Moves "+count+"</b>";
ev.target.appendChild(document.getElementById(data));
}if(value2 == value+1){
var moves;
count++;
moves = document.getElementById('moves');
moves.innerHTML = "<b style = 'padding-left:50px;'>Moves "+count+"</b>";
ev.target.appendChild(document.getElementById(data));
data = document.getElementById(data).parentNode;
parent(data, value);
}else{
return false;
}
}
function parent(data, value){
if(data.value != 7 && data.value == value+1){
value = value +1;
data = document.getElementById(data.id).parentNode;
parent(data, value);
}else if(data.value == 7){
var five = data;
value = 6;
data = data.lastChild;
child(data, value, five);
}else{
return false;
}
}
function child(data, value, five){
if(data.value != 1 && data.value == value){
value = value -1;
data = data.lastChild;
child(data, value, five);
}else if(data.value == 1 && data.value == value){
done++;
if(done == 1){
var king = document.getElementById('king1');
king.innerHTML = "<div class='each_king'>KING</div>";
}else if(done == 2){
var king = document.getElementById('king2');
king.innerHTML = "<div class='each_king'>KING</div>";
}else if(done == 3){
var king = document.getElementById('king3');
king.innerHTML = "<div class='each_king'>KING</div>";
}else if(done == 4){
var king = document.getElementById('king4');
king.innerHTML = "<div class='each_king'>KING</div>";
}else if(done == 5){
var king = document.getElementById('king5');
king.innerHTML = "<div class='each_king'>KING</div>";
}else if(done == 6){
var king = document.getElementById('king6');
king.innerHTML = "<div class='each_king'>KING</div>";
}else if(done == 7){
var king = document.getElementById('king7');
king.innerHTML = "<div class='each_king'>KING</div>";
}else if(done == 8){
var king = document.getElementById('king8');
king.innerHTML = "<div class='each_king'>KING</div>";
alert('Congratulations you won!!!!');
}
var parent = five.parentNode;
parent.removeChild(parent.lastChild);
five.style.display = "none";
}else{
return false;
}
}
</script>
No comments:
Post a Comment