Ok so I’m in college and I’m taking my first web development class online. Unfortunate my teacher is awful. We have already “covered” html and some css (which I already knew) and done a bit of java such as creating a prompt. However, for the final I have to make a 2 player game with at least 30 spaces and dice (random number generator). More importantly our “learn javascript in 24 hours” book doesn’t cover this at all and my teacher is MIA like always. So, I have come to you all for help.
And this is the requirements for the project.
- Minimum Requirements for a C:
o 2 players
o 20 steps on the board
o Random number generator
o Game displays the location of each player on the board - Minimum Requirements for a B:
o Everything above plus
o Attractive user interface.
o 30 steps on the board
o Graphical random number generator (Example: Display the number as a dice image) - Minimum Requirements for an A:
o Everything above plus
o Educational game that shows facts as the players move around the game.
With some help from classmates (none of us can figure out how to do this project) and hours and hours of trial and error this is what my code looks like so far.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Game</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.twoColElsRt #container {
width: 46em; /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
position: relative;
width: 800px;
height: 700px;
overflow: auto;
}
.twoColElsRt #sidebar1 {
float: right;
width: 12em; /* since this element is floated, a width must be given */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div */
margin-right: 15px;
margin-top: 68px;
}
.twoColElsRt #mainContent {
margin: 0 13em 0 1.5em; /* the left margin can be given in ems or pixels. It creates the space down the left side of the page. */
}
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColElsRt #sidebar1 { padding-top: 30px; }
.twoColElsRt #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script language="javascript">
//variables for empty cells
var cell1_num = "1";
var cell2_num = "2";
var cell3_num = "3";
var cell4_num = "4";
var cell5_num = "5";
var cell6_num = "6";
var cell7_num = "7";
var cell8_num = "8";
var cell9_num = "9";
var cell10_num = "10";
var cell11_num = "11";
var cell12_num = "12";
var cell13_num = "13";
var cell14_num = "14";
var cell15_num = "15";
var cell16_num = "16";
var cell17_num = "17";
var cell18_num = "18";
var cell19_num = "19";
var cell20_num = "20";
var cell21_num = "21";
var cell22_num = "22";
var cell23_num = "23";
var cell24_num = "24";
var cell25_num = "25";
var cell26_num = "26";
var cell27_num = "27";
var cell28_num = "28";
var cell29_num = "29";
var cell30_num = "30";
//variables for language learning will add more later
var language = new Array();
language.push("Uno");
language.push("Dos");
language.push("Tres");
language.push("Cuatro");
language.push("Cinco");
language.push("Siete");
language.push("Ocho");
//variables for dice value, player position, and player turn
var dice_value;
var pos1=1;
var pos2=1;
var player_turn=1;
var old_pos1="cell1";
var new_pos1="cell1";
var old_pos2="cell1";
var new_pos2="cell1";
//function to move the players on the board and display the info
function move_player(num) {
//If it's players 1's turn
if (player_turn==1) {
old_pos1=document.getElementById("cell"+pos1);
new_pos1="cell"+(pos1+num);
pos1 = pos1+num;
}
//If it's player 2's turn
else {
old_pos2=document.getElementById("cell"+pos2);
new_pos2="cell"+(pos2+num);
pos2 = pos2+num;
}
//If player 1 wins
if (pos1>=30) {
old_pos1.innerHTML=old_pos1+"_num";
old_pos2.innerHTML=old_pos2+"_num";
document.getElementById("cell30").innerHTML='<img src="p1.png">';
document.getElementById(new_pos2).src="p2.png";
alert("Player 1 Wins!");
}
//If player 2 wins
else if (pos2>=30) {
old_pos1.innerHTML=old_pos1+"_num";
old_pos2.innerHTML=old_pos2+"_num";
document.getElementById(new_pos1).innerHTML='<img src="p1.png">';
document.getElementById("cell30").src="p2.png";
alert("Player 2 Wins!");
}
//If both players are on same position
else if (pos1==pos2) {
old_pos1.innerHTML=old_pos1+"_num";
old_pos2.innerHTML=old_pos2+"_num";
document.getElementById(new_pos1).innerHTML='<img src="bp.png">';
document.getElementById("player1_language").innerHTML=language[pos1-1];
document.getElementById("player2_language").innerHTML=language[pos2-1];
}
//basic moving of the players and displaying of the info
else {
old_pos1.innerHTML=old_pos1+"_num";
old_pos2.innerHTML=old_pos2+"_num";
document.getElementById(new_pos1).innerHTML='<img src="p1.png"/>';
document.getElementById(new_pos2).innerHTML='<img src="p2.png"/>';
document.getElementById("player1_language").innerHTML=language[pos1-1];
document.getElementById("player2_language").innerHTML=language[pos2-1];
}
}
//function for what happens when the dice are rolled
function dice_click() {
var dice_value=Math.floor(Math.random()*6);
while (dice_value==0) {
dice_value=Math.floor(Math.random()*6);
}
if (dice_value==1) {
document.getElementById("dice_pic").src="images/one.png";
move_player(dice_value);
}
else if (dice_value==2) {
document.getElementById("dice_pic").src="images/two.png";
move_player(dice_value);
}
else if (dice_value==3) {
document.getElementById("dice_pic").src="images/three.png";
move_player(dice_value);
}
else if (dice_value==4) {
document.getElementById("dice_pic").src="images/four.png";
move_player(dice_value);
}
else if (dice_value==5) {
document.getElementById("dice_pic").src="images/five.png";
move_player(dice_value);
}
else {
document.getElementById("dice_pic").src="images/six.png";
move_player(dice_value);
}
//updates whos turn it is
player_turn = (player_turn==1)?2:1;
document.getElementById("whosTurn").innerHTML = "Player " + player_turn+ "";
}
</script>
</head>
<body class="twoColElsRt">
<div id="container">
<div id="sidebar1">
<h3>How To Play</h3>
<br>
<p>There are two small circular game pieces. One for each player.
Players will have to roll the dice to get a random number from 1 to 5.
The game pieces will then move along the board that many number of spaces.
The first player to the finish wins.</p>
</div>
<div id="game" align="center">
<img src="lad3.gif" width="79" height="77" style="position:
absolute; top: 90px; left: 158px;"/>
<h2 align="center">Chutes And Ladders</h2>
<table width="350px" height="350px" border="2" cellspacing="2" cellpadding="2" bgcolor="#009999" bordercolor="#000000">
<tr>
<td id="cell26">26</td>
<td id="cell27">27</td>
<td id="cell28">28</td>
<td id="cell29">29</td>
<td id="cell30">30</td>
</tr>
<tr>
<td id="cell25">25</td>
<td id="cell24">24</td>
<td id="cell23">23</td>
<td id="cell22">22</td>
<td id="cell21">21</td>
</tr>
<tr>
<td id="cell16">16</td>
<td id="cell17">17</td>
<td id="cell18">18</td>
<td id="cell19">19</td>
<td id="cell20">20</td>
</tr>
<tr>
<td id="cell15">15</td>
<td id="cell14">14</td>
<td id="cell13">13</td>
<td id="cell12">12</td>
<td id="cell11">11</td>
</tr>
<tr>
<td id="cell6">6</td>
<td id="cell7">7</td>
<td id="cell8">8</td>
<td id="cell9">9</td>
<td id="cell10">10</td>
</tr>
<tr>
<td id="cell5">5</td>
<td id="cell4">4</td>
<td id="cell3">3</td>
<td id="cell2">2</td>
<td id="cell1">1</td>
</tr>
</table>
</div>
<div id="dice_roll" align=right style="margin: 15px;">
<table>
<tr>
<td id="whosTurn">Player 1</td>
</tr>
<tr>
<td><button type="button" id="dice_button" onclick="dice_click()" >Roll Dice</button></td>
</tr>
<tr>
<td><img src="one.png" width="50" height="50" id="dice_pic" /></td>
</tr>
</table>
</div>
<div id="language" align="center">
<table border="2" cellspacing="2" cellpadding="2">
<tr>
<td id="player1_language">Player 1: Learn Spanish</td>
</tr>
<tr>
<td id="player2_language">Player 2: Learn Spanish</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Here are the problems I am having.
- Once the game piece has been on a cell it doesn’t go back to it’s number
- Not sure how to get a game piece to go up a ladder or down a chute.
Maybe something like this? 24-26 Ladder
if (pos1 == 24) {
new_pos1="26";
pos1 = pos1+26;
}
- I want the alert pop-up that displays the winner to reset the game once you hit ok