目前共有3篇帖子。 內容轉換:不轉換▼
 
點擊 回復
344 2
【程序】比大小游戏
一派護法 十九級
1樓 發表于:2015-12-17 21:14

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>比大小游戏</title>
<style>
body {
    font-family: Arial;
    font-size: 14px;
}
input {
    font-family: "宋体";
    width: 78px;
    height: 25px;
}
#Main {
    overflow: hidden;
    margin: 0px auto 0px auto;
    width: 585px;
}
#Main > img {
    float: left;
}
#Main > section {
    float: left;
    width: 245px;
    text-align: center;
    padding-top: 40px;
}
#Main h3 {
    font-weight: bold;
    color: #FFA600;
    font-size: 16px;
}
#Main input {
    margin-top: 35px;
    width: 118px;
    height: 38px;
    color: #7B8E94;
    font-size: 18px;
    font-family: "黑体";
}
#Main td {
    text-align: left;
}

#Game {
    text-align: center;
}
#Game > * {
    margin: 0px auto 0px auto;
}
#fields {
    padding-bottom: 35px;
    overflow: hidden;
    width: 560px;
}
#buttons {
    width: 360px;
}
#fields > * {
    float: left;
}
#fields > section {
    border: 1px solid grey;
    width: 90px;
    height: 105px;
    margin: 20px 20px 0px 20px;
    text-align: left;
    padding-top: 25px;
    padding-left: 10px;
}
fieldset {
    width: 200px;
    height: 175px;
    padding: 0px;
}
legend {
    font-size: 13px;
}
fieldset > p {
    font-size: 100px;
    font-weight: bold;
    color: #9B6464;
    margin: 15px 0px 0px 0px;
}
#message {
    width: 163px;
    height: 20px;
    background-color: #FBECD1;
    border: 1px solid #FED0B0;
    color: #894626;
    font-size: 12px;
    padding-top: 2px;
    margin-top: 100px;
    margin-bottom: 8px;
}

#GameOverBackground {
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #999999;
    opacity: 0.6;
}
#GameOverBackground div {
    background-color: black;
    border: 1px solid #00FFFF;
    width: 570px;
    height: 180px;
    margin: 0px auto 0px auto;
}
#GameOver {
    text-align: center;
    width: 570px;
    height: 180px;
    position: fixed;
    top: 0px;
    left: 0px;
    border: 1px solid black;
}
#GameOver p {
    color: red;
    font-size: 100px;
    font-weight: bold;
    margin: 6px 0px 0px 0px;
}
</style>
<script>
var records = [];
var values = [null, null];
var intervalID = null;
var msgCount = 0;
var msgIntervalID = null;
var HP, score;

function Rand(min, max) {
    return min + RandByMax(max - min);
}

function RandByMax(max) {
    return Math.round(Math.random() * max);
}

function begin() {
    UpdateGameScreen(false);
    intervalID = setInterval(UpdateGameScreen, 50);
    UpdateGameButton();
}

function RemoveTimer() {
    if (intervalID != null) {
        clearInterval(intervalID);
        intervalID = null;
    }
}

function RemoveMessageTimer() {
    if (msgIntervalID != null) {
        clearInterval(msgIntervalID);
        msgIntervalID = null;
    }
    msgCount = 0;
}

function stop() {
    var points;
    RemoveTimer();
    points = values[1] - values[0];
    UpdateGameButton();
    UpdateGameScreen(false);
    
    if (points >= 0) {
        score += points;
        ShowMessage("你赢了,获取分数:" + points + "分");
    } else {
        if (HP <= 1) {
            HP = 0;
            GameOver();
        } else {
            HP--;
            ShowMessage("你输了,扣取生命:1");
        }
    }
    UpdateGameScore();
}

function UpdateGameScore() {
    var span = document.getElementById("fields").getElementsByTagName("section").item(0).getElementsByTagName("span");
    span.item(0).innerHTML = score;
    span.item(1).innerHTML = HP;
}

function GameOver() {
    var background = document.createElement("div");
    var frame = document.createElement("div");
    var text = document.createElement("div");
    var p = document.createElement("p");
    var btn = document.createElement("input");
    
    background.appendChild(frame);
    p.innerHTML = "Game over";
    text.appendChild(p);
    btn.type = "button";
    btn.value = "确定";
    btn.onclick = RequireName;
    text.appendChild(btn);
    
    background.id = "GameOverBackground";
    text.id = "GameOver";
    document.body.appendChild(background);
    document.body.appendChild(text);
    onResize();
    window.onresize = onResize;
}

function RemoveGameOver() {
    document.body.removeChild(document.getElementById("GameOverBackground"));
    document.body.removeChild(document.getElementById("GameOver"));
    window.onresize = null;
}

function onResize() {
    var background = document.getElementById("GameOverBackground");
    var frame = background.firstChild;
    var text = document.getElementById("GameOver");
    var height = document.documentElement.clientHeight;
    var mtop = Math.round((height - frame.offsetHeight) / 2);
    background.style.height = height + "px";
    frame.style.marginTop = mtop + "px";
    text.style.left = frame.offsetLeft + "px";
    text.style.top = frame.offsetTop + "px";
}

function RequireName() {
    var name = prompt("人过留名,雁过留声!", "");
    if (name == null) {
        return;
    } else if (name == "") {
        name = "见不得人";
    }
    AddRecord(name, score, 3);
    RemoveGameOver();
    ShowMainScreen();
}

function AddRecord(name, score, maxNum) {
    var record = [name, score];
    var i;
    for (i = 0; i < records.length; i++) {
        if (records[i][1] < score) {
            break;
        }
    }
    records.splice(i, 0, record);
    
    while (records.length > maxNum) {
        records.pop();
    }
}

function ShowMessage(message) {
    var msgdiv = document.getElementById("message");
    msgdiv.innerHTML = message;
    msgdiv.style.visibility = "visible";
    if (msgIntervalID == null) {
        msgCount = 8; // 8 * 250ms = 2s
        msgIntervalID = setInterval(HideMessage, 250);
    }
}

function HideMessage(force) {
    msgCount--;
    if (msgCount <= 0 || force === true) {
        document.getElementById("message").style.visibility = "hidden";
        RemoveMessageTimer();
    }
}

function UpdateGameScreen(init) {
    var fieldsets = document.getElementsByTagName("fieldset");
    var p1 = fieldsets.item(0).getElementsByTagName("p").item(0);
    var p2 = fieldsets.item(1).getElementsByTagName("p").item(0);
    if (intervalID != null) {
        values[0] = Rand(1, 999);
        values[1] = Rand(1, 999);
        p1.innerHTML = values[0];
        p2.innerHTML = values[1];
    } else {
        if (init) {
            p1.innerHTML = p2.innerHTML = "???";
        }
    }
}

function UpdateGameButton() {
    var btn = document.getElementById("buttons").getElementsByTagName("input").item(0);
    if (intervalID == null) {
        btn.value = "比一比";
        btn.onclick = begin;
    } else {
        btn.value = "停";
        btn.onclick = stop;
    }
}

function ShowMainScreen() {
    RemoveTimer();
    HideMessage(true);
    UpdateMainScreen();
    document.getElementById("Main").style.display = "";
    document.getElementById("Game").style.display = "none";
}

function ShowGameScreen() {
    InitGameScore();
    UpdateGameScreen(true);
    UpdateGameButton();
    document.getElementById("Main").style.display = "none";
    document.getElementById("Game").style.display = "";
}

function InitGameScore() {
    score = 0;
    HP = 3;
    UpdateGameScore();
}

function UpdateMainScreen() {
    var trs = document.getElementsByTagName("tr");
    var i, tds;
    for (i = 0; i < records.length && i < 3; i++) {
        tds = trs.item(i).getElementsByTagName("td");
        SetText(tds.item(1), records[i][0]);
        SetText(tds.item(2), records[i][1]);
    }
}

function SetText(obj, text) {
    if (obj.innerText) {
        obj.innerText = text;
    } else {
        obj.textContent = text;
    }
}

function ConfirmExit() {
    if (confirm("你确定不玩了吗?")) {
        ShowMainScreen();
    }
}
</script>
</head>

<body>
<section id="Main">
  <img src="welcome.png" alt="welcome" width="335" height="300">
  <section>
    <h3>比大小排行</h3>
    <table border="0">
      <tbody>
        <tr style="color:red">
          <td width="60px" align="right">第一名:</td>
          <td width="90px">空缺</td>
          <td width="45px">0</td>
        </tr>
        <tr>
          <td align="right">第二名:</td>
          <td>空缺</td>
          <td>0</td>
        </tr>
        <tr>
          <td align="right">第三名:</td>
          <td>空缺</td>
          <td>0</td>
        </tr>
      </tbody>
    </table>
    <input type="button" value="开始" onClick="ShowGameScreen()">
  </section>
</section>
<section id="Game" style="display:none">
  <div id="message" style="visibility:hidden"></div>
  <div id="fields">
    <fieldset>
      <legend>电脑</legend>
      <p>???</p>
    </fieldset>
    <section>
      <p style="color:red">分数 <span>0</span></p>
      <p>生命 <span>3</span></p>
    </section>
    <fieldset>
      <legend>玩家</legend>
      <p>???</p>
    </fieldset>
  </div>
  <div id="buttons">
    <input type="button" value="比一比" onClick="begin()">
    <input type="button" value="不玩了" onClick="ConfirmExit()">
  </div>
</section>
</body>
</html>

一派護法 十九級
2樓 發表于:2015-12-17 21:14



这是其中的welcome.png
一派護法 十九級
3樓 發表于:2015-12-17 21:21

定义的JavaScript函数列表:
AddRecord(name, score, maxNum)
begin()
ConfirmExit()
GameOver()
HideMessage(force)
InitGameScore()
onResize()
Rand(min, max)
RandByMax(max)
RemoveGameOver()
RemoveMessageTimer()
RemoveTimer()
RequireName()
SetText(obj, text)
ShowGameScreen()
ShowMainScreen()
ShowMessage(message)
stop()
UpdateGameButton()
UpdateGameScore()
UpdateGameScreen(init)
UpdateMainScreen()

回復帖子

內容:
用戶名: 您目前是匿名發表
驗證碼:
(快捷鍵:Ctrl+Enter)
 

本帖信息

點擊數:344 回複數:2
評論數: ?
作者: 巨大八爪鱼
最後回復:巨大八爪鱼
最後回復時間:2015-12-17 21:21
 
©2010-2024 Arslanbar Ver2.0
除非另有聲明,本站採用創用CC姓名標示-相同方式分享 3.0 Unported許可協議進行許可。