生活随笔
收集整理的這篇文章主要介紹了
3*3数字华容道
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML網頁小游戲
《3*3數字華容道》
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>3x3數字華容道</title><style type="text/css">.div0{width:100%
;height:350px
;text-align:center
;}.div1 {width: 312px
;height: 312px
;background-color: #6C6C6C
;margin-left:45%
;}.div2 {width: 100px
;height: 100px
;float: left
;margin-left: 3px
;margin-top: 3px
;background-color: #fe87bf
;text-align: center
;font-size: 80px
;color: #8a0b4a
;}.div3 {margin-top: 20px
;width: 100%
;height: 80px
;border-color: #000000
;text-align: center
;margin-left:100px
;float:center
;}.buttonStyle {width: 150px
;height: 50px
;font-size: 30px
;margin-top: 15px
;border-radius: 5%
;background-color: #cf9fff
;}.timeText {margin-left: 60px
;font-size: 30px
;}.inputStyle {float: auto
;width: 100px
;height: 30px
;font-size: 30px
;}</style><script type=
"text/javascript">
window.onload = function() {//window.
onload() 方法用于在網頁加載完畢后立刻執行的操作，即當 HTML 文檔加載完畢后，立刻執行某個方法。var numArray = new
Array(9
);var divObjArray = new
Array(9
);for(var i = 0
; i < divObjArray.length
; i++) {numArray[i] = i + 1
;divObjArray[i] = document.
getElementById("index_" + i
);}var startButton = document.
getElementById("startButton");var timer
;var curTime = 0
;var timeText = document.
getElementById("outputTime");var promptText = document.
getElementById("promptText");var curjump = 0
;var jump = document.
getElementById("jump");startButton.onclick = function() {if(startButton.innerHTML == "游戲中...") {return
;}// 更改按鈕顯示字樣，更改按鈕顏色startButton.innerHTML =
"游戲中...";startButton.style.backgroundColor =
"#FF7575";// 隨機分布1~9數字所在位置numArray.sort(function() {return Math.
random() > 0.5 ?
-1 : 1
;});for(var i = 0
; i < divObjArray.length
; i++) {if(numArray[i] == 9) {divObjArray[i].innerHTML =
"";divObjArray[i].style.backgroundColor =
"#6C6C6C";continue
;}divObjArray[i].innerHTML = numArray[i]
;divObjArray[i].style.backgroundColor =
"#fe87bf";}// 定時器開始計時
setTimeout(timing
, 1000
);//等待1000毫秒執行timing// 同步顯示時間文本curTime = 0
;timeText.value = curTime
;// 將頂部的“目標圖案”字樣隱藏promptText.style.display =
"none";}// 計時器function timing() {curTime++
;timeText.value = curTime
;timer =
setTimeout(timing
, 1000
);}var emptyIndex = 9
;// 獲取空白格所在下標function updateEmptyFun() {emptyIndex = numArray.
indexOf(9
);}function updatePositionFun(divIndex) {if(startButton.innerHTML == "開始游戲") {return
;}curjump += 1
;jump.value = curjump
;numArray[emptyIndex] = divObjArray[divIndex].innerHTML
;numArray[divIndex] = 9
;divObjArray[emptyIndex].innerHTML = divObjArray[divIndex].innerHTML
;divObjArray[emptyIndex].style.backgroundColor =
"#fe87bf";divObjArray[divIndex].innerHTML =
"";divObjArray[divIndex].style.backgroundColor =
"#6C6C6C";if(divIndex == 8) {isGameOver();}}// 判斷游戲是否通關function isGameOver() {for(var i = 0
; i < numArray.length
; i++) {if(numArray[i] != i + 1) {return
;}}// 游戲通關，彈框告知玩家游戲順利通關，以及所用時間
alert("通關啦！ 用時：" + timeText.value +
"s");//跳轉煙花界面
setTimeout("window.location.href='煙花.html'",1000
);// 將“開始游戲”按鈕復位startButton.innerHTML =
"開始游戲";startButton.style.backgroundColor =
"#cf9fff";// 將計時器復位
clearTimeout(timer
);curjump = 0
;jump.value = 0
;jump.innerHTML =
"";// 將頂部的“目標圖案”字樣設置為顯示promptText.style.display =
"block";}// 下標為0的格子的單擊響應函數divObjArray[0].onclick = function() {updateEmptyFun();if(emptyIndex == 1 || emptyIndex == 3) {updatePositionFun(0
);}}// 下標為2的格子的單擊響應函數divObjArray[2].onclick = function() {updateEmptyFun();if(emptyIndex == 1 || emptyIndex == 5) {updatePositionFun(2
);}}// 下標為6的格子的單擊響應函數divObjArray[6].onclick = function() {updateEmptyFun();if(emptyIndex == 3 || emptyIndex == 7) {updatePositionFun(6
);}}// 下標為8的格子的單擊響應函數divObjArray[8].onclick = function() {updateEmptyFun();if(emptyIndex == 7 || emptyIndex == 5) {updatePositionFun(8
);}}// 其他下標的格子的單擊響應函數function resFun() {var curIndex
;for(var i = 1
; i < divObjArray.length
; i++) {if(i == 1) {divObjArray[i].onclick = function() {updateEmptyFun();curIndex = divObjArray.
indexOf(this
);if(emptyIndex == 0 || emptyIndex == 4 || emptyIndex == 2) {updatePositionFun(curIndex
);}}continue
;}if(i == 7) {divObjArray[i].onclick = function() {updateEmptyFun();curIndex = divObjArray.
indexOf(this
);if(emptyIndex == 6 || emptyIndex ==4 || emptyIndex == 8) {updatePositionFun(curIndex
);}}continue
;}if(i == 3) {divObjArray[i].onclick = function() {updateEmptyFun();curIndex = divObjArray.
indexOf(this
);if(emptyIndex == 0 || emptyIndex == 4 || emptyIndex == 6) {updatePositionFun(curIndex
);}}continue
;}if(i == 5) {divObjArray[i].onclick = function() {updateEmptyFun();curIndex = divObjArray.
indexOf(this
);if(emptyIndex == 2 || emptyIndex == 4 || emptyIndex == 8) {updatePositionFun(curIndex
);}}continue
;}divObjArray[i].onclick = function() {updateEmptyFun();curIndex = divObjArray.
indexOf(this
);if(emptyIndex == 1 || emptyIndex == 3 || emptyIndex == 7 || emptyIndex == 5) {updatePositionFun(curIndex
);}}}}resFun();}</script></head><body><div class=
"div3"><span style=
"font-size: 50px;color: #8a0b4a;font-family:黑體;" id=
"promptText">目標圖案</span></div><div class =
"div0"><div class=
"div1"><div class=
"div2" id=
"index_0">1</div><div class=
"div2" id=
"index_1">2</div><div class=
"div2" id=
"index_2">3</div><div class=
"div2" id=
"index_3">4</div><div class=
"div2" id=
"index_4">5</div><div class=
"div2" id=
"index_5">6</div><div class=
"div2" id=
"index_6">7</div><div class=
"div2" id=
"index_7">8</div><div class=
"div2" style=
"background-color: #6C6C6C;" id=
"index_8"></div></div></div><div class=
"div3" ><button class=
"buttonStyle" id=
"startButton" name=
"button" value=
"StartButton">開始游戲</button><span class=
"timeText">時間</span><input class=
"inputStyle" type=
"text" name=
"outputTime" id=
"outputTime" value=
"" readonly=
"readonly" /><span class=
"timeText" style=
"margin-left: 0px;">s</span><span class=
"timeText">走了</span><input class=
"inputStyle" type=
"text" name=
"jump" id=
"jump" value=
"" readonly=
"readonly" /><span class=
"timeText" style=
"margin-left: 0px;">步</span></div></body></html>
總結
以上是生活随笔為你收集整理的3*3数字华容道的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
