I just created a little html game using just plain JavaScript. I don't really want to play the game, so I though why not pass it on, maybe some reader will enjoy it or put it on their own website.
Please note that this may not be the best way to program the game. I am sure that their are shortcuts to iterate more effectively through things. This was basically just a result of to much coffee and not sleeping rather than a serious effort to create a clean game.
So if you are a JavaScript master, and would like to clean it up, please feel free, and send it back to me.
Also note that it was done for Firefox, and though I think for the most part I have stuck with cross browser compatible JavaScript, if I haven't done it fully, let me know and some other non sleeping night I will clean it up a bit.
BTW this is by far the most effective way to learn how to use a computer language (perhaps even a regular language)...play with it. Think of programming/scripting as lego blocks for your computer.
Anyway, Enjoy ;~)
NOTE, since posting it I noticed there are still some errors. If you are keen, see if you can find them. I also uploaded the game to a website just for kicks - http://www.sandcurves.com/tictactoe.htm
<html><head><title>Tic-Tac-Toe</title>
<style type="text/css">
body{
margin:50px 200px 0 200px;
background-color:gray;
}
h1{
color:white;
font-size:200%;
}
p{
color:#cccccc;
font-size:200%;
font-weight:700;
}
input{
background-color:#dddddd;
border:none;
width:inherit;
text-align:center;
font-size:400%;
color:white;
font-weight:800;
}
input[type=reset]{
background-color:gray;
border:1px solid #cccccc;
font-size:150%;
cursor:pointer;
margin-top:50px;
padding:7px;
}
td{
text-align:center;
background-color:#dddddd;
border:gray 4px solid;
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
var playeR = "First";
var zed = 0;
function startOff(){
document.getElementById('whichplayer').innerHTML = playeR;
document.minIn.t1v.value = "";
document.minIn.t2v.value = "";
document.minIn.t3v.value = "";
document.minIn.m1v.value = "";
document.minIn.m2v.value = "";
document.minIn.m3v.value = "";
document.minIn.b1v.value = "";
document.minIn.b2v.value = "";
document.minIn.b3v.value = "";
}
function nextMove(a){
if (playeR == "First"){
playeR = "Second";
var marK = "X";
}
else {
playeR = "First";
var marK = "O";
}
document.getElementById('whichplayer').innerHTML = playeR;
switch (a){
case ('t1'):document.minIn.t1v.value = marK;break;
case ('t2'):document.minIn.t2v.value = marK;break;
case ('t3'):document.minIn.t3v.value = marK;break;
case ('m1'):document.minIn.m1v.value = marK;break;
case ('m2'):document.minIn.m2v.value = marK;break;
case ('m3'):document.minIn.m3v.value = marK;break;
case ('b1'):document.minIn.b1v.value = marK;break;
case ('b2'):document.minIn.b2v.value = marK;break;
case ('b3'):document.minIn.b3v.value = marK;break;
}
var checka = document.minIn.t1v.value;
var checkb = document.minIn.t2v.value;
var checkc = document.minIn.t3v.value;
var checkd = document.minIn.m1v.value;
var checke = document.minIn.m2v.value;
var checkf = document.minIn.m3v.value;
var checkg = document.minIn.b1v.value;
var checkh = document.minIn.b2v.value;
var checki = document.minIn.b3v.value;
if((checka == checkb) && (checkb == checkc)){
if (checka != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checkd == checke) && (checke == checkf)){
if (checkd != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checkg == checkh) && (checkh == checki)){
if (checkg != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checka == checkd) && (checkd == checkg)){
if (checka != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checkb == checke) && (checke == checkh)){
if (checkb != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checkc == checkf) && (checkf == checki)){
if (checkc != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checka == checke) && (checke == checki)){
if (checka != "" || 0){zed = 1;}
else{ zed = 0; }
}
else if((checkc == checke) && (checke == checkg)){
if (checkc != "" || 0){zed = 1;}
else{ zed = 0; }
}
else{
zed = 0;
}
if (zed == 1){
if (marK == "X"){
alert("First player wins");
}
else {
alert("Second player wins");
}
}
}
</script>
</head>
<body onload="startOff()">
<h1>Tic-Tac-Toe</h1>
<p><span id="whichplayer"></span> player</p>
<form name="minIn">
<table>
<tr>
<td id="t1"><input type="text" name="t1v" onclick="nextMove('t1')" /></td>
<td id="t2"><input type="text" name="t2v" onclick="nextMove('t2')" /></td>
<td id="t3"><input type="text" name="t3v" onclick="nextMove('t3')" /></td>
</tr>
<tr>
<td id="m1"><input type="text" name="m1v" onclick="nextMove('m1')" /></td>
<td id="m2"><input type="text" name="m2v" onclick="nextMove('m2')" /></td>
<td id="m3"><input type="text" name="m3v" onclick="nextMove('m3')" /></td>
</tr>
<tr>
<td id="b1"><input type="text" name="b1v" onclick="nextMove('b1')" /></td>
<td id="b2"><input type="text" name="b2v" onclick="nextMove('b2')" /></td>
<td id="b3"><input type="text" name="b3v" onclick="nextMove('b3')" /></td>
</tr>
</table>
<input type="reset" value="CLEAR GAME" />
</form>
</body>
</html>
Tuesday, October 20, 2009
Subscribe to:
Post Comments (Atom)
