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>
Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts
Tuesday, October 20, 2009
Tuesday, September 22, 2009
Beginner Comprehensive Web Authoring Tutorial 1 An Introduction
Welcome to the Non Nerd Free Comprehensive Web Authoring Tutorial.
If you are a total beginner to the whole idea of designing a website, but would love to try it, and maybe learn it properly, then this blog is for you. I am going to take you incrementally through, step by step, from knowing nothing to deploying very clever websites on the Internet.
I will not try to pretend that I provide the best tutorial. There are many many web authoring tutorials out there. As we go along I will give lots of links so you know where I may have learned my stuff from, and so that you can choose where you want to learn. You may find that I teach one aspect better than another, and so choose to learn other things from those who teach them best...great. But this blog will depend on readership. If after a while I see that there is no real traffic, and no comments, I will can the project and assume that you found better tutorials elsewhere.
Now, what do I want to teach you. Well, if we carry on with this long enough, EVERYTHING. Let me summarize my goals:
1. Teach you what a website is, what HTML is and teach you the basic syntax of HTML. This bit is fun and easy. I will be focusing on development on HTML 5 the soon to be released version of HTML.
2. CSS - The styling of your web pages.
3. Basic JavaScript - Breath a little life into your otherwise dull pages.
4. A little about servers and uploading websites...Get what you have done so far out there.
5. More advanced JavaScript and an intro to Ajax.
6. Blogging with online content management systems, and customizing them...we'll start with blogger.
7. Move on to more complex things...PHP, Databases and on and on. At this point you will need to download a server to your computer...don't worry, it's not that scary.
8. SEO and usability...here will be preaching and stern words.
9. Perhaps, later on, we may also start with Flash.
10. We'll move into more detail on servers...now only with Apache.
11. Freelance Web Design and making a living from doing websites.
12. If we are still together, then it will be Python next,
13. And Java (which is not JavaScript.)
13. Well, it all depends on what's happening with this blog, what's happening with the world wide web, and if I am still interested, finding the time and so on.
What am I not going to teach you? Things like Dreamweaver or Frontpage. I want you to cut the code by yourself...especially in the beginning. I think you will thank me later.
What are the characteristics of my tutorials...I teach in a very simple manner...almost like I teach my kids. I love teaching and it has been a big part of how I guide.
I have been, and I am still, teaching myself these things. I am not an expert, but I do LOVE to learn and I LOVE to teach. Come along for the ride...it's going to be fun. Please leave comments, ask questions, correct me when I am wrong, and lets get to know each other through this experience.
If you are a total beginner to the whole idea of designing a website, but would love to try it, and maybe learn it properly, then this blog is for you. I am going to take you incrementally through, step by step, from knowing nothing to deploying very clever websites on the Internet.
I will not try to pretend that I provide the best tutorial. There are many many web authoring tutorials out there. As we go along I will give lots of links so you know where I may have learned my stuff from, and so that you can choose where you want to learn. You may find that I teach one aspect better than another, and so choose to learn other things from those who teach them best...great. But this blog will depend on readership. If after a while I see that there is no real traffic, and no comments, I will can the project and assume that you found better tutorials elsewhere.
Now, what do I want to teach you. Well, if we carry on with this long enough, EVERYTHING. Let me summarize my goals:
1. Teach you what a website is, what HTML is and teach you the basic syntax of HTML. This bit is fun and easy. I will be focusing on development on HTML 5 the soon to be released version of HTML.
2. CSS - The styling of your web pages.
3. Basic JavaScript - Breath a little life into your otherwise dull pages.
4. A little about servers and uploading websites...Get what you have done so far out there.
5. More advanced JavaScript and an intro to Ajax.
6. Blogging with online content management systems, and customizing them...we'll start with blogger.
7. Move on to more complex things...PHP, Databases and on and on. At this point you will need to download a server to your computer...don't worry, it's not that scary.
8. SEO and usability...here will be preaching and stern words.
9. Perhaps, later on, we may also start with Flash.
10. We'll move into more detail on servers...now only with Apache.
11. Freelance Web Design and making a living from doing websites.
12. If we are still together, then it will be Python next,
13. And Java (which is not JavaScript.)
13. Well, it all depends on what's happening with this blog, what's happening with the world wide web, and if I am still interested, finding the time and so on.
What am I not going to teach you? Things like Dreamweaver or Frontpage. I want you to cut the code by yourself...especially in the beginning. I think you will thank me later.
What are the characteristics of my tutorials...I teach in a very simple manner...almost like I teach my kids. I love teaching and it has been a big part of how I guide.
I have been, and I am still, teaching myself these things. I am not an expert, but I do LOVE to learn and I LOVE to teach. Come along for the ride...it's going to be fun. Please leave comments, ask questions, correct me when I am wrong, and lets get to know each other through this experience.
This site will live
I have just had a look at Google Analytics for this site, and in the last month this site has had 127 unique visitors. I have not links to this site anywhere, it isn't linked in my blogger profile, I haven't done anything to promote it. And yet they come.
So, I guess, I am going to start off producing some posts on this blog.
So please dear random visitor, tell me what do you want me to post about. I think at this point I could do posts on the following, all at really beginner level:
1. Full web authoring tutorial for the beginner ...from nothing to getting your page up on the internet
2. Just html (to easy, I think)
3. Html and css
4. Intro to Javascript
5. Intro to php
6. Blogging general
7. Blogging promotion
8. Blogger specific tips and tricks
Leave comments, take my survey or even send me an email (frantic.naturalist @ gmail.com)
So, I guess, I am going to start off producing some posts on this blog.
So please dear random visitor, tell me what do you want me to post about. I think at this point I could do posts on the following, all at really beginner level:
1. Full web authoring tutorial for the beginner ...from nothing to getting your page up on the internet
2. Just html (to easy, I think)
3. Html and css
4. Intro to Javascript
5. Intro to php
6. Blogging general
7. Blogging promotion
8. Blogger specific tips and tricks
Leave comments, take my survey or even send me an email (frantic.naturalist @ gmail.com)
Subscribe to:
Posts (Atom)
