網站“經典小遊戲下載”製作有感

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　正巧手頭有量不小的小遊戲資源，突然想到可以拿來練練手。

　　網頁地址：http://wo-de-bao-bei.iego.cn/game/　有空來踩踩啊，歡迎批評指正！

　　實現單純的下載功能是比較簡單的，但體驗不是很好。既然是小遊戲下載，按我的思維，網站應該做的比較卡通一些、動感一些。手頭的小遊戲資源分：休閑、防守、動作、戰鬥、益智五類，那麼可以從這五類互相轉換上實現一些效果。在將要製作的網頁首頁面上不需要太多連結，但需要一個能展示小遊戲資訊的視窗，還要一個QQ聊天啟動連結。

　　為了實現上述目標，我這樣做：

　　1、本著盡量從簡的原則（自訂的原則），遊戲資訊展示視窗可以與背景圖片在一起，因此可以直接將某些效果元素PS到背景圖片上，為了縮減圖片大小而不降低色彩效果可以用簡單線條勾勒背景圖片，少用色彩。

　　2、用Javascript和iframe標籤兒可以實現五類小遊戲的轉換，視覺效果可用圖片替換、iframe替換展示。以下是實現替換功能的JavaScript代碼：

圖片響應onmouseover事件實現圖片及iframe替換：

QQ連結圖片替換：

    function showqq(){
    document.getElementById("tit_7").src='7-1.png';
    }

個別圖片的還原替換：

    function connect_me(a){
    if(a==1){
    document.getElementById("tit_1").src='1.png';
    }
    else if(a==7){
    document.getElementById("tit_7").src='7.png';
    }
    }

　　3、在每個展示網頁中利用<div>+css定位實現相應顯示效果。以下是部分css檔案：

div{ margin:0;}
.show1{ padding:0;}
.show2{ padding:8px;}
.list{width:100%; margin:0px 0px 4px 0px; padding:0px 0 2px 0px; border-bottom:2px dashed #b67b09;}
.leftli{ float:left; width:38%; margin:0px 6px 0px 0px; padding:0; }
.gametit{ padding:8px 0 0 6px; font-weight:bold; font-size:18px; color:#885a09; border-bottom:2px dashed #fcc457;}

　　以下是部分iframe頁面代碼：

<body>
<div class="show2">
休閑類 >> <font size="3" color="#885a09">共45款點擊圖片下載 O(∩_∩)O~</font>
<div class="list">
<div class="leftli"><div class="gametit">何男彈球</div><div class="gametxt">彈珠檯遊戲，左右控制擋板，下發球。</div></div><div class="gamepic"><a href="game/xiuxian/何男彈球.exe" ><img src="game/xiuxian/何男彈球_nEO_IMG_nEO_IMG.jpg" alt="點擊圖片下載遊戲" border="0" /></div>
</div>
……
……
……
<div class="list">
<div class="leftli"><div class="gametit">魔瓶消消看</div><div class="gametxt">遇上同樣顏色的魔力瓶達到三個就可以消掉。操作指南：用滑鼠左鍵移動選擇放下瓶子的位置。 </div></div><div class="gamepic"><a href="game/xiuxian/魔瓶消消看.exe" ><img src="game/xiuxian/魔瓶消消看_nEO_IMG_nEO_IMG.jpg" alt="點擊圖片下載遊戲" border="0" /></div>
</div>
</div>
</body>

　　4、為實現訪問統計，編寫如下代碼，並建立資料庫：

已獲得
<?
$sql_hits='select * from gametongji limit 1';
$result=mysql_query($sql_hits);
$rs=mysql_fetch_object($result);
echo $rs->index_hits;
mysql_query('update gametongji set index_hits='.($rs->index_hits+1));
mysql_close();
?>
次訪問

　　5、為了提高訪問速度，我對遊戲的展示圖片均作了大幅壓縮，工具為光影魔術手的批處理功能。

　　6、為了實現色調的統一及視覺的美感，捲軸是必須要處理的，捲軸顏色屬性代碼：

body{ font-size:15px; padding:0; margin:0; background-color:transparent;
scrollbar-face-color:#ffa800; scrollbar-highlight-color:#ffa800;
scrollbar-shadow-color:#ffa800; scrollbar-3dlight-color:#b67b09;
scrollbar-arrow-color:#fcc457; scrollbar-track-color:#fcc457;
scrollbar-darkshadow-color:#b67b09;}

　　7、圖片製作工具為Photoshop、illustrator，色彩調配用抓色小貓輔助。

　　8、內容填充是個棘手的問題，要把近150種小遊戲資訊填入代碼可是費了一番心思。好在想到了簡便的辦法，而且notepad++的尋找替換功能也很給足我面子，使內容填充到製作後期變得非常容易了。

　　經過兩天版的製作、調試，網頁終於做好了，拿出來發布。讓朋友在外地訪問，很快又發現了問題：圖片太多，流暢的iframe替換效果使得遊戲介紹圖片不過顯示與否都會同首頁面一起載入到用戶端，嚴重製約訪問速度，有個朋友竟然給了我一個令人崩潰的測試結果：完全開啟需要73秒！

　　My God！是可忍，孰不可忍啊！幸好不過也有朋友說：“開啟很快，做得不錯哦！”——這算安慰……

　　網速的差異導致了訪問的不同體驗，幸虧有反饋意見，才意識到那個iframe替換效果“歧視”了網速慢的使用者。於是又製作了一個簡化版本，新版本除了細微的使用體驗差異外，仍保證了視覺效果。但新版本改變了iframe替換的方式，使得大量的遊戲圖片不跟隨首頁面載入，而是在使用者做出查看動作後才按照所指的分類載入（沒有獲得查看的分類不載入），這樣使用者就可以在網路狀態不是很好的狀態下快速開啟首頁面。當各分類都加再過一遍以後，其效果就和原版本一樣了。

　　下一步我將在通過判斷用戶端網路環境而自動指派發送頁面上（當用戶端網路速度不錯時自動發送流暢版，反之自動發送簡化版本給使用者）下功夫了。

　　經測試，網頁在IE7、IE8下顯示正常，在IE6下會有明顯的對png格式圖片的不支援，對css的解析導致網頁板式混亂。IE5.5下網頁出現嚴重板式樣式混亂。在以IE7、IE8為核心的瀏覽器（如世界之窗）下顯示正常。尚未經過其他瀏覽器測試。故推薦使用IE7或IE8或以其為核心的瀏覽器瀏覽“經典小遊戲下載”。

　　歡迎訪問“經典小遊戲下載”，歡迎提出建議，我將對朋友的批評指正表達由衷的感謝！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

網站“經典小遊戲下載”製作有感

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support