<!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>
