html5 微信 飞机 源码,[HTML5]微信飞机大战

兼容平台: IE9+, Chrome, Firefox, Firefox, Safari

个人小制作,纯html5没有用框架,代码执行效率方面有待考察

实现了游戏大部分玩法

兼容了电脑PC浏览器和手机浏览器[PC浏览器单击使用道具]

有声音的版本请下载plain.rar, 演示地址没有声音

2013-09-16 添加声音, 因为移动设备播放声音会卡, 所以暂时移动设备没有声音

2013-09-17 声音文件打包的时候少了一个, 所以导致游戏无法运行, 已更正

1.[图片] QQ截图20130910101806.jpg

2.[文件] index.html ~ 1KB     下载(228)

飞机大战 by zhuojiejie

飞机大战分数

0

继 续

3.[文件] global.css ~ 2KB     下载(135)

/*

build time: Sep 9th,2013 09:25

author: jiejie.zhuo

*/

* {

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

}

body {

margin: 0;

padding: 0;

font-size: 14px;

color: #333;

font-family: "Microsoft YaHei", sans-serif, 'Microsoft Sans Serif', 'Microsoft JhengHei UI';

background-color: #555;

}

body > div:last-child {

display: none;

}

#main {

display: table;

width: 480px;

margin: 0 auto;

position: relative;

}

#main canvas {

z-index: 1000;

position: absolute;

top: 0;

}

#main canvas.playing {

cursor: none;

}

#modal {

width: 400px;

height: 300px;

top: 100px;

left: 50%;

margin-left: -200px;

border: #666 solid 2px;

border-radius: 8px;

position: absolute;

font-size: 20px;

background-color: #dddddd;

z-index: 1002;

}

@media screen and (max-width: 480px) {

#main, #container {

width: 100%;

}

#modal {

width: 94%;

top: 10px;

left: 3%;

margin: 0;

}

}

#modal.hide {

display: none;

}

#modal .header {

height: 45px;

line-height: 45px;

font-weight: bold;

text-align: center;

border-bottom: #666 solid 2px;

}

#modal .content {

height: 210px;

line-height: 210px;

font-weight: bold;

text-align: center;

}

#modal .footer {

height: 45px;

line-height: 45px;

text-align: center;

border-top: #666 solid 2px;

}

#modal .footer button {

width: 120px;

height: 30px;

border: #666 solid 2px;

border-radius: 15px;

font-size: 15px;

font-weight: bold;

position: absolute;

bottom: 4px;

left: 50%;

margin-left: -60px;

color: #333;

cursor: pointer;

}

4.[文件] plain.rar ~ 1MB     下载(1220)