Coincidentally, there were a lot of small game resources on hand, and I suddenly thought that I could use it to train my hands.
Web address: http://wo-de-bao-bei.iego.cn/game/ free to step on Ah, welcome to criticize correction!
It is relatively simple to implement the simple download function, but the experience is not very good. Since it is a small game download, according to my thinking, the website should be more cartoon and dynamic. The game resources at hand are divided into five categories: casual, defensive, action, combat, and puzzle. These five categories can be converted to each other to achieve some effects. There is no need for too many links on the homepage of the webpage to be created, but a window is required to display the mini-game information and a QQ chat startup link.
To achieve the above objectives, I will do this:
1. In line with the principle of simplicity as much as possible (custom principle), the game information display window can be associated with the background image, so some effect elements can be directly PS to the background image, to reduce the image size without reducing the color effect, you can use simple lines to outline the background image and use less color.
2. Using the JavaScript and IFRAME labels can convert five types of games. visual effects can be replaced by images or IFRAME. The following JavaScript code implements the replacement function:
The image responds to the onmouseover event to replace the image and IFRAME: Function showhide (INDEX ){ |
Qq link image replacement: Function showqq (){ |
Restoration and replacement of individual images: Function connect_me (){ |
3. Use <div> + CSS to locate each display page to achieve the corresponding display effect. The following are some CSS files:
| 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 ;} |
The following are some IFRAME Page code:
<Body> |
4. To implement access statistics, write the following code and create a database:
| Obtained <? $ 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 (); ?> Secondary Access |
5. In order to improve the access speed, I have made a huge compression on the display images of the game, and the tool is a batch processing function of a magic player.
6. In order to achieve unified color and visual beauty, the scroll bar must be processed. The color attribute code of the scroll bar is as follows:
| 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. The image production tools are Photoshop and illustrator, and the color allocation is assisted by the color-capturing kitten.
8. Content filling is a tricky issue. It takes some effort to fill in the code of nearly 150 mini-games. Fortunately, I thought of a simple method, and the notepad ++ search and replacement function also gave me a good face, making it very easy to fill the content into the post-production stage.
After two days of production and debugging, the webpage was finally ready for release. After allowing friends to visit other places, they soon discovered the problem: too many images, and the smooth IFRAME replacement effect made the game's picture not displayed but loaded to the client together with the home page, the access speed was severely restricted. A friend gave me a crashing Test Result: It took 73 seconds to open it completely!
My God! It's tolerable! Fortunately, some friends said, "It's very fast to open it. It's a good job !" -- This is a comfort ......
The difference in network speed leads to different access experiences. Thanks to feedback, I realized that the replacement effect of IFRAME is "discriminatory" for users with slow network speed. As a result, a simplified version is created. In addition to the slight differences in user experience, the new version still guarantees the visual effect. However, the new version changes the IFRAME replacement method, so that a large number of game images are not loaded along with the home page, instead, the user loads the page according to the specified category (the category is not loaded after the user does not obtain the view), so that the user can quickly open the home page in a State where the network status is not good. After each classification is added, the effect will be the same as that of the original version.
In the next step, I will automatically assign a sending page by judging the client network environment (when the client network speed is good, the smooth version will be automatically sent, and vice versa, the simplified version will be automatically sent to the user.
After testing, the webpage is displayed normally under IE7 and IE8, and obviously does not support images in PNG format under IE6, and CSS parsing causes webpage board chaos. Serious board style disorder occurs on the webpage under ie5.5. The browser with IE7 and IE8 as the kernel (such as the window of the World) is normal. It has not been tested by other browsers. Therefore, we recommend that you use IE7 or IE8 or a browser with its kernel to browse "Download classic games ".
Welcome to "Download classic games", and provide suggestions. I would like to express my sincere thanks for your criticism!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
