网站“经典小游戏下载”制作有感

来源：互联网发布：app软件开发工程师编辑：程序博客网时间：2024/05/17 02:01

　　正巧手头有量不小的小游戏资源，突然想到可以拿来练练手。

　　网页地址：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或以其为内核的浏览器浏览“经典小游戏下载”。

　　欢迎访问“经典小游戏下载”，欢迎提出建议，我将对朋友的批评指正表达由衷的感谢！