转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> Web开发 >> 正文
围格子         ★★★★

围格子

作者:闵涛 文章来源:闵涛的学习笔记 点击数:692 更新时间:2009/4/23 10:54:59

注释:放在<head>与</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.document
if (!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()
}
}
else
alert("Your browser does not support the personal assistant.")
return false
}
// -->
</script>

<style>
#board {cursor: default}
#board TD {width: 25px; height: 25px; }
</style>

注释:放在<body>与</body>之间

<table border="1" width="90%">
<tr>
<td width="50%" height="27">
<div align="right">
<table id="score" border="0" width="250">
<tr>
<td width="45" align="center">移动: </td>
<td id="moves" width="37">0</td>
<td width="45" align="center">灯灭:</td>
<td id="off" width="37">100</td>
<td width="45" align="center">灯亮:</td>
<td id="on" width="37">0</td>
</tr>
</table>
</div>
</td>
<td width="50%" height="27">
<div align="left">
<table width="185">
<tr>
<td width="54">大小: </td>
<td width="31">
<input id="gameSize" type="text" value="10" size="2" name="text">
</td>
<td width="97">
<input onClick="newGame()" type="button" value="开始游戏" name="button">
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="2" height="27" align="center">
<script>
var size=10
var moves = 0
var off = size*2
var on = 0
var current = null
function doOver() {
if ((event.srcElement.tagName=="TD") && (current!=event.srcElement)) {
if (current!=null)
current.style.backgroundColor = current._background
event.srcElement._background = event.srcElement.style.backgroundColor
event.srcElement.style.backgroundColor = "lightgrey"
current = event.srcElement
}
}

function setColor(el) {
if ((el._background=="") || (el._background==null)) {
el.style.backgroundColor = "yellow"
el._background = "yellow"
} else {
el.style.backgroundColor = ""
el._background = ""
}
}

function countLights() {
off = 0; on = 0
for (var x=0; x < size; x++)
for (var y=0; y < size; y++) {
var p = board.rows[x].cells[y]
if (p._background=="yellow")
on++
else
off ++
}
document.all.on.innerText = on
if (off!=0)
document.all.off.innerText = off
else
document.all.off.innerText = "You Win!"
return (off==0)
}

function doClick() {
setColor(current)
var cellIdx = current.cellIndex
var rowIdx = current.parentElement.rowIndex
if (rowIdx>0)
setColor(board.rows[rowIdx-1].cells[cellIdx])
if (rowIdx<size-1)
setColor(board.rows[rowIdx+1].cells[cellIdx])
if (cellIdx>0)
setColor(board.rows[rowIdx].cells[cellIdx-1])
if (cellIdx<size-1)
setColor(board.rows[rowIdx].cells[cellIdx+1])
moves++
document.all.moves.innerText = moves
win = countLights()
if (win) {
board.onclick = null
board.onmouseover = null
current.style.background = "yellow"
}
}

function buildBoard() {
var str = "<TABLE ID=board ONSELECTSTART=\"return false\" ONCLICK=\"doClick()\" ONMOUSEOVER=\"doOver()\" cellspacing=0 cellpadding=0 border=5>"
for (var x=0; x < size; x++) {
str+="<TR>"
for (var y=0; y < size; y++) {
str+="<TD> </TD>"
}
str+="</TR>"
}
str+="</TABLE>"
return str
}

function newGame() {
size = document.all.gameSize.value
if (size<3)
size=3
if (size>15)
size=15
document.all.gameSize.value = size
document.all.board.outerHTML = buildBoard()
moves=0
document.all.moves.innerText = moves
countLights()

}

</script>
<script>
document.write(buildBoard())
</script>
</td>
</tr>
<tr>
<td colspan="2" height="27">游戏提示:你能将方格全部填成绿色吗??开动脑筋,看看有什么规律和技巧吧。</td>
</tr>
</table>


没有相关教程
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台