📄 ch19-266.html
字号:
<HTML>
<HEAD>
<TITLE>游戏篇--双人小游戏</TITLE>
</HEAD>
<BODY bgcolor="#fef4d2" >
<br><br>
<center>
<h2>游戏篇--双人小游戏</h2>
<hr width=300>
<!-- 案例代码1开始 -->
<script language=JavaScript>
<!-- [Step1]: 这里可以更改小方块的个数 -->
var size = 5
<!-- [Step2]: 在此能够设置外边框的大小 -->
var scale= 20
var totalSize = ((size+1)*scale) + 6
var move=0,point=0
var player = true
var cache = new Object()
var boardArray = new Object
function DomainGame() {
document.all.board.innerHTML = BuildBoard()
document.all.board.onclick = MouseClick
totalSize = ((size+1)*scale) + 6
document.all.board.style.pixelWidth = totalSize
document.all.board.style.pixelHeight = totalSize
document.all.message.innerText = "蓝方先走"
}
function BuildBoard() {
ReloadDomain()
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 Object
boardArray[x][y]["vertical"] = false
boardArray[x][y]["horizontal"] = false
board+=(BuildDiv(x,y, scale)) } }
return board
}
function ReloadDomain() {
cache.x = 0
cache.y = 0
cache.red = 0
cache.navy = 0
move=0,point=0
}
function BuildDiv(x,y, scale) {
return ("<DIV CLASS=dot STYLE=\"top:" + (x*scale) + "; left: " + (y*scale) + "\"></DIV>")
}
function CreatMenu(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
}
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++
FillDomain(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++
FillDomain(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++
FillDomain(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++
FillDomain(x,y) } } }
if (piece>0) {
if (player) cache.navy+=piece
else cache.red+=piece
document.all.message.innerText = "成功，奖励一次。请继续"
return player }
else return !player
}
function FillDomain(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 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 MouseClick() {
if (cache.x==0) return
if (boardArray[cache.x][cache.y][cache.direction])
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[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++
}
</script>
<!-- 案例代码1结束 -->
<!-- 案例代码2开始 -->
<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>
<script language=JavaScript>
document.write("<DIV ID=board STYLE=\"position: relative; height: "+ totalSize + "; width:" + totalSize + "; border: 2px #009933 solid\">" + BuildBoard() + "</DIV>")
document.all.board.onmousemove = DoMouseMove
document.all.board.onclick = MouseClick
</script>
<div STYLE="margin-left: 10pt; margin-top: 5pt">
<p class="start" ID="message">蓝方先走</p>
<input type="button" onclick="DomainGame()" value="重新开始">
</div>
<!-- 案例代码2结束 -->
</BODY>
</HTML>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -