按下按鈕後，場景變暗，顯示遊戲結束(Game Over)
我們要呈現的效果是：按下按鈕後，場景變暗，顯示遊戲結束(Game Over)
範例網址如下:
http://www.googledrive.com/host/0B7hg_8WvMyfJOXFqZWd5V0JtSjA
中間的按鈕就是<input type="button" value="點擊遊戲就結束了!" id="btnOver">
value裡面的內容就是按鈕要顯示什麼字樣，id就是你要使用他的名稱(以英文為主)
而<style type="text/css">裡面，
用#btnOver{}來裝飾、設定這個按鈕。
中間與排版不同的就是多了z-index以及cursor兩個設定。
cursor就是滑鼠移過去時，滑鼠鼠標是什麼造型?
可以參考這篇:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=alias
基本上我們常用的就是cursor: pointer;也就是讓鼠標變成可以點擊的手以及cursor:default;也就是讓鼠標變成一般的白色箭頭。
至於z-index則是設定z座標，也就是物體的遠近。值越大就越靠近我們，也就是越前面。
為了讓按鈕凸顯出來，因此我刻意把z-index設很大。
這樣，就能保證按鈕在所有元件的前面了。
再來，變暗的效果的原理就是：有個黑色的背景(要與背景大小一模一樣)，接著讓他慢慢顯示出來~
首先準備黑色背景的部分：
多了<div id="bgBlack" class="bg"></div>
這個是準備好做黑色背景的部分，接著是用css讓他變成黑色的
雖然是這樣說，但是我們先把它"隱藏"起來，這隱藏跟之前的dispaly:none;不同，
而是讓他的透明度為0(opacity:0)。
若你想設定別的背景色，可以參考:
http://www.w3schools.com/cssref/css_colors.asp
因為你的遊戲可能有其他物品，因此最後的黑色背景是在最前面蓋住他們。
接著就是慢慢顯示的部分了:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小遊戲教學5</title>
<style type="text/css">
#scene_main{
background:url(ebg.gif);
}
#desk{
background:url(table.gif) no-repeat;
width: 135px;
height: 69px;
position:absolute;
left: 50px;
top: 150px;
}
#door{
background:url(door.gif) no-repeat;
width: 60px;
height: 82px;
position:absolute;
left: 270px;
top: 44px;
}
.bg{
background-repeat:no-repeat;
width: 533px;
height: 273px;
position: absolute;
left: 0px;
top: 0px;
cursor: default;
z-index: -100;
}
#btnOver{
position:absolute;
left: 200px;
top: 100px;
z-index:1000;
cursor: pointer;
}
#bgBlack{
background: #000000;
z-index:1000;
opacity:0;
}
</style>
<script type="text/javascript">
window.onload=function(){
var timerOver; var speed=0.1; var opacity=0;
var bgBlack=getById("bgBlack");
getById("btnOver").onclick=function(){
this.style.display="none";
timerOver=setInterval(function(){
if(opacity<1){
opacity+=speed;
bgBlack.style.opacity = opacity; // 大部分的瀏覽器支援
bgBlack.style.filter = "alpha(opacity=" + opacity + ")"; //IE使用的方法
}else {
clearInterval(timerOver);
}
},100);
}
function getById(id){
return document.getElementById(id);
}
}
</script>
</head>
<body>
<div id="bgBlack" class="bg"></div>
<input type="button" value="點擊遊戲就結束了!" id="btnOver">
<div id="desk"></div>
<div id="door"></div>
<div class="bg" id="scene_main"></div>
</body></html>
看<script type="text/javascript">裡面的部分，
window.onload=function(){}包住的部分是我們要做的事情。
var timerOver; var speed=0.1; var opacity=0;這幾個變數分別是計時器(用來算時間)、顯示的速度、目前的透明度。
因為opacity是0~1，因此我的作法是用計時器讓透明度從0開始加，每次加0.1直到1。
var bgBlack=getById("bgBlack");則是用bgBlack這個變數來設定黑色背景。
getById("btnOver").onclick=function(){}就是用onclick設定當按鈕被點擊後會發生的事情。
function getById(id){}是用來簡寫抓取元件的方法，請直接照抄~
為了模擬真實效果，我的情境是：按下按鈕後，按鈕會消失(隱藏)，然後畫面變黑。
因此，在按鈕的onclick裡面，
我用this.style.display="none";讓按鈕被點擊後消失。
再來用timerOver做計時器的動作。
首先，計時器原本應該是長這樣:
setInterval(function(){
//你要做的事情
},100);
裡面的function(){}就是計時器要做的事情(也就是讓黑色背景慢慢顯示出來)，而後面的100則代表它的速度。因為單位是1/1000，因此速度為0.1秒。你可以改變這個數值來測出你喜歡的速度。
也就是說，計時器每0.1秒會做你function裡面的事情。
然後用timerOver=setInterval(funciotn(){},100);
則是預備到時候要將計時器停掉。
什麼時候計時器要停掉呢?就是黑色背景完全顯示出來時(也就是透明度為1時)。
因此看看function()裡面的內容:
if(opacity<1){
opacity+=speed;
bgBlack.style.opacity = opacity; // 大部分的瀏覽器支援
bgBlack.style.filter = "alpha(opacity=" + opacity + ")"; //IE使用的方法
}else {
clearInterval(timerOver);
}
用id判斷透明度是否為1?如果不為1，基本上就是小於1(因為從0開始)，
然後opacity+=speed;其實就是opacity=opacity+speed;
意思就是讓opacity這個變數累加speed(這邊我設定為0.1)
然後後面的bgBlack.style.opacity = opacity;跟bgBlack.style.filter = "alpha(opacity=" + opacity + ")";其實就是讓黑色背景的透明度改變。
因為IE瀏覽器比較龜毛，因此要用兩種寫法Orz
那麼什麼意思呢?
按下按鈕後，
過了0.1秒，opacity+speed=0+0.1，opacity=0.1，黑色背景的透明度變成0.1
又過了0.1秒，opacity+speed=0.1+0.1，opacity=0.2，黑色背景的透明度變成0.2
又過了0.1秒，opacity+speed=0.2+0.1，opacity=0.3，黑色背景的透明度變成0.3
依此類推，
注意！如果沒有else的部分，計時器是不會停止的!雖然不表示網頁會當掉或出錯，但是你之後可能有其他設定或處理，因此要用else的部分停止計時器。
那麼這樣下來的結果，等到opacity累加到1時，也就是沒有小於1時，就會跳到else的部分，
這時，用clearInterval(timerOver);就可以停止計時器，而整個畫面變暗的效果就達到了。
不過，光是這樣有點low，因此我在範例還是加上了顯示Game Over的部分，
結果就會變成這樣:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小遊戲教學5</title>
<style type="text/css">
#scene_main{
background:url(ebg.gif);
}
#desk{
background:url(table.gif) no-repeat;
width: 135px;
height: 69px;
position:absolute;
left: 50px;
top: 150px;
}
#door{
background:url(door.gif) no-repeat;
width: 60px;
height: 82px;
position:absolute;
left: 270px;
top: 44px;
}
.bg{
background-repeat:no-repeat;
width: 533px;
height: 273px;
position: absolute;
left: 0px;
top: 0px;
cursor: default;
z-index: -100;
}
#btnOver{
position:absolute;
left: 200px;
top: 100px;
z-index:1000;
cursor: pointer;
}
#bgBlack{
background: #000000;
z-index:1000;
opacity:0;
}
#lbOver{
position:absolute;
left: 150px;
top: 100px;
z-index:1002;
color: #ff0000;
cursor: default;
}
div{
font-size: 48px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* non-prefixed version, currently
not supported by any browser */
}
.hide{
display: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var timerOver; var speed=0.1; var opacity=0;
var bgBlack=getById("bgBlack");
getById("btnOver").onclick=function(){
this.style.display="none";
timerOver=setInterval(function(){
if(opacity<1){
opacity+=speed;
bgBlack.style.opacity = opacity; // 大部分的瀏覽器支援
bgBlack.style.filter = "alpha(opacity=" + opacity + ")"; //IE使用的方法
}else {
getById("lbOver").style.display="block";
clearInterval(timerOver);
}
},100);
}
function getById(id){
return document.getElementById(id);
}
}
</script>
</head>
<body>
<div id="lbOver" class="hide">Game Over</div>
<div id="bgBlack" class="bg"></div>
<input type="button" value="點擊遊戲就結束了!" id="btnOver">
<div id="desk"></div>
<div id="door"></div>
<div class="bg" id="scene_main"></div>
</body></html>
多了<div id="lbOver" class="hide">Game Over</div>
以及設定這個div的css:
#lbOver{
position:absolute;
left: 150px;
top: 100px;
z-index:1002;
color: #ff0000;
cursor: default;
}
div{
font-size: 48px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* non-prefixed version, currently
not supported by any browser */
}
.hide{
display: none;
}
看#lbOver這部分，是單就lbOver這個div的設定。
這裡多了color: #ff0000;
也就是讓這個字用紅色顯示。一樣，如果想要字體不同顏色,可以去上面的網址查色碼。
而font-size就是改變字的大小。一般使用的字體大小是12px,而字體有很多單位，我習慣是用px，可以改變數字達到你喜歡的字體大小。
接著有個div{}一大串的css設定，那個是用來讓文字無法反白的方法。
在網頁上，只要是文字通常都可以反白，因此用上這樣的css就可以不讓文字反白。
為什麼要這樣做呢?這是讓使用者有玩遊戲的一致性或使用者經驗。
除了可以點擊的東西外，其他區域的鼠標都應該是cursor:default，而如果你點擊的物品會反白，會讓使用者覺得很奇怪，
因此這麼做就不會有使用者狂點結果反白物品的情況了。
再來.hide的部分就是之前說到的隱藏，在lbOver上加入class="hide"先讓Game Over字樣隱藏。
那麼，什麼時候，Game Over的字會顯示出來呢?
也就是黑色背景完全顯示出來的時候。
因此，在else裡面加入getById("lbOver").style.display="block";
這個範例就完成了!!!
如果想要用白色背景呢?
簡單，
將黑色背景的色碼改掉就好(不用改id):
#bgBlack{
background: #FFFFFF;
z-index:1000;
opacity:0;
}
那麼效果就會是這樣:
http://www.googledrive.com/host/0B7hg_8WvMyfJdks5Z3pEbkhHU2c
通常Game Over是變暗，Success是變白，當然你也可以用自己喜歡的背景而非變黑變白。
而變換的速度也可以調整變數或計時器速度來達到你喜歡的感覺。
舉例:
http://www.googledrive.com/host/0B7hg_8WvMyfJN1B5VjBURkhEQWc
你會發現變暗的速度非~常緩慢!這是因為我把speed調成0.01了，當然，我是讓你感受改變速度的感覺，如果把這變數數值調大，當然速度就會變快。不過,不要調到超過1呀!因為透明度是0~1的範圍!
那麼，久久才發一次的教學文就先這樣囉~
下一個教學應該是跟物品欄有關!雖然是換湯不換藥啦XDDD
