圍格子Js網頁游戲(雙人對戰)

2024-09-05 12:21:07

字體：大中小

來源：轉載

供稿：網友

圍格子(雙人對戰網頁游戲)，誰圍的格子多，誰就贏，JavaScript技術編寫。默認是藍色玩家先開始，可設置游戲格子大小，默認值為5，數值越大，格子越多，難度也就是越大，JS愛好者正好可借此學習JavaScript游戲的編寫技巧。

<HTML><HEAD><TITLE>圍格子</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><META content="MSHTML 6.00.2900.2180" name=GENERATOR><style type="text/css"></style></HEAD><BODY><CENTER><STYLE>A.cOn {	FONT-WEIGHT: bolder; TEXT-DECORATION: none}#article {	PADDING-RIGHT: 15pt; PADDING-LEFT: 5pt; BACKGROUND: white; PADDING-BOTTOM: 0px; FONT: 12pt Verdana, geneva, arial, sans-serif; COLOR: black; PADDING-TOP: 10pt}#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 {	FONT-SIZE: 10pt}UL {	FONT-SIZE: 10pt}OL {	FONT-SIZE: 10pt}</STYLE><STYLE>#board {	FONT-FAMILY: arial}.dot {	FONT-SIZE: 0pt; BACKGROUND: black; WIDTH: 5px; POSITION: absolute; HEIGHT: 5px}#line {	FONT-SIZE: 0pt; POSITION: absolute; HEIGHT: 5px}.p1 {	FONT-SIZE: 0pt; BACKGROUND: navy; POSITION: absolute}.p2 {	FONT-SIZE: 0pt; BACKGROUND: red; POSITION: absolute}.p1B {	FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: navy; POSITION: absolute; TEXT-ALIGN: center}.p2B {	FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: red; POSITION: absolute; TEXT-ALIGN: center}</STYLE><STYLE type=text/css>BODY {	MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋體"}A {	FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: black; TEXT-DECORATION: none}A:hover {	FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: red; TEXT-DECORATION: underline}A:active {	FONT: 9pt "宋體"; CURSOR: hand; COLOR: #ff0033}</STYLE><TABLE cellSpacing=0 cellPadding=0 width=509 border=0>  <TBODY>  <TR>    <TD width=10></TD>    <TD width=499 vAlign=top bgcolor="#99FFFF" id=article>      <P class=start STYLE5 style="TEXT-ALIGN: left" STYLE1><FONT       style="FONT-WEIGHT: bold"><B>圍格子(雙人對戰游戲)</B></FONT></P>      <P align="left" class="STYLE2">誰圍的格子多，誰就贏。</P>      <P style="MARGIN-TOP: 5pt">      <SCRIPT>  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   id="70qarhlowxag"   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[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+=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[cache.x][cache.y][cache.direction])      document.all.message.innerText="不能走，請換個地方！"    else {      document.all.board.insertAdjacentHTML("beforeEnd","<div   id="70qarhlowxag"   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[cache.x][cache.y][cache.direction]=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   id="70qarhlowxag"   class=dot STYLE=/"top:" +  (x*scale) + "; left: " + (y*scale) + "/"></DIV>")  }     var boardArray = new Object  function buildBoard() {    initCache()    board = ("<div   class="70qarhlowxag"   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 Object        boardArray[x][y]["vertical"] = false        boardArray[x][y]["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   class="70qarhlowxag"   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>      </P>      <DIV style="MARGIN-TOP: 5pt; MARGIN-LEFT: 10pt">      <P class=start STYLE6 id=message STYLE3>藍色玩家先開始！</P>      <DD><BR>      <TABLE width=100 border=1>        <TBODY>        <TR>          <TD style="COLOR: red"><B>紅色</B></TD>          <TD id=red>0</TD></TR>        <TR>          <TD style="COLOR: navy"><B>藍色</B></TD>          <TD id=navy>0</TD></TR></TBODY></TABLE>      <P><BR></P>      <TABLE width=200>        <TBODY>        <TR>          <TD><span id="70qarhlowxag"    class="STYLE4">游戲大小:</span> </TD>          <TD><INPUT id=setSize size=2 value=5></TD></TR>        <TR>          <TD align=middle colSpan=2><INPUT onclick=createGame() type=button value=新游戲></TD></TR></TBODY></TABLE>      <P class=copyright></P></DD></DIV></TD></TR></TBODY></TABLE></CENTER></BODY></HTML>

上一篇：HTML勇闖迷宮游戲代碼

下一篇：一個JavaScript寫的簡單下注游戲代碼