javascript 小遊戲小技巧教學

2014-06-17

1700
0
遊戲程式教學
2015-12-17

摘要:javascript 小遊戲小技巧教學

這是給初階的人使用的，

若是高手可以直接跳過~

之所以選擇javascript是因為用記事本就可以學。

若想改成別的程式語法可以告知。

首先，此為純網頁版，為了讓所有人至少有記事本可以編輯內容。
記得記事本存檔時"編碼"選擇"UTF-8"喔！

1.製作自製按鈕：


<!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>測試按鈕</title>
</head>
<script type="text/javascript">
window.onload=function(){
    document.getElementById("btnClk").onmousedown=function(){
        document.getElementById("btnClk").style.backgroundImage="url(btnDown.png)";
    }
    document.getElementById("btnClk").onmouseup=function(){
        document.getElementById("btnClk").style.backgroundImage="url(btnUp.png)";
    }
}
</script>
<body>
<div id="btnClk" style="background-image:url(btnUp.png); background-position:center; background-repeat:no-repeat; width:137px; height: 59px; color:#FFFFFF; line-height:59px; cursor:pointer;" align="center">請按我</div>
</body>
</html>

首先，看到<div>裡的東西:


<div id="btnClk" style="background-image:url(btnUp.png); background-position:center; background-repeat:no-repeat; width:137px; height: 59px; color:#FFFFFF; line-height:59px; cursor:pointer;" align="center">請按我</div>

其實有大部分只是為了美化。
只要記得把你想要圖片名稱(比方btnUp.png)改成你的資料夾內(或網址連結)檔案的名稱。
而width是圖片的寬度，height是圖片的高度，修改數字就可以跟你的圖片大小一樣了。
至於"請按我"是你要在按鈕上寫的字，提示別人這個按鈕大概的功能(好比"送出"、"確定")。

2.測試按下去

方法1：彈框─


<!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>測試按鈕</title>
</head>
<script type="text/javascript">
window.onload=function(){
    document.getElementById("btnClk").onclick=function(){
        alert("你按到我了！");
    }
}
</script>
<body>
<div id="btnClk" style="background-image:url(btnUp.png); background-position:center; background-repeat:no-repeat; width:137px; height: 59px; color:#FFFFFF; line-height:59px; cursor:pointer;" align="center">請按我</div>
</body>
</html>

方法2：改變文字─

你會發現這次按鈕不會換圖，但是按下去會跑出一個彈框。
如果我的瀏覽器沒反應，怎麼辦??
這是有可能的，有些瀏覽器會擋彈框，所以SV要教第二種測試按下去的方法，
而這種方法也適用於Flash等程式語言~


<!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>測試按鈕</title>
</head>
<script type="text/javascript">
window.onload=function(){
    document.getElementById("btnClk").onclick=function(){
        document.getElementById("txName").innerHTML="My name is SV";
    }
}
</script>
<body>
<div id="btnClk" style="background-image:url(btnUp.png); background-position:center; background-repeat:no-repeat; width:137px; height: 59px; color:#FFFFFF; line-height:59px; cursor:pointer;" align="center">ENGLISH</div>
<span id="txName">我的名字是SV</span>
</body>
</html>

這次的範例可以教大家雙語化的小技巧，這樣的技巧就算用其他程式語言也通用~
這個範例新增了，當你需要簡單的文字顯示在網頁上，而且以後可能會需要修改他時，最好用<span>。
有些人學過可能會說應該是<font>呀！其實是之前有聽國外說過<font>有些問題可能要盡量少用。所以SV僅教保險一點的用法。
然後這段文字的名字(其實是id)叫做txName

看向原本的onclick裡面，innerHTML(注意大小寫喔)就是改變文字內容的方法。

當然，很多細節SV沒教，因為SV覺得只是做遊戲可以不用學太難的東西。

所以當你需要測試時不妨使用測試文字，有的時候測試數值、測試換算等等都可以用這種方式。之後遇到再討論囉~

整理：到目前為止，
你學到了作屬於自己的按鈕(換圖片)，以及按鈕按下後可以改變文字內容，
甚至可以做到雙語的效果喔~
當然，改文字可以做很多有趣的事~(比方遊戲中提示使用者在密碼鎖按到什麼數字)

好比：


<!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>測試按鈕</title>
</head>
<script type="text/javascript">
window.onload=function(){
    document.getElementById("btn1").onclick=function(){
        document.getElementById("txNum").innerHTML="1";
    }
    document.getElementById("btn2").onclick=function(){
        document.getElementById("txNum").innerHTML="2";
    }
    document.getElementById("btn3").onclick=function(){
        document.getElementById("txNum").innerHTML="3";
    }
    document.getElementById("btn4").onclick=function(){
        document.getElementById("txNum").innerHTML="4";
    }
    document.getElementById("btn5").onclick=function(){
        document.getElementById("txNum").innerHTML="5";
    }
    document.getElementById("btn6").onclick=function(){
        document.getElementById("txNum").innerHTML="6";
    }
    document.getElementById("btn7").onclick=function(){
        document.getElementById("txNum").innerHTML="7";
    }
    document.getElementById("btn8").onclick=function(){
        document.getElementById("txNum").innerHTML="8";
    }
    document.getElementById("btn9").onclick=function(){
        document.getElementById("txNum").innerHTML="9";
    }
}
</script>
<body>
<table>
<tr>
<td><div id="btn1" style="background-image:url(btnUp.png); background-position:center; background-repeat:no-repeat; width:137px; height: 59px; color:#FFFFFF; line-height:59px; cursor:pointer;" align="center">1</div></td>
<td><div id="btn2" style="background-image:url(btnUp.png); background-position:center; background-repeat:no-repeat; width:137px; height: 59px; color:#FFFFFF; line-height:59px; cursor:pointer;" align="center">2</div></td>
<td><div id="btn3" style="background-image:url(btnUp.png); background-position:center; background-repeat:no-repeat; width:137px; height: 59px; color:#FFFFFF; line-height:59px; cursor:pointer;" align="center">3</div></td>
</tr>
<tr>
<td><div id="btn4" style="background-image:url(btnUp.png); background-position:center; background-repeat:no-repeat; width:137px; height: 59px; color:#FFFFFF; line-height:59px; cursor:pointer;" align="center">4</div></td>
<td><div id="btn5" style="background-image:url(btnUp.png); background-position:center; background-repeat:no-repeat; width:137px; height: 59px; color:#FFFFFF; line-height:59px; cursor:pointer;" align="center">5</div></td>
<td><div id="btn6" style="background-image:url(btnUp.png); background-position:center; background-repeat:no-repeat; width:137px; height: 59px; color:#FFFFFF; line-height:59px; cursor:pointer;" align="center">6</div></td>
</tr>
<tr>
<td><div id="btn7" style="background-image:url(btnUp.png); background-position:center; background-repeat:no-repeat; width:137px; height: 59px; color:#FFFFFF; line-height:59px; cursor:pointer;" align="center">7</div></td>
<td><div id="btn8" style="background-image:url(btnUp.png); background-position:center; background-repeat:no-repeat; width:137px; height: 59px; color:#FFFFFF; line-height:59px; cursor:pointer;" align="center">8</div></td>
<td><div id="btn9" style="background-image:url(btnUp.png); background-position:center; background-repeat:no-repeat; width:137px; height: 59px; color:#FFFFFF; line-height:59px; cursor:pointer;" align="center">9</div></td>
</tr>
你按到了:<span id="txNum" style="display:block;">0</span>
</body>
</html>

table是用來排版的，剛好呈現一個像數字面板的樣式~
tr就是換行的時候~

td就是同一排的時候~

p.s.跟著SV的教學，目標是能做出簡單的密室遊戲、解謎遊戲(因為只需要用到滑鼠操作)，若還有更多想學，為了不讓文章字太長，歡迎來信問喔~

yokunanduAThotmailDOTcom

回首頁

SV~

就是Shuinvy的縮寫～

javascript 小遊戲小技巧教學

系列文章

標籤雲