摘要:javascript 小遊戲小技巧教學4(簡易密室遊戲part4)
到了上一篇開始，你就可以依照自己設計的架構做一個簡單的密室遊戲了。
不過，因為是純網頁遊戲，只要使用者按下滑鼠右鍵、檢視原始碼，
你的解答不就一目了然了嗎~這樣會失去遊戲的樂趣......(雖然會這麼做的人本身也不是真的很認真在玩遊戲就是→這是技術性犯規呀XD)
因此我們來降低使用者一目了然的機率，也就是讓你的檔案分成很多個。
把CSS的部分存成一個檔案叫做style.css，
內容就是我們style的部分：
#scene_main{
background:url(ebg.gif);
}
#desk{
background:url(table.gif) no-repeat;
width: 135px;
height: 69px;
position:absolute;
left: 50px;
top: 150px;
cursor: pointer;
}
#door{
background:url(door.gif) no-repeat;
width: 60px;
height: 82px;
position:absolute;
left: 270px;
top: 44px;
cursor: pointer;
}
#scene_undertable{
background:url(under.gif);
}
#hint{
width: 20px;
height: 16px;
position:absolute;
left: 283px;
top: 114px;
cursor: pointer;
display: none;
}
#code{
background:url(code.gif) no-repeat;
width: 328px;
height: 140px;
position:absolute;
left: 102px;
top: 50px;
cursor: default;
display: none;
}
#scene_door{
background:url(normalbg.gif);
}
#doorClose{
background:url(door.gif) no-repeat;
background-size: 100%;
width: 151px;
height: 204px;
position:absolute;
left: 191px;
top: 17px;
cursor: default;
display: none;
}
#pad{
background:url(pad.gif) no-repeat;
background-size: 100%;
width: 50px;
height: 83px;
position:absolute;
left: 380px;
top: 30px;
cursor: pointer;
display: none;
}
#scene_door2{
background:url(normalbg.gif);
}
#tbPass{
background: #999999;
border: 1px #333333 solid;
width: 100px;
text-align: center;
position: absolute;
left: 200px;
top: 30px;
cursor: default;
display: none;
}
#trError{
background: #000000;
color: #FFFFFF;
height: 25px;
}
#btnOk{
background: #FFFF00;
color: #000000;
width: 30px;
height: 20px;
cursor: pointer;
z-index: 50px;
}
#btnOk:enabled:active{
background: #FF0000;
color:#FFFFFF;
}
#scene_ok{
background: #FFFF00;
color: #FF0000;
font-size: 36px;
text-align:center;
}
.bg{
background-repeat:no-repeat;
width: 533px;
height: 273px;
position: absolute;
left: 0px;
top: 0px;
cursor: default;
z-index: -100;
}
.hide{
display: none;
}
input[type=button]{
border: none;
outline: none;
cursor: pointer;
}
#btnBack{
background: #666666;
opacity: 0.5;
width: 533px;
height: 35px;
position: absolute;
left: 0px;
top: 238px;
z-index: 100px;
}
#btnBack:hover{
opacity: 0.8;
}
#btnBack:enabled:active{
opacity: 0.1;
}
.up{
background: url(btnUp1.gif) no-repeat;
background-size: 100%;
width: 20px;
height: 20px;
z-index: 50px;
}
.up:enabled:active{
background: url(btnUp2.gif) no-repeat;
background-size: 100%;
}
.dn{
background: url(btnDn1.gif) no-repeat;
background-size: 100%;
width: 20px;
height: 20px;
z-index: 50px;
}
.dn:enabled:active{
background: url(btnDn2.gif) no-repeat;
background-size: 100%;
}
.solution{
border: 1px #000000 solid;
background: #FFFFFF;
color: #000000;
height: 20px;
cursor: default;
}
然後把javascript的部分另存成control.js，
內容就是：
window.onload=function(){
var scene={
main: new Array("desk","door","scene_main"),
undertable: new Array("hint","btnBack","scene_undertable"),
door: new Array("doorClose","pad","scene_door"),
pad: new Array("tbPass","scene_door2"),
ok: new Array("scene_ok")
};
var now="main";
var result="18,2,7";
var num1=1;
var num2=1;
var num3=1;
var isHint=false;
getById("desk").onclick=function(){
hide(scene.main);
show(scene.undertable);
now="undertable";
}
getById("door").onclick=function(){
hide(scene.main);
show(scene.door);
getById("btnBack").style.display="block";
now="door";
}
getById("btnBack").onclick=function(){
if(now=="undertable"){
show(scene.main);
hide(scene.undertable);
now="main";
}else if(now=="door"){
show(scene.main);
hide(scene.door);
now="main";
getById("btnBack").style.display="none";
}else if(now=="code"){
showHint("code","hint")
now="undertable";
}else if(now=="pad"){
show(scene.door);
hide(scene.pad);
now="door";
}
}
getById("hint").onclick=function(){
showHint("hint","code");
if(isHint!=true) isHint=true;
now="code";
}
getById("pad").onclick=function(){
hide(scene.door);
show(scene.pad);
getById("trError").innerHTML="";
now="pad";
}
getById("btnUp1").onclick=function(){
if(num1<26) num1++; else num1=1;
getById("show1").innerHTML=numToEn(num1);
getById("trError").innerHTML="";
}
getById("btnUp2").onclick=function(){
if(num2<26) num2++; else num2=1;
getById("show2").innerHTML=numToEn(num2);
getById("trError").innerHTML="";
}
getById("btnUp3").onclick=function(){
if(num3<26) num3++; else num3=1;
getById("show3").innerHTML=numToEn(num3);
getById("trError").innerHTML="";
}
getById("btnDn1").onclick=function(){
if(num1>2) num1--; else num1=26;
getById("show1").innerHTML=numToEn(num1);
getById("trError").innerHTML="";
}
getById("btnDn2").onclick=function(){
if(num2>2) num2--; else num2=26;
getById("show2").innerHTML=numToEn(num2);
getById("trError").innerHTML="";
}
getById("btnDn3").onclick=function(){
if(num3>2) num3--; else num3=26;
getById("show3").innerHTML=numToEn(num3);
getById("trError").innerHTML="";
}
getById("btnOk").onclick=function(){
if(num1+","+num2+","+num3==result&&isHint) {
// 解出謎題
hide(scene.pad);
show(scene.ok);
getById("btnBack").style.display="none";
} else getById("trError").innerHTML="Error";
}
function numToEn(num){
if(num==1) return "A";
else if(num==2) return "B";
else if(num==3) return "C";
else if(num==4) return "D";
else if(num==5) return "E";
else if(num==6) return "F";
else if(num==7) return "G";
else if(num==8) return "H";
else if(num==9) return "I";
else if(num==10) return "J";
else if(num==11) return "K";
else if(num==12) return "L";
else if(num==13) return "M";
else if(num==14) return "N";
else if(num==15) return "O";
else if(num==16) return "P";
else if(num==17) return "Q";
else if(num==18) return "R";
else if(num==19) return "S";
else if(num==20) return "T";
else if(num==21) return "U";
else if(num==22) return "V";
else if(num==23) return "W";
else if(num==24) return "X";
else if(num==25) return "Y";
else if(num==26) return "Z";
}
function getById(id){
return document.getElementById(id);
}
function hide(scene){
for(var i in scene){
getById(scene[i]).style.display="none";
}
}
function show(scene){
for(var i in scene){
getById(scene[i]).style.display="block";
}
}
function showHint(obj1,obj2){
getById(obj1).style.display="none";
getById(obj2).style.display="block";
}
}這樣的話，除了原本的index.html檔案，就有另外的style.css與control.js檔案了~
而index.html的內容則改成：
<!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>小遊戲教學4</title>
</head>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="control.js"></script>
<body>
<input type="button" id="btnBack" class="hide" />
<!-- 主要場景 -->
<div id="desk"></div>
<div id="door"></div>
<div class="bg" id="scene_main"></div>
<!-- 桌子場景 -->
<div id="code"></div>
<div id="hint"></div>
<div class="bg hide" id="scene_undertable"></div>
<!-- 門場景 -->
<div id="pad"></div>
<div id="doorClose"></div>
<div class="bg hide" id="scene_door"></div>
<!-- 密碼鎖場景 -->
<table id="tbPass" cellpadding="0" cellspacing="10">
<tr><td id="trError" colspan="3"></td></tr>
<tr><td><input type="button" id="btnUp1" class="up"></td><td><input type="button" id="btnUp2" class="up"></td><td><input type="button" id="btnUp3" class="up"></td></tr>
<tr><td id="show1" class="solution">A</td><td id="show2" class="solution">A</td><td id="show3" class="solution">A</td></tr>
<tr><td><input type="button" id="btnDn1" class="dn"></td><td><input type="button" id="btnDn2" class="dn"></td><td><input type="button" id="btnDn3" class="dn"></td></tr>
<tr><td colspan="3" align="right"><input type="button" id="btnOk" value="OK"></td></tr>
</table>
<div class="bg hide" id="scene_door2"></div>
<!-- 脫出成功 -->
<div class="bg hide" id="scene_ok">Congratulations!</div>
</body>
</html>
也就是原本的style部分改成<link rel="stylesheet" href="style.css" />
而javascript則是改成<script type="text/javascript" src="control.js"></script>
是不是簡潔很多呀~這樣一來，可以減少使用者直接看到答案的風險。當然，如果你的答案是像我那樣用陣列或文字(字串)做紀錄，那當然很容易被人發現解答！
一開始SV看到這樣的index.html檔案也是有心理障礙(會擔心我要怎麼編寫程式)!
但其實這麼做只是將javascript與css的部分當作連結給你的index.html使用，
接下來對於control.js的修改是沒問題的，而這麼做也確實的幫作品做分工。
想像你有美工與專門寫javascript的人，只要這樣分配好，
寫javascript的人可以安心寫javascript的部分(因為和index.html是不同的檔案呀)，
甚至可以將javascript再做更細的分工!
新增一個檔案叫做function.js，
它的內容如下：
function numToEn(num){
if(num==1) return "A";
else if(num==2) return "B";
else if(num==3) return "C";
else if(num==4) return "D";
else if(num==5) return "E";
else if(num==6) return "F";
else if(num==7) return "G";
else if(num==8) return "H";
else if(num==9) return "I";
else if(num==10) return "J";
else if(num==11) return "K";
else if(num==12) return "L";
else if(num==13) return "M";
else if(num==14) return "N";
else if(num==15) return "O";
else if(num==16) return "P";
else if(num==17) return "Q";
else if(num==18) return "R";
else if(num==19) return "S";
else if(num==20) return "T";
else if(num==21) return "U";
else if(num==22) return "V";
else if(num==23) return "W";
else if(num==24) return "X";
else if(num==25) return "Y";
else if(num==26) return "Z";
}
function getById(id){
return document.getElementById(id);
}
function hide(scene){
for(var i in scene){
getById(scene[i]).style.display="none";
}
}
function show(scene){
for(var i in scene){
getById(scene[i]).style.display="block";
}
}
function showHint(obj1,obj2){
getById(obj1).style.display="none";
getById(obj2).style.display="block";
}而原本的control.js則改成:
window.onload=function(){
var scene={
main: new Array("desk","door","scene_main"),
undertable: new Array("hint","btnBack","scene_undertable"),
door: new Array("doorClose","pad","scene_door"),
pad: new Array("tbPass","scene_door2"),
ok: new Array("scene_ok")
};
var now="main";
var result="18,2,7";
var num1=1;
var num2=1;
var num3=1;
var isHint=false;
getById("desk").onclick=function(){
hide(scene.main);
show(scene.undertable);
now="undertable";
}
getById("door").onclick=function(){
hide(scene.main);
show(scene.door);
getById("btnBack").style.display="block";
now="door";
}
getById("btnBack").onclick=function(){
if(now=="undertable"){
show(scene.main);
hide(scene.undertable);
now="main";
}else if(now=="door"){
show(scene.main);
hide(scene.door);
now="main";
getById("btnBack").style.display="none";
}else if(now=="code"){
showHint("code","hint")
now="undertable";
}else if(now=="pad"){
show(scene.door);
hide(scene.pad);
now="door";
}
}
getById("hint").onclick=function(){
showHint("hint","code");
if(isHint!=true) isHint=true;
now="code";
}
getById("pad").onclick=function(){
hide(scene.door);
show(scene.pad);
getById("trError").innerHTML="";
now="pad";
}
getById("btnUp1").onclick=function(){
if(num1<26) num1++; else num1=1;
getById("show1").innerHTML=numToEn(num1);
getById("trError").innerHTML="";
}
getById("btnUp2").onclick=function(){
if(num2<26) num2++; else num2=1;
getById("show2").innerHTML=numToEn(num2);
getById("trError").innerHTML="";
}
getById("btnUp3").onclick=function(){
if(num3<26) num3++; else num3=1;
getById("show3").innerHTML=numToEn(num3);
getById("trError").innerHTML="";
}
getById("btnDn1").onclick=function(){
if(num1>2) num1--; else num1=26;
getById("show1").innerHTML=numToEn(num1);
getById("trError").innerHTML="";
}
getById("btnDn2").onclick=function(){
if(num2>2) num2--; else num2=26;
getById("show2").innerHTML=numToEn(num2);
getById("trError").innerHTML="";
}
getById("btnDn3").onclick=function(){
if(num3>2) num3--; else num3=26;
getById("show3").innerHTML=numToEn(num3);
getById("trError").innerHTML="";
}
getById("btnOk").onclick=function(){
if(num1+","+num2+","+num3==result&&isHint) {
// 解出謎題
hide(scene.pad);
show(scene.ok);
getById("btnBack").style.display="none";
} else getById("trError").innerHTML="Error";
}
}你會發現我們把function都放在function.js裡面了。
這樣的好處是，假如你有第二個網頁叫做index2.html，
只要將function.js的連結寫在index2.html，那麼index2.html也可以使用這些方法，
你就不用重複寫一次了~
因此我們的index.html的內容則改成：
<!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>小遊戲教學4</title>
</head>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="function.js"></script>
<script type="text/javascript" src="control.js"></script>
<body>
<input type="button" id="btnBack" class="hide" />
<!-- 主要場景 -->
<div id="desk"></div>
<div id="door"></div>
<div class="bg" id="scene_main"></div>
<!-- 桌子場景 -->
<div id="code"></div>
<div id="hint"></div>
<div class="bg hide" id="scene_undertable"></div>
<!-- 門場景 -->
<div id="pad"></div>
<div id="doorClose"></div>
<div class="bg hide" id="scene_door"></div>
<!-- 密碼鎖場景 -->
<table id="tbPass" cellpadding="0" cellspacing="10">
<tr><td id="trError" colspan="3"></td></tr>
<tr><td><input type="button" id="btnUp1" class="up"></td><td><input type="button" id="btnUp2" class="up"></td><td><input type="button" id="btnUp3" class="up"></td></tr>
<tr><td id="show1" class="solution">A</td><td id="show2" class="solution">A</td><td id="show3" class="solution">A</td></tr>
<tr><td><input type="button" id="btnDn1" class="dn"></td><td><input type="button" id="btnDn2" class="dn"></td><td><input type="button" id="btnDn3" class="dn"></td></tr>
<tr><td colspan="3" align="right"><input type="button" id="btnOk" value="OK"></td></tr>
</table>
<div class="bg hide" id="scene_door2"></div>
<!-- 脫出成功 -->
<div class="bg hide" id="scene_ok">Congratulations!</div>
</body>
</html>
也就是在<script type="text/javascript" src="control.js"></script>前面再加入一個javascript連結:
<script type="text/javascript" src="function.js"></script>
雖然你會覺得這樣index.html不就等於多增加一行了嗎?
可是看看前面的舉例，假如這些方法很常用到，
像getById這個方法讓我們少寫不少，每次將function.js連結引入後，就可以這樣使用，
不是方便不少呢~
因為SV一開始這樣分檔案時也有心理障礙，
所以不勉強一定要這麼做。
不過之後的範例應該會比較偏向這樣的設計喔~
範例下載：lesson4_4.zip