Cheer 发表于 2007-4-28 11:09:02

游戏类围格子游戏

把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件
<!--网页特效代码由http://js.jojoo.net提供!-->
<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>
<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>
<!--
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>
<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></head><body><table width="90%" border="1">
            <tr>
                <td>
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                      <td width="44%" height="11" align="center"><font color="#ff0000"><b>红方得分:</b></font></td>
                      <td id="red" height="11" width="6%">0</td>
                      <td width="44%" height="11" align="center"><font color="#0000cc"><b><font color="#003399">蓝方得分:</font></b></font></td>
                      <td id="navy" height="11" width="6%">0</td>
                  </tr>
                  </table>
                </td>
                <td>
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                      <td width="35%" align="right">游戏大小:</td>
                      <td width="15%">
                        <input type="text" value="5" id="setsize" size="2" name="text2">
                      </td>
                      <td align="center" width="50%">
                        <input type="button" onclick="creategame()"
          value="重新开始" name="button2">
                      </td>
                  </tr>
                  </table>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr align="center">
                      <td height="30">
                        <p class="start" id="message">蓝方先走!!!</p>
                      </td>
                  </tr>
                  <tr align="center">
                      <td>
                        <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= 25
var size = 5

var totalsize = ((size+1)*scale) + 6
var cache = new object()
var move=0,point=0
var player = true

function initcache() {
    cache.x = 0
    cache.y = 0
    cache.red = 0
    cache.navy = 0
    move=0,point=0   
}

function updatescore() {
    document.all.red.innertext = cache.red
    document.all.navy.innertext = cache.navy
    if ((cache.red+cache.navy)==((size-1)*(size-1))) {
      board.onclick = null
      document.all.message.innertext = "游戏结束!"
    }
   
}

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].style
    el.pixeltop = (y*scale)+5
    el.pixelleft = (x*scale)+5
    el.pixelwidth = scale - 5
    el.pixelheight = scale - 5

}

function checkboard(x,y,dir, player) {
    var piece=0
    if ("vertical"==dir) {
      if ((x==size) || (x>1)) {
      var bpos = boardarray
      var nextv = boardarray
      if ((bpos["vertical"]) && (bpos["horizontal"]) && (nextv["horizontal"])) {
          point++
          piece++
          fillpos(x-1,y)
      }
      }
      if ((x==1) || (x<size)) {
          var nextv = boardarray
          var nexth = boardarray
          if ((nextv["vertical"]) && (nexth["horizontal"]) && (boardarray["horizontal"])) {
            point++
            piece++
            fillpos(x,y)
          }
      }   
    }   
    else {
      if ((y==size) || (y>1)) {
      var nextv = boardarray
      var bpos = boardarray
      if ((bpos["vertical"]) && (bpos["horizontal"]) && (nextv["vertical"])) {
          point++
          piece++
          fillpos(x,y-1)
      }
      }
      if ((y==1) || (y<size)) {
      var nextv = boardarray
      var nexth = boardarray
      if ((nextv["vertical"]) && (nexth["horizontal"]) && (boardarray["vertical"])) {
          point++
          piece++
          fillpos(x,y)
      }
      }
    }
    if (piece>0) {
      if (player)
       cache.navy+=piece
      else
       cache.red+=piece
      document.all.message.innertext = "得分! 继续走."
      updatescore()
      return player
    }
    else
      return !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- 5
            line.style.pixeltop = (y * scale)
            line.style.pixelleft = (x * scale) + 5
            cache.direction = "horizontal"
          }
      } else
      {
          if (y<size) {
            line.style.pixelwidth = 5
            line.style.pixelheight = scale - 5
            line.style.pixeltop = (y * scale) + 5
            line.style.pixelleft = x * scale
            cache.direction = "vertical"
          }
      }
      cache.x = x
      cache.y = y
      }
    }
   
}

function doclick() {

    if (cache.x==0) return
    if (boardarray)
      document.all.message.innertext="错误!请重新选择。"
    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.width
      el.style.height = line.style.height
      boardarray=true
      var nextplayer = checkboard(cache.x,cache.y,cache.direction, player)
      if (nextplayer!=player) {
      player = nextplayer
      if (player) {
          document.all.message.innertext = "轮到蓝方走"
          line.style.border = "1px navy solid"
      }
      else {
          document.all.message.innertext = "轮到红方走"
          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 = new object()
      for (var y=1; y < size+1; y++) {
      boardarray = new object
      boardarray["vertical"] = false
      boardarray["horizontal"] = false
      board+=(builddiv(x,y, scale))
      }
    }

    return board
}

function creategame() {
    size=parseint(document.all.setsize.value)
    if (size>12)
      size=12
    if (size<3)
      size=3
    document.all.setsize.value = size
    document.all.board.innerhtml = buildboard()
    document.all.board.onclick = doclick
    totalsize = ((size+1)*scale) + 6
    document.all.board.style.pixelwidth = totalsize
    document.all.board.style.pixelheight = totalsize
    document.all.message.innertext = "蓝方先走!!!"
    updatescore()   
}
document.write("<div id=board style=\"position: relative; height: "+ totalsize + "; width:" + totalsize + "; border: 1px black solid\">" + buildboard() + "</div>")
document.all.board.onmousemove = domousemove
document.all.board.onclick = doclick

</script>
                      </td>
                  </tr>
                  <tr>
                      <td> </td>
                  </tr>
                  </table>
                </td>
            </tr>
            <tr>
                <td colspan="2">游戏提示:此游戏为一双人游戏,蓝方先走,看谁围的格子多。</td>
            </tr>
            </table></body>
页: [1]
查看完整版本: 游戏类围格子游戏