源码示例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding: 0;margin: 0;}
#con{
width: 320px; height: 566px; margin: 0 auto;
border: 1px solid green; cursor: pointer;
position: relative; margin-top: 10px; overflow: hidden;
}
#box{
width: 320px; height: 566px;
margin: 0 auto; overflow: hidden;
position: absolute; z-index: 1;
}
#index,#copy{
background: url('./images/background_1.png') no-repeat;
}
#me{
display: block; position: absolute;
left: 100px; top: 400px; z-index: 10; opacity: 1;
}
.buiOne{
display: block;position: absolute;z-index: 10;
}
.enemyOne,.enemyTwo,.enemyThree{
display: block;position: absolute;z-index: 10;
}
.explode{
display: block;position: absolute;z-index: 10;
}
#over,#start{
position: absolute;z-index: 16; border: 2px solid #5E6262;
left: 100px; top: 230px; line-height: 40px; border-radius: 10px; width: 100px; text-align: center;opacity: 1;
background: #CCCCCC; display: none;
}
#start:hover{background: #666;}
.copy{
display: block; position: absolute;z-index: 15; width: 100%; height: 100%;
}
#tmpscore{position: absolute;z-index: 20;}
</style>
<script>
var timeGo;
window.onload = function(){
setInterval(function(){explodeNum++},20000);
// 分数
var score = 0;
// 等级
var level = 0;
var explodeNum = 20;
// 射击定时次数 [开始时间，间隔]
var shootTimes = [30,8];[/align]
// 敌军生成定时次数 [开始时间，间隔]
var enemyTimes = [30,60];
var timing;
// 获取元素box 、index 和copy
var con = document.getElementById('con');
var box = document.getElementById('box');
var index = document.getElementById('index');
var copy = document.getElementById('copy');
var me = document.getElementById('me');
// 背景图滚动相关
index.style.height = box.offsetHeight+'px';
copy.style.height = box.offsetHeight+'px';
copy.innerHTML = index.innerHTML;
// 键盘上下左右空格事件
document.onkeydown=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode ==37 && (me.offsetLeft>0)){
me.style.left = (me.offsetLeft-10)+'px';
}
if(e && e.keyCode ==38 && (me.offsetTop>0)){
me.style.top = (me.offsetTop-10)+'px';
}
if(e && e.keyCode ==39 && (me.offsetLeft<255)){
me.style.left = (me.offsetLeft+10)+'px';
}
if(e && e.keyCode ==40 && (me.offsetTop<485)){
me.style.top = (me.offsetTop+10)+'px';
}
if(e && e.keyCode ==32){
clearInterval(timing);
start();
}
if(e && e.keyCode ==90){
if(explodeNum <=0){
return false;
}
explodeNum--;
// 特技
var width = con.offsetWidth;
var height = con.offsetHeight+50;
(function(e){
var time = new Date().getTime()+1000*e;
var tmp = setInterval(function(){
for(var i=-25; i<width-10; i+=20){
shoot(i,height,'./images/bullet2.png');
}
if(new Date().getTime()>time){
clearInterval(tmp);
}
},100)
})(2);
}
}
// 飞机射击
function shoot(left,top,imgSrc){
var left = left ? left : me.offsetLeft;
var top = top ? top : me.offsetTop;
var imgSrc = imgSrc ? imgSrc :'./images/bullet1.png';
(function(){
var bui = document.createElement("img");
bui.setAttribute('src',imgSrc);
bui.setAttribute('class','buiOne');
bui.setAttribute('style','left:'+(left+31)+'px;top:'+(top-15)+'px;');
con.appendChild(bui);
return 1;
})();
}
// 定时器
timeGo = function(){
box.setAttribute('style','opacity:1');
me.setAttribute('style','opacity:1;');
var start = document.getElementById('start');
start.setAttribute('style','display:none;');
timing = setInterval(function(){
/** 子弹射击 **/
(function(){
if(score>50) shootTimes[1] =6;
if(score>100) shootTimes[1] =5;
if(score>150) shootTimes[1] =4;
if(score>200) shootTimes[1] =3;
if(shootTimes[0] > 0){
shootTimes[0] --;
}else{
shootTimes[0] = shootTimes[1];
shoot();
}
})();
// 等级
(function(){level=Math.floor(score/100)})();
/** 背景滚动 **/
box.scrollTop-=4;
if(box.scrollTop == 0){
box.scrollTop = box.offsetHeight;
}
/** 敌军生成 **/
(function(){
enemyTimes[1] = 60-level*5;
if(enemyTimes[0] > 0){
enemyTimes[0] --;
}else{
enemyTimes[0] = enemyTimes[1];
makeEnemy();
}
function makeEnemy(){
var enemy = document.createElement("img");
var n = Math.ceil(Math.random()*100);
if(n>30){
enemy.setAttribute('src','./images/enemy1_fly_1.png');
enemy.setAttribute('class','enemyOne');
enemy.setAttribute('blood','3');
}else if(n>2){
enemy.setAttribute('src','./images/enemy3_fly_1.png');
enemy.setAttribute('class','enemyTwo');
enemy.setAttribute('blood','10');
}else if(n>0){
enemy.setAttribute('src','./images/enemy2_fly_1.png');
enemy.setAttribute('class','enemyThree');
enemy.setAttribute('blood','40');
}else{
return false;
}
var left = Math.random()*200;
enemy.setAttribute('style','left:'+left+'px;top:0px;');
con.appendChild(enemy);
}
})();
/** 飞行，超出消失 **/
// 获取所有图片元素
var bui = document.getElementsByTagName('img');
// 定义所有敌军
var enemy = new Array();
// 定义所有子弹
var buis = new Array();
// 子弹，敌军，飞行事件 超出范围消失事件
for(e in bui){
if(typeof(bui[e])==='object'){
var classs = bui[e].getAttribute('class');
if((classs =='enemyOne')||(classs == 'enemyTwo')||(classs == 'enemyThree')){
// 给大型飞机定义速度
speedOne = (classs == 'enemyOne') ? -1 : 0;
speedTwo = (classs == 'enemyTwo') ? -2 : 0;
speedThree = (classs == 'enemyThree') ? -3 : 0;
bui[e].style.top = bui[e].offsetTop+5+speedThree+speedTwo+speedOne+level/2+'px';
// 敌军消失事件
if(bui[e].offsetTop>520){
con.removeChild(bui[e]);
}else{
enemy.unshift(bui[e]);
}
}else if(bui[e].getAttribute('class')=='buiOne'){
bui[e].style.top = bui[e].offsetTop-25+'px';
// 子弹消失事件
if(bui[e].offsetTop<-25){
con.removeChild(bui[e]);
}else{
buis.unshift(bui[e]);
}
}
}
}
// 子弹和敌军撞击判断
for(var i in enemy){
for(var j in buis){
if(impact(enemy[i],buis[j])){
var blood = parseInt(enemy[i].getAttribute('blood'));
enemy[i].setAttribute('blood',blood-1);
if(enemy[i].getAttribute('class')=='enemyOne'){
if(blood<0){
explode(enemy[i],2);
}
}else if(enemy[i].getAttribute('class')=='enemyTwo'){
if(blood<0){
explode(enemy[i],3);
}
}else if(enemy[i].getAttribute('class')=='enemyThree'){
if(blood<0){
explode(enemy[i],4);
}
}
explode(buis[j],5);
}
}
}
// 自己和敌军撞击判断
for(e in bui){
if(typeof(bui[e])==='object'){
if((bui[e].getAttribute('class')=='enemyOne')){
if(impact(bui[e],me)){
explode(bui[e],2);
explode(me,1);
}
}else if(bui[e].getAttribute('class')=='enemyTwo'){
if(impact(bui[e],me)){
explode(bui[e],3);
explode(me,1);
}
}else if(bui[e].getAttribute('class')=='enemyThree'){
if(impact(bui[e],me)){
explode(bui[e],4);
explode(me,1);
}
}
}
}
document.getElementById('tmpscore').innerHTML='分数：'+score+'<br />装弹：'+shootTimes+'<br />level：'+level+'<br />特技：'+explodeNum;
},50);
}
/**
* 检测两个元素是否碰撞
* [url=home.php?mod=space&uid=952169]@Param[/url] 检测的两个元素
* [url=home.php?mod=space&uid=155549]@Return[/url] 如果碰撞返回true 否则返回false
*/
function impact(a,b){
var aTop = a.offsetTop;
var aLeft = a.offsetLeft;
var aWidth = a.offsetWidth;
var aHeight = a.offsetHeight;
var bTop = b.offsetTop;
var bLeft = b.offsetLeft;
var bWidth = b.offsetWidth;
var bHeight = b.offsetHeight;
if((bLeft>(aLeft+aWidth))||(aLeft>(bLeft+bWidth))||(bTop>(aTop+aHeight))||(aTop>(bTop+bHeight))){
return false;
}else{
return true;
}
}
/**
* 处理爆炸
* @param o需要爆炸的对象 n 1=自身，2=小型敌军，3=中型敌军，4=巨型敌军
* @return over 游戏结束 true，false
*/
function explode(o,n){
if(n==5){
if(o){
con.removeChild(o);
}
return false;
}
switch(n){
case 1:
src = './images/myself.gif';
clearInterval(timing);
document.getElementById('score').innerHTML = score;
document.getElementById('over').style = 'display:block';
break;
case 2: src = './images/small_explode.gif';score+=3;
break;
case 3: src = './images/middle_explode.gif';score+=10;
break;
case 4: src = './images/large_explode.gif';score+=100;
break;
default:
break;
}
var top = o.offsetTop;
var left = o.offsetLeft;
var explode = document.createElement("img");
explode.setAttribute('src',src);
explode.setAttribute('class','explode');
explode.setAttribute('style','left:'+left+'px;top:'+top+'px;');
con.appendChild(explode);
if(n != 1){
setTimeout(function(){
con.removeChild(explode);
},1000);
}
if(o){
con.removeChild(o);
}
}
// 游戏开始相关
start();
function start(){
var con = document.getElementById('con');
con.setAttribute('style','background:url("./images/start.png")');
var box = document.getElementById('box');
box.setAttribute('style','opacity:0');
var me = document.getElementById('me');
me.setAttribute('style','opacity:0;');
var start = document.getElementById('start');
start.setAttribute('style','display:block;top:350px;cursor:pointer;');
start.setAttribute('onclick','timeGo()');
}
}
</script>
</head>
<body>
<div id="con">
<span id="tmpscore"></span>
<div id="box">
<div id="index"></div>
<div id="copy"></div>
</div>
<img src="./images/me.gif" id="me" alt="">
<div id="over">
成绩：<span id="score"></span>
<br />
Game Over
</div>
<div id="start">
开始游戏
</div>
<div></div>
</div>
</body>
</html>源码释义：
此代码是一个小游戏，其功能是控制一个飞机在空中飞行并进行打击，消灭敌军以获得积分。具体实现方式如下：
HTML部分：使用了一个主容器，一个背景图层，一个前景图层（用于显示敌军飞机和自己的飞机），以及一个游戏结束图层和开始游戏按钮。同时定义了一个临时分数显示元素。
CSS样式部分：定义了主容器和背景图的样式，同时将前景图层标记为绝对定位的，并将z-index设置为1，以使其显示于背景之上。此外还定义了子弹、敌军飞机和爆炸效果的样式，以及游戏结束和开始游戏按钮的样式。
JavaScript部分：程序的主要逻辑在函数timeGo中，该函数主要实现了以下功能：
监听键盘事件控制飞机的移动，具体实现使用了document.onkeydown方法和event.keyCode属性。
飞机发射子弹（shoot函数）：检查是否超时，超时则发射一个新的子弹，具体实现使用了setInterval方法。
制作敌军飞机：按照一定规则生成不同类型的敌军飞机，并设定它们的初始位置，具体实现也使用了setInterval方法。
检测子弹和敌军飞机的碰撞事件，具体实现使用了impact函数判断是否有碰撞，并调用explode函数处理爆炸效果。
检测飞机和敌军飞机的碰撞事件，并调用explode函数处理爆炸效果。
背景图自动滚动，将box.scrollTop的值减去4，并在scrollTop为0时重新将其赋值为box.offsetHeight。
定时刷新临时分数显示，显示当前的分数、剩余子弹、等级和可用特技。
另外，该文件还定义了函数explode、start以及impact，分别用于处理爆炸效果、游戏开始和碰撞事件。
源码下载地址：https://www.wdzzz.com/code/youxi/1717.html
