主页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg{
width: 530px;
height: 600px;
position: relative;
margin: 100px auto;
background: url("bg.png") no-repeat 0 -9399px;
}
.plane{
width: 60px;
height: 53px;
position: absolute;
left: 235px;
bottom: 10px;
background: url("my_air.gif") no-repeat;
}
.enemy{
position: absolute;
}
.buttle{
width: 9px;
height: 37px;
position: absolute;
background: url("my_ari_1.gif") no-repeat;
}
.bomp{
width: 160px;
height: 160px;
position: absolute;
background: url("0.gif") no-repeat;
}
</style>
</head>
<body>
<div class="bg" id="bg">
<div class="plane" id="plane"></div>
</div>
</body>
<script type="text/javascript" src="buttle.js"></script>
<script type="text/javascript" src="enemies.js"></script>
<script src="jquery-3.0.0.min.js"></script>
<script>
//bg移动begin
var bg_height=-9399;
function bg_move(){
var bg=document.getElementById("bg");
bg_height+=3;
if (bg_height>0){
bg_height=-9399;
}
bg.setAttribute("style","background: url('bg.png') no-repeat 0 "+bg_height+"px");
}
setInterval(bg_move,30);
//bg移动over
//通过获取键盘的key值来控制飞机的方向begin
document.onkeydown = function(){
var key=event.keyCode;
var plane =document.getElementById("plane");
switch (key){
case 37:
plane_Left();
break;
case 38:
plane_Top();
break;
case 39:
plane_Right();
break;
case 40:
plane_Bottom();
break;
case 32:
fire();
break;
}
};
//通过获取键盘的key值来控制飞机的方向over
//飞机的方向begin
var planeLeft=235;
var planeBottom=10;
//声明全局变量planeBottom、planeLeft用来让飞机移动
function plane_Left(){
if(planeLeft>0){
planeLeft-=8;
document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px");
}
}
function plane_Right(){
if(planeLeft<470){
planeLeft+=8;
document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px");
}
}
function plane_Top(){
if(planeBottom<550){
planeBottom+=8;
document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px");
}
}
function plane_Bottom(){
if(planeBottom>10){
planeBottom-=8;
document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px");
}
}
//飞机的方向over
function enemyShow(){
var number = parseInt(Math.random()*10);
for(var i=0;i<number;i++){
var enemies=new enemiesShow();
}
}
setInterval(enemyShow,3000);
function fire(){
var bottom=planeBottom+5+53;
var left=planeLeft+30-5;
var buttle = new buttleDemo(left,bottom);
}
</script>
</html>
子弹
/**
* Created by echo22 on 2016/7/29.
*/
function buttleDemo(left,bottom){
var buttleLeft =left;
var buttleBottom = bottom;
var id;
var Move;
inti();
function inti(){
id=getRandom();
var str = "<div class='buttle' id='b"+id+"'></div>";
$("#bg").append(str);
$("#b"+id).css({"left":buttleLeft,"bottom":buttleBottom});
Move=setInterval(buttleMove,10);
}
//获取随机ID
function getRandom(){
return parseInt(Math.random()*10000);
}
//子弹的移动
function buttleMove(){
if(buttleBottom<550){
buttleBottom+=10;
$("#b"+id).css("bottom",buttleBottom);
if(JudgeShot()){
dispire();
}
}
else {
dispire();
}
}
//清除子弹
function dispire(){
$("#b"+id).remove();
clearInterval(Move);
}
//判断子弹与敌机的碰撞位置
function JudgeShot(){
var enemy=$(".enemy");
for (var i=0;i<enemy.length;i++){
var enemy_top=$(".enemy").eq(i).css("top");
var enemy_left=$(".enemy").eq(i).css("left");
enemy_bottom=600-getInt(enemy_top);
enemy_left=getInt(enemy_left);
console.log(enemy_left);
if (buttleLeft>enemy_left&&buttleLeft<enemy_left+50&&buttleBottom>enemy_bottom&&buttleBottom<enemy_bottom+60){
$(".enemy").eq(i).remove();
var bomp="<div class='bomp' id='bo"+id+"'></div>";
$("#bg").append(bomp);
$("#bo"+id).css({"left":buttleLeft-70,"bottom":buttleBottom-100});
setTimeout(gundan,50);
return true;
}
}
return false;
}
function getInt(str){
var result = str.substring(0,(str.length-2));
return parseInt(result);
}
function gundan(){
$("#bo"+id).remove();
}
}
敌机
/**
* Created by echo22 on 2016/7/29.
*/
function enemiesShow(){
var id;
init();
function init(){
var type=getEnemyType();
var enemyLeft=getEnemyLeft();
getEnemyPlane(type,enemyLeft);
getLine();
}
function getEnemyPlane(type,left){
console.log(111);
id=parseInt(Math.random()*10000);
var width;
var height;
if(type==1){
width=47;
height=72;
}
else {
width=64;
height=56;
}
var enemy="<div class='enemy' id='e"+id+"' ></div>";
$("#bg").append(enemy);
$("#e"+id).css({"width":width,"height":height,"left":left,"background":"url('d_j_"+type+".gif') no-repeat"});
}
function getEnemyType(){
return (parseInt(Math.random()*10/5)>0)?1:3;
}
function getEnemyLeft(){
return parseInt(Math.random()*(530-64));
}
function getLine(){
Math.random()>0.5?zhiLine():quLine();
}
function zhiLine(){
$("#e"+id).animate({
"top":"520px"
},3000,function(){
$("#e"+id).remove();
})
}
function quLine(){
$("#e"+id).animate({
"top":"200px",
"left":getEnemyLeft()
},1500,function(){})
$("#e"+id).animate({
"top":"520px",
"left":getEnemyLeft()
},1500,function(){
$("#e"+id).remove();
})
}
}
更多有趣的经典小游戏实现专题，分享给大家：
