下载本文示例代码
脚本说明:第一步:把如下代码加入<head>区域中
<script>function ShowMenu(bMenu) {document.all.idFinder.style.display = (bMenu) ? "none" : "block" document.all.idMenu.style.display = (bMenu) ? "block" : "none"idML.className = (bMenu) ? "cOn" : "cOff"idRL.className = (bMenu) ? "cOff" : "cOn"return false}</script><style><!--A.cOn {text-decoration:none;font-weight:bolder}#article {font: 12pt Verdana, geneva, arial, sans-serif; background: white; color: black; padding: 10pt 15pt 0 5pt}#article P.start {text-indent: 0pt}#article P {margin-top:0pt;font-size:10pt;text-indent:12pt}#article #author {margin-bottom:5pt;text-indent:0pt;font-style: italic}#pageList P {padding-top:10pt}#article H3 {font-weight:bold}#article DL, UL, OL {font-size: 10pt}--></style><script><!--function addList(url,desc) {if ((navigator.appName=="Netscape") || (parseInt(navigator.appVersion)>=4)) {var w=window.open("","_IDHTML_LIST_","top=0,left=0,width=475,height=150,history=no,menubar=no,status=no,resizable=no")var d=w.documentif (!w._init) {d.open()d.write("<TITLE>Loading...</TITLE><EM>Loading...</EM>")d.close()d.location.replace("/assist/listing.asp?url=" escape(url) "&desc=" escape(desc)) w.opener=self window.status="Personal Assistant (Adding): " desc} else {window.status=w.addOption(url,desc) w.focus()}}elsealert("Your browser does not support the personal assistant.")return false}// --></script>
<style>#board {font-family: arial}.dot {position: absolute; width: 5px; height: 5px; font-size: 0pt; background: black}#line {position: absolute; font-size: 0pt; height: 5px}.p1 {position: absolute; font-size: 0pt;background: navy}.p2 {position: absolute; font-size: 0pt; background: red}.p1B {position: absolute; font-size: 8pt; color: navy;text-align: center; font-weight: bold}.p2B {position: absolute; font-size: 8pt; color: red; text-align: center; font-weight: bold}</style><style type="text/css"><!--body { font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 0px; margin-right: 0px}A { COLOR: black; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: none }A:hover { COLOR: red; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: underline }a:active { font: 9pt "宋体"; cursor: hand; color: #FF0033 }
--></style><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><SCRIPT LANGUAGE="JavaScript"><!-- Beginvar timerRunning = false;var timezone = "Greenwich Mean Time";var adjust = 0;
function timeCheck(tzone, diff) {if (timerRunning) {clearTimeout(updatetime);timerRunning = false; }gmtOffset=eval(diff adjust);timezone = tzone;checkDateTime();}
function checkDateTime () {var today = new Date();var year = today.getYear() 1900;var month = today.getMonth() 1;var date = today.getDate();var day = today.getDay();var hour = today.getHours();var minute = today.getMinutes();var second = today.getSeconds();
var lastSat = date - (day 1);while (lastSat < 32) lastSat =7;if (lastSat > 31) lastSat =-7;var firstSat = date - (day 1);while (firstSat > 0) firstSat =-7;if (firstSat < 1) firstSat =7;if ((((month == 4) && (date >= firstSat)) || month > 4) && (month < 11 || ((month == 10) && day <= lastSat))) adjust = 60;yourOffset = (new Date()).getTimezoneOffset();yourOffset = yourOffset adjust;
var xx = navigator.appNamevar xy = navigator.appVersion;xy = xy.substring(0,1);if ((xy == 4) && (xx == "Netscape")) yourOffset = yourOffset adjust;if ((((month == 4) && (date > 20)) || month > 4) && (month < 11 || ((month == 10) &&day < 30))) adjust -= 60;
ourDifference = eval(gmtOffset - yourOffset);var half = eval(ourDifference % 60);ourDifference = Math.round(ourDifference / 60);hour = eval(hour - ourDifference);var m = new Array("","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec");var leap = eval(year % 4);
if ((half == -30) || (half == 30)) minute = 30;if (minute > 59) minute -= 60, hour ;if (minute < 0) minute = 60, hour--;if (hour > 23) hour -= 24, date = 1;if (((month == 4) || (month == 6) || (month == 9) || (month == 11)) && (date==31)) date = 1, month ;if (((month == 2) && (date > 28)) && (leap != 0)) date = 1, month ;if ((month == 2) && (date > 29)) date = 1, month ;if (hour < 0) hour = 24, date --;if ((date == 32) && (month == 12)) month = m[1], date = 1, year ;if (date == 32) date = 1, month ;if ((date < 1) && (month == 1)) month= m[12], date = 31, year--;if (date < 1) date = 31, month --;if (((month == 4) || (month == 6) || (month== 9) || (month == 11)) && (date == 31)) date = 30;if ((month == 2) && (date > 28)) date = 29;if (((month == 2) && (date > 28)) && (leap != 0)) date=28;for (i=1; i<13; i ) {if (month == i) {month = m[i]; break;}}
var dateTime = hour;dateTime = ((dateTime < 10) ? "0":"") dateTime;dateTime = " " dateTime;dateTime = ((minute < 10) ? ":0" : ":") minute;dateTime = ((second < 10) ? ":0" : ":") second;dateTime = (hour >= 12) ? " PM, " : " AM, ";dateTime = month " " date ", " year;
document.clock.zonetime.value = dateTime;document.clock.zonename.value = timezone;updatetime=setTimeout("checkDateTime()", 900);timerRunning = true;}// End --></SCRIPT>
第二步:把如下代码加入<body>区<table CELLPADDING="0" CELLSPACING="0" BORDER="0" width="509"><tr><td WIDTH="10"></td><td valign="top" WIDTH="499" ID="article"><p class="start" STYLE="text-align: left"><fontsize=" 2" style="font-weight:bold;font-size: 14pt"><b>看谁围的框子多?</b></font></p><p>这是一个双人游戏,蓝色的先行,看谁围的框子多,谁就赢。</p><p STYLE="margin-top: 5pt"><script>/* DHTML Dots is copyright 1998 insideDHTML.com, LLC. All rights reserved.DHTML Dots cannot be reproduced in any manner without prior consent from insideDHTML.com */
var scale= 25var size = 5
var totalSize = ((size 1)*scale) 6var cache = new Object()var move=0,point=0var player = true
function initCache() {cache.x = 0cache.y = 0cache.red = 0cache.navy = 0move=0,point=0 }
function updateScore() {document.all.red.innerText = cache.reddocument.all.navy.innerText = cache.navyif ((cache.red cache.navy)==((size-1)*(size-1))) {board.onclick = nulldocument.all.message.innerText = "Game Over!"}}
function fillPos(x,y) {document.all.board.insertAdjacentHTML("beforeEnd","<DIV class=" (player ? "p1B" : "p2B") " ID=\"point" point "\">" (player ? "N" : "R") "</DIV>")var el = document.all["point" point].styleel.pixelTop = (y*scale) 5el.pixelLeft = (x*scale) 5el.pixelWidth = scale - 5el.pixelHeight = scale - 5
}
function checkBoard(x,y,dir, player) {var piece=0if ("vertical"==dir) {if ((x==size) || (x>1)) {var bPos = boardArray[x-1][y]var nextV = boardArray[x-1][y 1]if ((bPos["vertical"]) && (bPos["horizontal"]) && (nextV["horizontal"])) {point piece fillPos(x-1,y)}} if ((x==1) || (x<size)) {var nextV = boardArray[x 1][y]var nextH = boardArray[x][y 1]if ((nextV["vertical"]) && (nextH["horizontal"]) && (boardArray[x][y]["horizontal"])) {point piece fillPos(x,y)}} } else {if ((y==size) || (y>1)) {var nextV = boardArray[x 1][y-1]var bPos = boardArray[x][y-1]if ((bPos["vertical"]) && (bPos["horizontal"]) && (nextV["vertical"])) {point piece fillPos(x,y-1)} }if ((y==1) || (y<size)) {var nextV = boardArray[x 1][y]var nextH = boardArray[x][y 1]if ((nextV["vertical"]) && (nextH["horizontal"]) && (boardArray[x][y]["vertical"])) {point piece fillPos(x,y)}}} if (piece>0) {if (player)cache.navy =pieceelsecache.red =piecedocument.all.message.innerText = "Score! Go Again."updateScore()return player}elsereturn !player}
function doMouseMove() {if (event.srcElement.className!="dot") {var x = Math.floor(event.offsetX / scale) var y = Math.floor(event.offsetY / scale) var dirX = (event.offsetX % scale)var dirY = (event.offsetY % scale)if ((x<size 1) && (y<size 1) && (y>0) && (x>0)) {if (dirX>=dirY) {if (x<size) {line.style.pixelHeight = 5 line.style.pixelWidth = scale - 5line.style.pixelTop = (y * scale) line.style.pixelLeft = (x * scale) 5cache.direction = "horizontal"}} else{if (y<size) { line.style.pixelWidth = 5 line.style.pixelHeight = scale - 5line.style.pixelTop = (y * scale) 5line.style.pixelLeft = x * scalecache.direction = "vertical"}}cache.x = xcache.y = y}}}
function doClick() {
if (cache.x==0) returnif (boardArray[cache.x][cache.y][cache.direction])document.all.message.innerText="That spot is taken! Choose again"else {document.all.board.insertAdjacentHTML("beforeEnd","<DIV class=" (player ? "p1" : "p2") " ID=move" move "></DIV>")var el = document.all["move" move]el.style.top = line.style.top el.style.left = line.style.left el.style.width = line.style.widthel.style.height = line.style.heightboardArray[cache.x][cache.y][cache.direction]=truevar nextPlayer = checkBoard(cache.x,cache.y,cache.direction, player)if (nextPlayer!=player) {player = nextPlayerif (player) {document.all.message.innerText = "Navy players turn"line.style.border = "1px navy solid"}else {document.all.message.innerText = "Red players turn"line.style.border = "1px red solid"}}}
move }
function buildDiv(x,y, scale) {return ("<DIV CLASS=dot STYLE=\"top:" (x*scale) "; left: " (y*scale) "\"></DIV>")}
var boardArray = new Object
function buildBoard() {initCache()board = ("<DIV ID=line STYLE=\"border: 1px navy solid; width: 0; height: 0\"></DIV>")boardArray = new Object()for (var x=1; x < size 1; x ) {boardArray[x] = new Object()for (var y=1; y < size 1; y ) {boardArray[x][y] = new ObjectboardArray[x][y]["vertical"] = falseboardArray[x][y]["horizontal"] = falseboard =(buildDiv(x,y, scale))}}
return board}
function createGame() {size=parseInt(document.all.setSize.value)if (size>12)size=12if (size<3)size=3document.all.setSize.value = sizedocument.all.board.innerHTML = buildBoard()document.all.board.onclick = doClicktotalSize = ((size 1)*scale) 6document.all.board.style.pixelWidth = totalSizedocument.all.board.style.pixelHeight = totalSizedocument.all.message.innerText = "Navy player goes first. Good Luck!"updateScore() }document.write("<DIV ID=board STYLE=\"position: relative; height: " totalSize "; width:" totalSize "; border: 1px black solid\">" buildBoard() "</DIV>")document.all.board.onmousemove = doMouseMovedocument.all.board.onclick = doClick
</script> </p><div STYLE="margin-left: 10pt; margin-top: 5pt"><p class="start" ID="message">Navy player goes first. Good Luck!</p><dd><br><table border="1" width="100"><tr><td style="color: red"><b>Red</b></td><td ID="red">0</td></tr><tr><td style="color: navy"><b>Navy</b></td><td ID="navy">0</td></tr></table><p><br></p><table width="200"><tr><td>游戏大小: </td><td><input TYPE="Text" VALUE="5" ID="setSize" SIZE="2"></td></tr><tr><td COLSPAN="2" align="center"><input TYPE="button" ONCLICK="createGame()"VALUE="New Game"></td></tr></table> <p CLASS="copyright"> </p></dd></div></td></tr></table>
脚本说明:第一步:把如下代码加入<head>区域中
<script>function ShowMenu(bMenu) {document.all.idFinder.style.display = (bMenu) ? "none" : "block" document.all.idMenu.style.display = (bMenu) ? "block" : "none"idML.className = (bMenu) ? "cOn" : "cOff"idRL.className = (bMenu) ? "cOff" : "cOn"return false}</script><style><!--A.cOn {text-decoration:none;font-weight:bolder}#article {font: 12pt Verdana, geneva, arial, sans-serif; background: white; color: black; padding: 10pt 15pt 0 5pt}#article P.start {text-indent: 0pt}#article P {margin-top:0pt;font-size:10pt;text-indent:12pt}#article #author {margin-bottom:5pt;text-indent:0pt;font-style: italic}#pageList P {padding-top:10pt}#article H3 {font-weight:bold}#article DL, UL, OL {font-size: 10pt}--></style><script><!--function addList(url,desc) {if ((navigator.appName=="Netscape") || (parseInt(navigator.appVersion)>=4)) {var w=window.open("","_IDHTML_LIST_","top=0,left=0,width=475,height=150,history=no,menubar=no,status=no,resizable=no")var d=w.documentif (!w._init) {d.open()d.write("<TITLE>Loading...</TITLE><EM>Loading...</EM>")d.close()d.location.replace("/assist/listing.asp?url=" escape(url) "&desc=" escape(desc)) w.opener=self window.status="Personal Assistant (Adding): " desc} else {window.status=w.addOption(url,desc) w.focus()}}elsealert("Your browser does not support the personal assistant.")return false}// --></script>
<style>#board {font-family: arial}.dot {position: absolute; width: 5px; height: 5px; font-size: 0pt; background: black}#line {position: absolute; font-size: 0pt; height: 5px}.p1 {position: absolute; font-size: 0pt;background: navy}.p2 {position: absolute; font-size: 0pt; background: red}.p1B {position: absolute; font-size: 8pt; color: navy;text-align: center; font-weight: bold}.p2B {position: absolute; font-size: 8pt; color: red; text-align: center; font-weight: bold}</style><style type="text/css"><!--body { font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 0px; margin-right: 0px}A { COLOR: black; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: none }A:hover { COLOR: red; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: underline }a:active { font: 9pt "宋体"; cursor: hand; color: #FF0033 }
--></style><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><SCRIPT LANGUAGE="JavaScript"><!-- Beginvar timerRunning = false;var timezone = "Greenwich Mean Time";var adjust = 0;
function timeCheck(tzone, diff) {if (timerRunning) {clearTimeout(updatetime);timerRunning = false; }gmtOffset=eval(diff adjust);timezone = tzone;checkDateTime();}
function checkDateTime () {var today = new Date();var year = today.getYear() 1900;var month = today.getMonth() 1;var date = today.getDate();var day = today.getDay();var hour = today.getHours();var minute = today.getMinutes();var second = today.getSeconds();
var lastSat = date - (day 1);while (lastSat < 32) lastSat =7;if (lastSat > 31) lastSat =-7;var firstSat = date - (day 1);while (firstSat > 0) firstSat =-7;if (firstSat < 1) firstSat =7;if ((((month == 4) && (date >= firstSat)) || month > 4) && (month < 11 || ((month == 10) && day <= lastSat))) adjust = 60;yourOffset = (new Date()).getTimezoneOffset();yourOffset = yourOffset adjust;
var xx = navigator.appNamevar xy = navigator.appVersion;xy = xy.substring(0,1);if ((xy == 4) && (xx == "Netscape")) yourOffset = yourOffset adjust;if ((((month == 4) && (date > 20)) || month > 4) && (month < 11 || ((month == 10) &&day < 30))) adjust -= 60;
ourDifference = eval(gmtOffset - yourOffset);var half = eval(ourDifference % 60);ourDifference = Math.round(ourDifference / 60);hour = eval(hour - ourDifference);var m = new Array("","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec");var leap = eval(year % 4);
if ((half == -30) || (half == 30)) minute = 30;if (minute > 59) minute -= 60, hour ;if (minute < 0) minute = 60, hour--;if (hour > 23) hour -= 24, date = 1;if (((month == 4) || (month == 6) || (month == 9) || (month == 11)) && (date==31)) date = 1, month ;if (((month == 2) && (date > 28)) && (leap != 0)) date = 1, month ;if ((month == 2) && (date > 29)) date = 1, month ;if (hour < 0) hour = 24, date --;if ((date == 32) && (month == 12)) month = m[1], date = 1, year ;if (date == 32) date = 1, month ;if ((date < 1) && (month == 1)) month= m[12], date = 31, year--;if (date < 1) date = 31, month --;if (((month == 4) || (month == 6) || (month== 9) || (month == 11)) && (date == 31)) date = 30;if ((month == 2) && (date > 28)) date = 29;if (((month == 2) && (date > 28)) && (leap != 0)) date=28;for (i=1; i<13; i ) {if (month == i) {month = m[i]; break;}}
var dateTime = hour;dateTime = ((dateTime < 10) ? "0":"") dateTime;dateTime = " " dateTime;dateTime = ((minute < 10) ? ":0" : ":") minute;dateTime = ((second < 10) ? ":0" : ":") second;dateTime = (hour >= 12) ? " PM, " : " AM, ";dateTime = month " " date ", " year;
document.clock.zonetime.value = dateTime;document.clock.zonename.value = timezone;updatetime=setTimeout("checkDateTime()", 900);timerRunning = true;}// End --></SCRIPT>
第二步:把如下代码加入<body>区<table CELLPADDING="0" CELLSPACING="0" BORDER="0" width="509"><tr><td WIDTH="10"></td><td valign="top" WIDTH="499" ID="article"><p class="start" STYLE="text-align: left"><fontsize=" 2" style="font-weight:bold;font-size: 14pt"><b>看谁围的框子多?</b></font></p><p>这是一个双人游戏,蓝色的先行,看谁围的框子多,谁就赢。</p><p STYLE="margin-top: 5pt"><script>/* DHTML Dots is copyright 1998 insideDHTML.com, LLC. All rights reserved.DHTML Dots cannot be reproduced in any manner without prior consent from insideDHTML.com */
var scale= 25var size = 5
var totalSize = ((size 1)*scale) 6var cache = new Object()var move=0,point=0var player = true
function initCache() {cache.x = 0cache.y = 0cache.red = 0cache.navy = 0move=0,point=0 }
function updateScore() {document.all.red.innerText = cache.reddocument.all.navy.innerText = cache.navyif ((cache.red cache.navy)==((size-1)*(size-1))) {board.onclick = nulldocument.all.message.innerText = "Game Over!"}}
function fillPos(x,y) {document.all.board.insertAdjacentHTML("beforeEnd","<DIV class=" (player ? "p1B" : "p2B") " ID=\"point" point "\">" (player ? "N" : "R") "</DIV>")var el = document.all["point" point].styleel.pixelTop = (y*scale) 5el.pixelLeft = (x*scale) 5el.pixelWidth = scale - 5el.pixelHeight = scale - 5
}
function checkBoard(x,y,dir, player) {var piece=0if ("vertical"==dir) {if ((x==size) || (x>1)) {var bPos = boardArray[x-1][y]var nextV = boardArray[x-1][y 1]if ((bPos["vertical"]) && (bPos["horizontal"]) && (nextV["horizontal"])) {point piece fillPos(x-1,y)}} if ((x==1) || (x<size)) {var nextV = boardArray[x 1][y]var nextH = boardArray[x][y 1]if ((nextV["vertical"]) && (nextH["horizontal"]) && (boardArray[x][y]["horizontal"])) {point piece fillPos(x,y)}} } else {if ((y==size) || (y>1)) {var nextV = boardArray[x 1][y-1]var bPos = boardArray[x][y-1]if ((bPos["vertical"]) && (bPos["horizontal"]) && (nextV["vertical"])) {point piece fillPos(x,y-1)} }if ((y==1) || (y<size)) {var nextV = boardArray[x 1][y]var nextH = boardArray[x][y 1]if ((nextV["vertical"]) && (nextH["horizontal"]) && (boardArray[x][y]["vertical"])) {point piece fillPos(x,y)}}} if (piece>0) {if (player)cache.navy =pieceelsecache.red =piecedocument.all.message.innerText = "Score! Go Again."updateScore()return player}elsereturn !player}
function doMouseMove() {if (event.srcElement.className!="dot") {var x = Math.floor(event.offsetX / scale) var y = Math.floor(event.offsetY / scale) var dirX = (event.offsetX % scale)var dirY = (event.offsetY % scale)if ((x<size 1) && (y<size 1) && (y>0) && (x>0)) {if (dirX>=dirY) {if (x<size) {line.style.pixelHeight = 5 line.style.pixelWidth = scale - 5line.style.pixelTop = (y * scale) line.style.pixelLeft = (x * scale) 5cache.direction = "horizontal"}} else{if (y<size) { line.style.pixelWidth = 5 line.style.pixelHeight = scale - 5line.style.pixelTop = (y * scale) 5line.style.pixelLeft = x * scalecache.direction = "vertical"}}cache.x = xcache.y = y}}}
function doClick() {
if (cache.x==0) returnif (boardArray[cache.x][cache.y][cache.direction])document.all.message.innerText="That spot is taken! Choose again"else {document.all.board.insertAdjacentHTML("beforeEnd","<DIV class=" (player ? "p1" : "p2") " ID=move" move "></DIV>")var el = document.all["move" move]el.style.top = line.style.top el.style.left = line.style.left el.style.width = line.style.widthel.style.height = line.style.heightboardArray[cache.x][cache.y][cache.direction]=truevar nextPlayer = checkBoard(cache.x,cache.y,cache.direction, player)if (nextPlayer!=player) {player = nextPlayerif (player) {document.all.message.innerText = "Navy players turn"line.style.border = "1px navy solid"}else {document.all.message.innerText = "Red players turn"line.style.border = "1px red solid"}}}
move }
function buildDiv(x,y, scale) {return ("<DIV CLASS=dot STYLE=\"top:" (x*scale) "; left: " (y*scale) "\"></DIV>")}
var boardArray = new Object
function buildBoard() {initCache()board = ("<DIV ID=line STYLE=\"border: 1px navy solid; width: 0; height: 0\"></DIV>")boardArray = new Object()for (var x=1; x < size 1; x ) {boardArray[x] = new Object()for (var y=1; y < size 1; y ) {boardArray[x][y] = new ObjectboardArray[x][y]["vertical"] = falseboardArray[x][y]["horizontal"] = falseboard =(buildDiv(x,y, scale))}}
return board}
function createGame() {size=parseInt(document.all.setSize.value)if (size>12)size=12if (size<3)size=3document.all.setSize.value = sizedocument.all.board.innerHTML = buildBoard()document.all.board.onclick = doClicktotalSize = ((size 1)*scale) 6document.all.board.style.pixelWidth = totalSizedocument.all.board.style.pixelHeight = totalSizedocument.all.message.innerText = "Navy player goes first. Good Luck!"updateScore() }document.write("<DIV ID=board STYLE=\"position: relative; height: " totalSize "; width:" totalSize "; border: 1px black solid\">" buildBoard() "</DIV>")document.all.board.onmousemove = doMouseMovedocument.all.board.onclick = doClick
</script> </p><div STYLE="margin-left: 10pt; margin-top: 5pt"><p class="start" ID="message">Navy player goes first. Good Luck!</p><dd><br><table border="1" width="100"><tr><td style="color: red"><b>Red</b></td><td ID="red">0</td></tr><tr><td style="color: navy"><b>Navy</b></td><td ID="navy">0</td></tr></table><p><br></p><table width="200"><tr><td>游戏大小: </td><td><input TYPE="Text" VALUE="5" ID="setSize" SIZE="2"></td></tr><tr><td COLSPAN="2" align="center"><input TYPE="button" ONCLICK="createGame()"VALUE="New Game"></td></tr></table> <p CLASS="copyright"> </p></dd></div></td></tr></table>
下载本文示例代码
双人小游戏双人小游戏双人小游戏双人小游戏双人小游戏双人小游戏双人小游戏双人小游戏双人小游戏双人小游戏双人小游戏双人小游戏双人小游戏双人小游戏双人小游戏