topical media & game development

talk show tell print

game-javascript-casual-snakes-and-ladders-game.htm / htm



  
  <!-- THREE STEPS TO INSTALL SNAKES AND LADDERS GAME:
  
    1.  Copy the coding into the HEAD of your HTML document
  
    2.  Add the onLoad event handler into the BODY tag
  
    3.  Put the last coding into the BODY of your HTML document  -->
  
  <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
  
  <HEAD>
  
  <!-- This script and many more are available free online at -->
  
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- Original:  John Chacko -->
  
  <!-- Web Site:  http://www.johns221b.50megs.com -->
  
  <SCRIPT LANGUAGE="JavaScript">
  
  status=" Made by JOHN CHACKO"
  
  nam=new Array();
  
  var player_id=1,random_num=0
  
  var coin1_pos=0, coin2_pos=0,start1=0,start2=0
  
  function start() {
  
  player_id=1
  
  random_num=0
  
  coin1_pos=0
  
  coin2_pos=0
  
  start1=0
  
  start2=0
  
          
  
  nam[1]=L1.style;nam[2]=L2.style;nam[3]=L3.style;nam[4]=L4.style;
  
  nam[5]=L5.style;nam[6]=L6.style;nam[7]=L7.style;nam[8]=L8.style
  
  nam[9]=L9.style;nam[10]=L10.style;nam[11]=L11.style;nam[12]=L12.style;
  
  nam[13]=L13.style;nam[14]=L14.style;nam[15]=L15.style
  
  nam[16]=L16.style;nam[17]=L17.style;nam[18]=L18.style;nam[19]=L19.style;nam[20]=L20.style
  
  nam[21]=L21.style;nam[22]=L22.style;nam[23]=L23.style;nam[24]=L24.style;nam[25]=L25.style
  
  cn1.style.top=315
  
  cn1.style.left=440
  
  cn2.style.top=315
  
  cn2.style.left=410
  
  d1.style.visibility="hidden"
  
  d2.style.visibility="hidden"
  
  d3.style.visibility="hidden"
  
  d4.style.visibility="hidden"
  
  pl1.style.visibility="visible"
  
  btn1.style.visibility="visible"
  
  frm0.txt0.enabled=false
  
  frm0.txt0.value=""
  
          }
  
  function play()
  
  {
  
  get_random()
  
  if(random_num==1)
  
  {
  
  d1.style.visibility="visible"
  
  d2.style.visibility="Hidden"
  
  d3.style.visibility="Hidden"
  
  d4.style.visibility="Hidden"
  
  }
  
  if(random_num==2)
  
  {
  
  d2.style.visibility="visible"
  
  d1.style.visibility="Hidden"
  
  d3.style.visibility="Hidden"
  
  d4.style.visibility="Hidden"
  
  }
  
  if(random_num==3)
  
  {
  
  d3.style.visibility="visible"
  
  d2.style.visibility="Hidden"
  
  d1.style.visibility="Hidden"
  
  d4.style.visibility="Hidden"
  
  }
  
  if(random_num==4)
  
  {
  
  d4.style.visibility="visible"
  
  d2.style.visibility="Hidden"
  
  d3.style.visibility="Hidden"
  
  d1.style.visibility="Hidden"
  
  }
  
  move_coin()
  
  change_player()
  
  if(coin1_pos==25)
  
  {
  
  alert("Player -1 won the match        , Play Again")
  
  pl2.style.visibility="hidden"
  
  btn2.style.visibility="hidden"
  
  start()
  
  }
  
  if(coin2_pos==25)
  
  {
  
  alert("Player -2 won the match       , Play Again")
  
  pl2.style.visibility="hidden"
  
  btn2.style.visibility="hidden"
  
  start()
  
  }
  
  }
  
  function get_random()
  
  {
  
  random_num = (Math.round((Math.random()*3)+1))
  
  }
  
  function change_player()
  
  {
  
  if(player_id==1)
  
  {
  
  player_id=2
  
  pl2.style.visibility="visible"
  
  btn2.style.visibility="visible"
  
  pl1.style.visibility="hidden"
  
  btn1.style.visibility="hidden"
  
  }
  
  else if(player_id==2)
  
  {
  
  player_id=1
  
  pl1.style.visibility="visible"
  
  btn1.style.visibility="visible"
  
  pl2.style.visibility="hidden"
  
  btn2.style.visibility="hidden"
  
  }
  
  }
  
  function move_coin()
  
  {
  
  ms1.style.visibility="hidden"
  
  ms2.style.visibility="hidden"
  
  if(player_id==1)
  
  {        
  
          if(coin1_pos==0){
  
          if(random_num==1){
  
          start1=1}}
  
          if(start1==1) 
  
          {
  
                  
  
                  if((coin1_pos+random_num)<26)
  
                  {
  
                          frm0.txt0.value="Player -1  ---->  "+coin1_pos +" To "+(coin1_pos+random_num)
  
                          coin1_pos=coin1_pos+random_num
  
                          t=(parseInt(nam[coin1_pos].top))
  
                          l=(parseInt(nam[coin1_pos].left))
  
                          cn1.style.top=t+15
  
                          cn1.style.left=l+30
  
                          check_snake_ladder1()
  
                  }
  
          }
  
  }
  
  if(player_id==2)
  
  {        
  
          if(coin2_pos==0){
  
          if(random_num==1){
  
          start2=1}}
  
          if(start2==1) 
  
          {
  
                  
  
                  if((coin2_pos+random_num)<26)
  
                  {
  
                          frm0.txt0.value="Player -2  ---->  "+coin2_pos +" To "+(coin2_pos+random_num)
  
                          coin2_pos=coin2_pos+random_num
  
                          t=(parseInt(nam[coin2_pos].top))
  
                          l=(parseInt(nam[coin2_pos].left))
  
                          cn2.style.top=t-15
  
                          cn2.style.left=l+20
  
                          check_snake_ladder2()
  
                  }
  
          }
  
  }
  
  }
  
  function check_snake_ladder1()
  
  {
  
  if( coin1_pos==3)
  
  {
  
          frm0.txt0.value="Player -1  ---->  3  To 7"
  
          coin1_pos=7
  
          t=(parseInt(nam[coin1_pos].top))
  
          l=(parseInt(nam[coin1_pos].left))
  
          cn1.style.top=t+15
  
          cn1.style.left=l+30
  
  ms1.style.visibility="visible"
  
  }
  
  if( coin1_pos==14)
  
  {
  
          frm0.txt0.value="Player -1  ---->  14  To 18"
  
          coin1_pos=18
  
          t=(parseInt(nam[coin1_pos].top))
  
          l=(parseInt(nam[coin1_pos].left))
  
          cn1.style.top=t+15
  
          cn1.style.left=l+30
  
  ms1.style.visibility="visible"
  
  }
  
  if( coin1_pos==9)
  
  {
  
          frm0.txt0.value="Player -1  ---->  9  To 21"
  
          coin1_pos=21
  
          t=(parseInt(nam[coin1_pos].top))
  
          l=(parseInt(nam[coin1_pos].left))
  
          cn1.style.top=t+15
  
          cn1.style.left=l+30
  
  ms1.style.visibility="visible"
  
  }
  
  if( coin1_pos==19)
  
  {
  
          frm0.txt0.value="Player -1  ---->  19  To 22"
  
          coin1_pos=22
  
          t=(parseInt(nam[coin1_pos].top))
  
          l=(parseInt(nam[coin1_pos].left))
  
          cn1.style.top=t+15
  
          cn1.style.left=l+30
  
  ms1.style.visibility="visible"
  
  }
  
  if( coin1_pos==20)
  
  {
  
          frm0.txt0.value="Player -1  ---->  20  To 10"
  
          coin1_pos=10
  
          t=(parseInt(nam[coin1_pos].top))
  
          l=(parseInt(nam[coin1_pos].left))
  
          cn1.style.top=t+15
  
          cn1.style.left=l+30
  
  ms2.style.visibility="visible"
  
  }
  
  if( coin1_pos==13)
  
  {
  
          frm0.txt0.value="Player -1  ---->  13  To 8"
  
          coin1_pos=8
  
          t=(parseInt(nam[coin1_pos].top))
  
          l=(parseInt(nam[coin1_pos].left))
  
          cn1.style.top=t+15
  
          cn1.style.left=l+30
  
  ms2.style.visibility="visible"
  
  }
  
  if( coin1_pos==24)
  
  {
  
          frm0.txt0.value="Player -1  ---->  24  To 2"
  
          coin1_pos=2
  
          t=(parseInt(nam[coin1_pos].top))
  
          l=(parseInt(nam[coin1_pos].left))
  
          cn1.style.top=t+15
  
          cn1.style.left=l+30
  
  ms2.style.visibility="visible"
  
  }
  
  if( coin1_pos==16)
  
  {
  
          frm0.txt0.value="Player -1  ---->  16  To 6"
  
          coin1_pos=6
  
          t=(parseInt(nam[coin1_pos].top))
  
          l=(parseInt(nam[coin1_pos].left))
  
          cn1.style.top=t+15
  
          cn1.style.left=l+30
  
  ms2.style.visibility="visible"
  
  }
  
  }
  
  function check_snake_ladder2()
  
  {
  
  if( coin2_pos==3)
  
  {
  
          frm0.txt0.value="Player -2  ---->  3  To 7"
  
          coin2_pos=7
  
          t=(parseInt(nam[coin2_pos].top))
  
          l=(parseInt(nam[coin2_pos].left))
  
          cn2.style.top=t-15
  
          cn2.style.left=l+20
  
  ms1.style.visibility="visible"
  
  }
  
  if( coin2_pos==14)
  
  {
  
          frm0.txt0.value="Player -2  ---->  14  To 18"
  
          coin2_pos=18
  
          t=(parseInt(nam[coin2_pos].top))
  
          l=(parseInt(nam[coin2_pos].left))
  
          cn2.style.top=t-15
  
          cn2.style.left=l+20
  
  ms1.style.visibility="visible"
  
  }
  
  if( coin2_pos==9)
  
  {
  
          frm0.txt0.value="Player -2  ----> 9  To 21"
  
          coin2_pos=21
  
          t=(parseInt(nam[coin2_pos].top))
  
          l=(parseInt(nam[coin2_pos].left))
  
          cn2.style.top=t-15
  
          cn2.style.left=l+20
  
  ms1.style.visibility="visible"
  
  }
  
  if( coin2_pos==19)
  
  {
  
          frm0.txt0.value="Player -2  ---->  19  To 22"
  
          coin2_pos=22
  
          t=(parseInt(nam[coin2_pos].top))
  
          l=(parseInt(nam[coin2_pos].left))
  
          cn2.style.top=t-15
  
          cn2.style.left=l+20
  
  ms1.style.visibility="visible"
  
  }
  
  if( coin2_pos==20)
  
  {
  
          frm0.txt0.value="Player -2  ---->  20  To 10"
  
          coin2_pos=10
  
          t=(parseInt(nam[coin2_pos].top))
  
          l=(parseInt(nam[coin2_pos].left))
  
          cn2.style.top=t-15
  
          cn2.style.left=l+20
  
  ms2.style.visibility="visible"
  
  }
  
  if( coin2_pos==13)
  
  {
  
          frm0.txt0.value="Player -2  ---->  13  To 8"
  
          coin2_pos=8
  
          t=(parseInt(nam[coin2_pos].top))
  
          l=(parseInt(nam[coin2_pos].left))
  
          cn2.style.top=t-15
  
          cn2.style.left=l+20
  
  ms2.style.visibility="visible"
  
  }
  
  if( coin2_pos==24)
  
  {
  
          frm0.txt0.value="Player -2  ---->  24  To 2"
  
          coin2_pos=2
  
          t=(parseInt(nam[coin2_pos].top))
  
          l=(parseInt(nam[coin2_pos].left))
  
          cn2.style.top=t-15
  
          cn2.style.left=l+20
  
  ms2.style.visibility="visible"
  
  }
  
  if( coin2_pos==16)
  
  {
  
          frm0.txt0.value="Player -2  ----> 16  To 6"
  
          coin2_pos=6
  
          t=(parseInt(nam[coin2_pos].top))
  
          l=(parseInt(nam[coin2_pos].left))
  
          cn2.style.top=t-15
  
          cn2.style.left=l+20
  
  ms2.style.visibility="visible"
  
  }
  
  }
  
  </SCRIPT>
  
  </HEAD>
  
  <!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->
  
  <BODY onLoad="start()">
  
  <!-- STEP THREE: Copy this code into the BODY of your HTML document  -->
  
  <!-- This script and many more are available free online at -->
  
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- Original:  John Chacko -->
  
  <!-- Web Site:  http://www.johns221b.50megs.com -->
  
  <font color=blue size=+1>
  
  <DIV ID="B" STYLE="position:absolute; left:200px; top:70px; width:262px; 
  
  height:262px; background-color:blue;">
  
  </div>
  
  <DIV ID="L25" STYLE="position:absolute; left:202px; top:72px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center><font color=blue><b>25</b></center></font>
  
  </DIV>
  
  <DIV ID="L24" STYLE="position:absolute; left:254px;top:72px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>24</center>
  
  </DIV>
  
  <DIV ID="L23" STYLE="position:absolute; left:306px;top:72px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>23</center>
  
  </DIV>
  
  <DIV ID="L22" STYLE="position:absolute; left:358px;top:72px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>22</center>
  
  </DIV>
  
  <DIV ID="L21" STYLE="position:absolute; left:410px;top:72px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>21</center>
  
  </DIV>
  
  <DIV ID="L16" STYLE="position:absolute; left:202px; top:124px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>16</center>
  
  </DIV>
  
  <DIV ID="L17" STYLE="position:absolute; left:254px;top:124px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>17</center>
  
  </DIV>
  
  <DIV ID="L18" STYLE="position:absolute; left:306px;top:124px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>18</center>
  
  </DIV>
  
  <DIV ID="L19" STYLE="position:absolute; left:358px;top:124px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>19</center>
  
  </DIV>
  
  <DIV ID="L20" STYLE="position:absolute; left:410px;top:124px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>20</center>
  
  </DIV>
  
  <DIV ID="L15" STYLE="position:absolute; left:202px; top:176px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>15</center>
  
  </DIV>
  
  <DIV ID="L14" STYLE="position:absolute; left:254px;top:176px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>14</center>
  
  </DIV>
  
  <DIV ID="L13" STYLE="position:absolute; left:306px;top:176px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>13</center>
  
  </DIV>
  
  <DIV ID="L12" STYLE="position:absolute; left:358px;top:176px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>12</center>
  
  </DIV>
  
  <DIV ID="L11" STYLE="position:absolute; left:410px;top:176px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>11</center>
  
  </DIV>
  
  <DIV ID="L6" STYLE="position:absolute; left:202px; top:228px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>6</center>
  
  </DIV>
  
  <DIV ID="L7" STYLE="position:absolute; left:254px;top:228px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>7</center>
  
  </DIV>
  
  <DIV ID="L8" STYLE="position:absolute; left:306px;top:228px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>8</center>
  
  </DIV>
  
  <DIV ID="L9" STYLE="position:absolute; left:358px;top:228px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>9</center>
  
  </DIV>
  
  <DIV ID="L10" STYLE="position:absolute; left:410px;top:228px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>10</center>
  
  </DIV>
  
  <DIV ID="L5" STYLE="position:absolute; left:202px; top:280px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>5</center>
  
  </DIV>
  
  <DIV ID="L4" STYLE="position:absolute; left:254px;top:280px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>4</center>
  
  </DIV>
  
  <DIV ID="L3" STYLE="position:absolute; left:306px;top:280px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>3</center>
  
  </DIV>
  
  <DIV ID="L2" STYLE="position:absolute; left:358px;top:280px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>2</center>
  
  </DIV>
  
  <DIV ID="L1" STYLE="position:absolute; left:410px;top:280px; width:50px; 
  
  height:50px; background-color:pink;"><br>
  
  <b><center>1</center>
  
  </DIV>
  
  <DIV ID="sn1" STYLE="position:absolute; left:255px;top:88px; width:50px; 
  
  height:50px;"><br>
  
  <b><center><img src="snake1.gif"></img></center>
  
  </DIV>
  
  <DIV ID="ld1" STYLE="position:absolute; left:335px;top:35px; width:50px; 
  
  height:50px;"><br>
  
  <b><center><img src="lad1.gif"></img></center>
  
  </DIV>
  
  <DIV ID="sn2" STYLE="position:absolute; left:412px;top:120px; width:50px; 
  
  height:50px;"><br>
  
  <b><center><img src="snake2.gif"></img></center>
  
  </DIV>
  
  <DIV ID="sn3" STYLE="position:absolute; left:190px;top:130px; width:50px; 
  
  height:50px;"><br>
  
  <b><center><img src="snake3.gif"></img></center>
  
  </DIV>
  
  <DIV ID="lad2" STYLE="position:absolute; left:288px;top:95px; width:50px; 
  
  height:50px;"><br>
  
  <b><center><img src="lad2.gif"></img></center>
  
  </DIV>
  
  <DIV ID="lad3" STYLE="position:absolute; left:275px;top:220px; width:50px; 
  
  height:50px;"><br>
  
  <b><center><img src="lad3.gif"></img></center>
  
  </DIv>
  
  <DIV ID="lad4" STYLE="position:absolute; left:355px;top:60px; width:50px; 
  
  height:50px;"><br>
  
  <b><center><img src="lad4.gif"></img></center>
  
  </DIv>
  
  <DIV ID="sn4" STYLE="position:absolute; left:320px;top:155px; width:50px; 
  
  height:50px;"><br>
  
  <b><center><img src="snake4.gif"></img></center>
  
  </DIv>
  
  <DIV ID="cn1" STYLE="position:absolute; left:440px;top:315px; width:25px; 
  
  height:50px;"><br>
  
  <b><center><img src="coin1.gif"></img></center>
  
  </DIv>
  
  <DIV ID="cn2" STYLE="position:absolute; left:410px;top:315px; width:50px; 
  
  height:50px;"><br>
  
  <b><center><img src="coin2.gif"></img></center>
  
  </DIv>
  
  <DIV ID="pl1" STYLE="position:absolute; left:475px;top:205px; width:100px; 
  
  height:50px;"><br><font color="black">
  
  <b><center><img src="coin1.gif">
  
  </img>
  
  Player - 1
  
  <br>
  
  </center>
  
  </DIV>
  
  <DIV ID="btn1" STYLE="position:absolute; left:580px;top:205px; width:50px; 
  
  height:50px;"><br>
  
  <b><center><form name="frm1">
  
  <input type="button" value=" Roll Dice" name="bt1" onClick="play()">
  
  </form>
  
  </img></center>
  
  </DIV>
  
  <DIV ID="pl2" STYLE="position:absolute; left:475px;top:290px; width:100px; visibility:hidden;
  
  height:50px;"><br><font color="black">
  
  <b><center><img src="coin2.gif">
  
  </img>
  
  Player - 2
  
  <br>
  
  </center>
  
  </DIV>
  
  <DIV ID="btn2" STYLE="position:absolute; left:580px;top:290px; width:50px; visibility:hidden;
  
  height:50px;"><br>
  
  <b><center><form name="frm1">
  
  <input type="button" value=" Roll Dice" name="bt1" onClick="play()">
  
  </form>
  
  </img></center>
  
  </DIV>
  
  <DIV ID="mv" STYLE="position:absolute; left:520px;top:350px; width:50px;
  
  height:50px;"><br>
  
  <b><center><form name="frm0">
  
  <input type="text" value=" " name="txt0">
  
  </form>
  
  </img></center>
  
  </DIV>
  
  <DIV ID="b_ms" STYLE="position:absolute; left:475px;top:50px; width:350px; 
  
  height:50px;"><br><font color="blue" size=2  face="times new roman">
  
  <center><b><u>How to Play</u></b></center><font color="red" size=3  face="times new roman">
  
  <br>There are two small colored coins.<br>
  
  One for each player.<br>
  
  Player will have to click the button<br> to get a random number from 1 to 4.<br>
  
  Coin will  move to the  corresponding column.<br>
  
  <font color=TEAL>
  
  Player must get '1' to start the game.<br>
  
  </DIV>
  
  <font color="red">
  
  <DIV ID="ms1" STYLE="position:absolute; left:520px;top:325px; width:150px;visibility:hidden;
  
  height:50px;"><br>
  
  <b><center> Up-<font color=NAVY>Climb by ladder
  
  </center><font color="red">
  
  </DIV>
  
  <DIV ID="ms2" STYLE="position:absolute; left:520px;top:325px; width:200px;visibility:hidden;
  
  height:50px;"><br>
  
  <b><center> Down- <font color=NAVY>Gulped by snake
  
  </center>
  
  </DIV>
  
  <DIV ID="d1" STYLE="position:absolute; left:575px;top:245px; width:50px;visibility:hidden; 
  
  height:50px;"><br>
  
  <b><center>1 <img src="dice1.gif"></img>
  
  </center>
  
  </DIV>
  
  <DIV ID="d2" STYLE="position:absolute; left:575px;top:245px; width:50px;visibility:hidden;
  
  height:50px;"><br>
  
  <b><center>2 <img src="dice2.gif"></img>
  
  </center>
  
  </DIV>
  
  <DIV ID="d3" STYLE="position:absolute; left:575px;top:245px; width:50px;visibility:hidden; 
  
  height:50px;"><br>
  
  <b><center>3 <img src="dice3.gif"></img>
  
  </center>
  
  </DIV>
  
  <DIV ID="d4" STYLE="position:absolute; left:575px;top:245px; width:50px;visibility:hidden; 
  
  height:50px;"><br>
  
  <b><center>4 <img src="dice4.gif"></img>
  
  </center>
  
  </DIV>
  
  <p><center>
  
  <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
  
  by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
  
  </center><p>
  
  <!-- Script Size:  18.32 KB -->
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.