here is the code
Expand|Select|Wrap|Line Numbers
- <!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=iso-8859-1" />
- <title>Snake Game</title>
- <style type="text/css">
- table#board {
- margin: 0 auto;
- border: 4px solid blue;
- border-collapse:collapse;
- }
- table#board1 {
- margin: 0 auto;
- border: 4px solid blue;
- border-collapse:collapse;
- }
- table#board1 td {
- height: 40px;
- width: 360px;
- padding: 0;
- margin: 0;
- }
- .item{}
- .worm1 {
- font-weight:bold;
- font-size:12pt;
- color:blue;
- background:white;
- width:150px;
- BORDER-BOTTOM: #ffffff solid 0px;
- BORDER-TOP: #ffffff solid 0px;
- BORDER-LEFT: #ffffff solid 0px;
- BORDER-RIGHT: #ffffff solid 0px;
- }
- .worm2 {
- font-weight:bold;
- font-size:12pt;
- color:red;
- background:white;
- width:150px;
- BORDER-BOTTOM: #ffffff solid 0px;
- BORDER-TOP: #ffffff solid 0px;
- BORDER-LEFT: #ffffff solid 0px;
- BORDER-RIGHT: #ffffff solid 0px;
- }
- .info {
- font-weight:bold;
- font-size:10pt;
- color:black;
- background:white;
- width:200px;
- height:150px;
- BORDER-BOTTOM: #ffffff solid 1px;
- BORDER-TOP: #ffffff solid 1px;
- BORDER-LEFT: #ffffff solid 1px;
- BORDER-RIGHT: #ffffff solid 1px;
- }
- h1{
- text-align:center;
- color: red;
- }
- </style>
- </head>
- <body background="background.jpg">
- <h1 align="center">Snake Game!</h1>
- <script type="text/JavaScript">
- //<![CDATA[
- var height = 20; /*number of boxes vertically*/
- var width = 20; /*number of boxes horizontally*/
- var speed = 100;
- width += 4;
- var a = 0;
- var b = 0;
- document.write("<table id=board bgcolor=black bordercolor=blue");
- document.write("align=center border=1 cellpadding=0 cellspacing=0><tr><td>");
- for (b = 0; b < height+2; b++) {
- document.write("<img src=end.gif width=0 height=0>");
- for (a = 0; a < width- 2; a++) {
- if ((b == 0) || (b == height+1)) {
- document.write("<img src=end.gif width=0 height=0>");/* the end.gif image is the inner side of the border*/
- }
- else
- {
- document.write("<img src=blank.gif width=15 height=15>");/* blank image covers each box in the field area*/
- }
- }
- document.write("<img src=end.gif width=0 height=0><br>");
- }
- document.write("</td></table>");
- /*second cell*/
- document.write("<table id = board1>");
- document.write("<td valign=top align=center bgcolor=#00CED1>");/*we have used valign to insure the <p> tag stays on top and other text follows the vertical alignment*/
- document.write("<p align=center><strong><font color=blue>Points score </font></strong></p>");
- /* point score area*/
- document.write("<br>");
- document.write("<form name=info>");
- document.write("<input type=button size=30 value=0 class=worm1></form>");
- document.write("<br><font size=-1>Press any arrow key to start</font></td></tr></table>");
- var points = 0;
- var go = 1;
- var di = 0;
- var x = 0;
- var y = 0;
- var n = 0;
- document.images[1].src = "blank.gif";
- var blank = document.images[1].src;
- var hw = (height * width);
- var o = Math.floor(Math.random() * hw - 2);
- do {
- o = Math.floor(Math.random() * hw-2);
- } while(document.images[o].src != blank);
- var i = o;
- var food = 0;
- do {
- food = Math.floor(Math.random() * hw-2);
- } while (document.images[food].src != blank);
- document.images[i].src = "worm.gif";
- document.images[width-1].src="end.gif";
- var end = document.images[width-1].src;
- var file = document.images[i].src;
- var length = 1;
- var worm = new Array();
- var k = 0;
- var ie = document.all ? 1 : 0;
- var enableScroll = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >3)) ;
- var height = document.images[0].height;
- var tScroll;
- var d = 0;
- function runTimer() {
- if (d != 0) { n++; }
- if (d == 1) { i--; }
- if (d == 2) { i++; }
- if (d == 3) { i += width; }
- if (d == 4) { i -= width; }
- if (document.images[i].src == end) {
- speed -= 400; i = worm[n-1]; di = 1; die();/*when the speed of the snake(worm)=400 which is stoping the worm will die*/
- }
- worm[n] = i;
- if(i == food) {
- length++; points += (10*length);/*when the snake(worm) eat food (i) you get points = to 10 times the length of the worm*/
- do {
- food = Math.floor(Math.random() * hw-2);/*we call Math.random method for the food to appear in random places every time you start the game*/
- } while (document.images[food].src != blank);
- if (di == 0) {
- document.info.elements[0].value = points;
- }
- }
- if (n > length){
- o = worm[n-length];
- }
- if ((document.images[i].src == file) && (n > 1)) {
- speed -= 400; d = 0; di = 1; die();
- }
- if(di == 0) {
- document.images[o].src = "blank.gif";
- document.images[i].src = "worm.gif";
- document.images[food].src = "food.gif";
- tScroll = window.setTimeout("runTimer();", speed);/*used this method(setTimeout) to call tScroll function for a period of time*/
- }
- }
- if (enableScroll){
- if (ie) window.onload = runTimer;/*when the function tScroll is called when the page loading the setTimeout method(runTimer) is enabled*/
- if (ie) window.onunload = new Function("clearTimeout(tScroll)");/*to stop the mwthod setTimeout by calling clearTimeout method*/
- }
- system = "";
- ver = navigator.appVersion;
- len = ver.length;
- for (iln = 0;iln < len; iln++) if (ver.charAt(iln) == "(") break;
- system = ver.charAt(iln+1).toUpperCase();
- document.onkeydown = keyDown;/*we called onKeydown function a keyDown*/
- if (system != "C") {
- document.captureEvents(Event.KEYDOWN);/*KEYDOWN method specifies the type of events that should be passed to the document rather than to the object for which they were intended */
- }
- function keyDown(DnEvents) {/*calling the event(keyDown)*/
- if (system != "C") {
- k = DnEvents.which;
- } else {
- k = window.event.keyCode;
- }
- if (k == 37) { d = 1; }
- if (k == 39) { d = 2; }
- if (k == 40) { d = 3; }
- if (k == 38) { d = 4; }
- }
- function die() {
- i = 0;
- o = 0;
- food = 0;
- document.info.elements[0].value = "Died with " + document.info.elements[0].value;
- var restart=confirm("Play Again?");
- if(restart){ location.reload(); }
- }
- function open_win()
- {
- window.open("snakegame.txt","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=800, height=500");
- }
- //]]>
- </script>
- </body>
- </html>