遊戲網站開發學習筆記（一）
已經好久沒有更新部落格了，現在是寒假時間，在家無聊準備學習JS。
哈哈，很佩服自己。其實也是藉助寫部落格督促自己，希望我能夠這個寒假堅持下去。畢竟我也認識到了自己有很多的不足，時間緊迫，只能加油啊。
話不多說，上程式碼。
這次我是跟著從學校圖書館裡借的一本書學的，循序漸進。這個遊戲網站看起來如下圖所示
這是主頁，程式碼如下：
<!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" lang="en" xml:lang="en">
<head>
<title>Greg's Gambits|About you</title>
<link href="greg.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function getName(){
var Name=prompt("Please input your Name!","Mike");
document.getElementById('myname').innerHTML=Name;
}
function getUseName(){
var UseName=prompt("Please input your UserName!","")
document.getElementById('UserName').innerHTML=UseName;
}
function getavatars(){
window.open("avatars.html");
}
function pickavatars(){
var avatars=prompt("Enter your avatar now","")
document.getElementById('myavatars').innerHTML=avatars;
}
</script>
</head>
<body>
<div id="container">
<img src="../images/superhero.jpg" width="120" height="120" class="floatleft" />
<h1 id="logo"><em>Greg's Gambits </em></h1>
<h2 align="center"><em> Tell me about you</em></h2>
<p> </p>
<div id="nav">
<p><a href="index.html">Home</a>
<a href="greg.html">About Greg</a>
<a href="play_games.html">Play a Game</a>
<a href="sign.html">Sign In</a>
<a href="contact.html">Contact Us</a>
<a href="aboutme.html">Tell me about you</a>
</p>
</div>
<div id="content">
<p><button type="button" onclick="getName()">Pleame enter your name!
</button>
Hello,welcome,<span id="myname">Greg</span>
</p>
<p>
<button type="button" onclick="getUseName()">Please enter your Username!
</button>
UserName:<span id="UserName">King Greg</span>
</p>
<p>
<button type="button" onclick="getavatars()">See the avatars choices.</button>
</p>
<p>
<button type="button" onclick="pickavatars()"> Select your avatars:
</button><br />
The avatar you selected is:<span id="myavatars">Kity</span>
</p>
<p> </p>
</div>
<div id="footer">Copyright © 2018 Greg's Gambits<br />
<a href="mailto:
</div>
</body>
</html>
對了，我們也是充分應用了css樣式表的便利，應用的.css樣式表內容如下：
body { background-color: #000040;
background-image: url(background.gif);
color: #88ffff;
font-family: Verdana, Arial, sans-serif;
}
#container { margin-left: auto;
margin-right: auto;
width:80%;
min-width:700px;
}
#logo {
text-align:center;
margin: 0;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding-top: 30px;
padding-bottom: 20px;
}
#nav {
float: left;
width: 200px;
padding-top: 10px;
text-align:left;
color: #88FFFF;
font-size: 12px;
}
#nav a {text-decoration:none;
margin: 15px;
display: block;
color: #88FFFF;
font-size: 12px;
}
#content {
margin-left: 150px;
padding: 30px;
overflow:auto;
border: medium groove #88FFFF;
line-height: 135%;
}
.floatright {padding-left:20px;
float:right;
}
.floatleft {
float:left;
padding: 30px 0px 20px;
}
#footer { font-size: .60em;
font-style: italic;
text-align: center;
border-top: 2px double #000040;
padding-top: 20px;
padding-bottom: 20px;
}
h2 { text-transform: uppercase;
color: #88ffff;
font-size: 1.2em;
border-bottom: 1px none;
margin-right: 20px;
}
h3 {
color: #88ffff;
font-size: 1em;
border-bottom: 1px solid #000000;
margin-right: auto;
text-align: left;
padding-top: 20px;
padding-right: 150px;
padding-bottom: 20px;
padding-left: 150px;
line-height: 130%;
}
.details { padding-left:20%;
padding-right:20%;
}
img {border:0; }
.content {
margin: 20px;
padding: 20px;
height: 3700px;
width: 500px;
}
a {text-decoration:none;
margin: 15px;
display: block;
color: #88FFFF;
font-size: 12px;
}
a:hover {
color: #000040;
background-color: #88ffff;
}
span {
font-size: 36px;
font-weight: bold;
font-family: "Courier New", Courier, mono;
color: #88ffff;
background-position: center center;
text-align: center;
vertical-align: middle;
}
table {
border-collapse: collapse
}
td {
border: 2px solid #88ffff;
width: 5em;
font-family: "Courier New", Courier, mono;
font-size: 14px;
color: #88ffff;
}
除了做好主頁之外，我們還做了about頁面，它看起來如下圖：
你問，為啥她看起來和主頁賊像呢？當然是因為使用了同一個樣式表啦！
其他的程式碼就不贅述啦，這裡只貼上關鍵程式碼：
放在<head></head>標籤裡的js程式碼
<script>
function getName(){
var Name=prompt("Please input your Name!","Mike");
document.getElementById('myname').innerHTML=Name;
}
function getUseName(){
var UseName=prompt("Please input your UserName!","")
document.getElementById('UserName').innerHTML=UseName;
}
function getavatars(){
window.open("avatars.html");
}
function pickavatars(){
var avatars=prompt("Enter your avatar now","")
document.getElementById('myavatars').innerHTML=avatars;
}
</script>
在<body></body>裡面，實現按鈕功能程式碼，放在id=content的div裡面：.
<div id="content">
<p><button type="button" onclick="getName()">Pleame enter your name!
</button>
Hello,welcome,<span id="myname">Greg</span>
</p>
<p>
<button type="button" onclick="getUseName()">Please enter your Username!
</button>
UserName:<span id="UserName">King Greg</span>
</p>
<p>
<button type="button" onclick="getavatars()">See the avatars choices.</button>
</p>
<p>
<button type="button" onclick="pickavatars()"> Select your avatars:
</button><br />
The avatar you selected is:<span id="myavatars">Kity</span>
</p>
<p> </p>
</div>
其中，第三項，選擇你的頭像，介面看起來如下圖所示（本來想弄一個小視窗顯示，但是無法顯示圖片，只好再建立一張頁面）
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<title>Greg's Gambits|Avatars</title>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<hr />
<h2>Here are your avatars options:</h2>
<h3><hr />
<img src="../images/bunny_ch01.jpg" />Robit
<img src="../images/carla_pic.jpg" />GrandMa
<img src="../images/bananas.jpg" />Banana
<img src="../images/ghost_ch01.jpg" />Cloth
<hr />
</h3>
<h3>You will enter your selection on the previous page.</h3>
</body>
</html>
唉，還是複製貼上快啊，好了做了兩天（其實並沒有整天做）的主頁就這些啦。
明天還要接著做啦。我只是個黑黑的小白，還請各位大神批評指正啦。稍後請期待更新吧！