zoukankan      html  css  js  c++  java
  • 打飞机游戏

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    body,html{
    100%;
    height: 100%;
    background: #000;
    font-size: 14px;
    overflow: hidden;
    font-family: "华康少女文字W5(P)";
    }
    #playAir{
    320px;
    height: 568px;
    background: url(img/bg.jpg)no-repeat;
    border: 5px solid #ddd;
    margin: 100px auto;
    overflow: hidden;
    position: relative;
    }
    #playAir .bg{
    320px;
    height: 568px;
    background: url(img/start.png)no-repeat;
    position: relative;
    }
    #playAir .bg ul{
    position: absolute;
    bottom: 50px;
    left: 50%;
    margin-left: -82px;
    list-style: none;
    }
    #playAir .bg ul li{
    160px;
    height: 40px;
    background: #abcdef;
    border: 2px solid #ddd;
    margin-top: 20px;
    text-align: center;
    line-height: 40px;
    border-radius: 30px;
    color: #eee;
    cursor: pointer;
    }
    #playAir .bg p{
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 10px;
    color: #666;
    font-style: oblique;
    }
    #playAir .myPlane{
    position: absolute;
    top: 0;
    left: 0;
    }
    #playAir .bullet{
    position: absolute;
    top: 0;
    left: 0;
    }
    #playAir .enemy{
    position: absolute;
    top: 0;
    left: 0;
    }
    #playAir .enPlane{
    position: absolute;

    }
    #score{
    font-size: 20px;
    font-weight: 600;
    z-index: 9;
    position: absolute;
    top: 5px;
    left: 5px;
    }
    #box{
    300px;
    height: 300px;
    background: url(img/over.jpg);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
    }
    #btn{
    display: block;
    200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 35px;
    font-weight: 600;
    color: #fff;
    position: absolute;
    top: 45%;
    left: 18%;
    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <div id="playAir">

    </div>
    <script type="text/javascript">
    var playAir = document.getElementById("playAir");
    var oLi = document.getElementsByTagName('li');
    window.onload =function(){
    oGame.init();
    oGame.img();

    };
    var oGame = {
    //图片预加载
    'img':function(){
    oGame.myPlane = new Image();
    oGame.myPlane.className = 'myPlane';
    oGame.myPlane.src = 'img/myPlane.gif'; //自己的战斗机
    },

    //初始化
    'init':function(){
    playAir.innerHTML = '';
    var bg = document.createElement('div');
    bg.className = 'bg';
    playAir.appendChild(bg);
    var ul = '<ul><li>菜鸟模式</li><li>平民模式</li><li>精英模式</li><li>附体模式</li></ul><p>打飞机1-0-0版本</p>';
    bg.innerHTML=ul;
    for (var i=0;i<oLi.length;i++) {
    oLi[i].index = i;
    oLi[i].onmouseover = function(){
    this.style.background = '#ddd';
    this.style.color = '#fff';
    }
    oLi[i].onmouseout = function(){
    this.style.background = '#abcdef';
    this.style.color = '#eee';
    }
    oLi[i].onclick = oGame.start;
    }
    },
    //开始
    'start':function(){
    playAir.innerHTML = '';
    oGame.myPlane.src = 'img/myPlane.gif'; //自己的战斗机
    oGame.plone();
    oGame.index = this.index;
    //alert(oGame.index)0000
    oGame.score();

    },
    //本方飞机
    'plone':function(){
    playAir.appendChild(oGame.myPlane);
    var oL = playAir.offsetLeft + oGame.myPlane.offsetWidth/2;
    var oT = playAir.offsetTop + oGame.myPlane.offsetHeight/2;
    var oW = playAir.offsetWidth - oGame.myPlane.offsetWidth - parseInt(getStyle(playAir,'border'))*2;
    var oH = playAir.offsetHeight - oGame.myPlane.offsetHeight - parseInt(getStyle(playAir,'border'))*2;
    var x = 0;
    var y = 0;
    document.onkeydown = function(ev){
    ev = ev || event;
    if(ev.keyCode == '37'){
    x-=10;
    if(x<0){
    x=0;
    }
    oGame.myPlane.style.left = x + 'px';
    }
    if(ev.keyCode == '38'){
    y-=10;
    if(y<0){
    y=0;
    }
    oGame.myPlane.style.top = y + 'px';
    }
    if(ev.keyCode == '39'){
    x+=10;
    if(x>oW){
    x=oW;
    }
    oGame.myPlane.style.left = x + 'px';
    }
    if(ev.keyCode == '40'){
    y+=10;
    if(y>oH){
    y=oH;
    }
    oGame.myPlane.style.top = y + 'px';
    }
    if(ev.keyCode == '32'){
    clearInterval(oGame.bullet.timer)
    oGame.bullet(x,y);
    }
    }
    document.onmousemove = function(ev){
    ev = ev || event;
    x = ev.pageX - oL;
    y = ev.pageY - oT;
    if(x<0){
    x=0;
    }else if(x > oW){
    x=oW;
    }
    if(y<0){
    y=0;
    }else if(y>oH){
    y=oH;
    }
    oGame.myPlane.style.left = x + 'px';
    oGame.myPlane.style.top = y + 'px';
    }
    oGame.bullet.timer = setInterval(function(){
    oGame.bullet(x,y)
    },500)
    oGame.myPlane.timer = setInterval(function(){
    oGame.enemy()
    },500)
    },
    //子弹
    'bullet':function(xL,yT){
    var oBullet = document.createElement('img');
    oBullet.className = 'bullet';
    oBullet.src='img/bullet1.png'; //飞机打出来的子弹
    playAir.appendChild(oBullet)
    var top = yT -oBullet.offsetHeight/2 -oBullet.offsetHeight/2 ;
    oBullet.style.left = (xL - oBullet.offsetWidth/2 + oGame.myPlane.offsetWidth/2 )+ 'px';
    oBullet.style.top = top+'px';
    oBullet.timer = setInterval(function(){
    top-=10;
    if(top<0){
    clearInterval(oBullet.timer)
    if(oBullet.parentNode){
    oBullet.parentNode.removeChild(oBullet);
    }
    }
    oBullet.style.top = top+'px';
    },20)
    },
    //敌机
    'enemy':function(){
    var oEnemy = document.createElement('img');
    oEnemy.className = 'enemy';
    oEnemy.src = 'img/enemy3_fly_1.png'; //敌方的飞机
    playAir.appendChild(oEnemy);
    var lDistance = playAir.offsetWidth - oEnemy.offsetWidth;
    var hDistance = playAir.offsetHeight - oEnemy.offsetHeight;
    oEnemy.style.left = Math.random()*lDistance+'px';
    var y = 0;
    oEnemy.timer = setInterval(function(){
    y+=10;
    oEnemy.style.top = y+'px';
    if(y>hDistance){
    clearInterval(oEnemy.timer);
    oEnemy.parentNode.removeChild(oEnemy);
    }else{
    //敌机撞子弹
    var oBu = document.getElementsByClassName( 'bullet' );
    for (var i = 0; i<oBu.length;i++) {
    if(oGame.boom( oBu[i],oEnemy )){
    oBu[i].parentNode.removeChild( oBu[i] );
    oEnemy.src = 'img/中飞机爆炸.gif'; //敌方飞机爆炸gif图
    clearInterval(oEnemy.timer);
    oGame.num +=100;
    document.getElementById("score").innerHTML = oGame.num;
    setTimeout(function(){
    if(oEnemy.parentNode){
    oEnemy.parentNode.removeChild(oEnemy);
    }
    },500)
    }
    }
    //敌机撞飞机
    if(oGame.boom(oGame.myPlane,oEnemy)){
    oGame.myPlane.src = 'img/本方飞机爆炸.gif'; //自己飞机爆炸gif图
    oEnemy.src = 'img/中飞机爆炸.gif';
    clearInterval(oEnemy.timer);
    setTimeout(function(){
    if(oEnemy.parentNode){
    oEnemy.parentNode.removeChild(oEnemy);
    }
    if(oGame.myPlane.parentNode){
    oGame.myPlane.removeChild(oGame.myPlane);
    }
    },500)
    oGame.over();
    clearInterval(oGame.myPlane.timer);
    clearInterval(oGame.bullet.timer);
    document.onmousemove=null;
    document.onkeydown=null;
    }
    }
    },100)
    },
    'boom':function(obj,obj1 ){
    var l = obj.offsetLeft;
    var r = l + obj.offsetWidth;
    var t = obj.offsetTop;
    var tt = t + obj.offsetHeight;
    var l1= obj1.offsetLeft;
    var r1 = l1 + obj1.offsetWidth;
    var t1 = obj1.offsetTop;
    var tt1 = t1 + obj1.offsetHeight;
    if(l>r1 || r<l1 || t>tt1 || tt<t1){
    return false;
    }else{
    return true;
    }
    },
    'speed' : [
    [800 , 5 , 200],
    [500 , 10 , 250],
    [300 , Math.random()*20 + 20 , 300],
    [300 , 5, 100]
    ],
    'score':function(){
    var span = document.createElement('span');
    oGame.num = 0;
    span.id = 'score';
    span.innerHTML = oGame.num;
    playAir.appendChild(span);
    },
    'over':function(){
    playAir.innerHTML = '';
    var div = document.createElement(div);
    div.id = 'box';
    var btn = document.createElement('span');
    btn.id = 'btn';
    btn.innerHTML = '重新开始';
    div.appendChild(btn);
    playAir.appendChild(div);
    document.getElementById("btn").onclick = oGame.init;
    }
    }
    function getStyle( obj,attr){
    return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    字母图形
    IBM CEO罗睿兰:科技公司屹立百年的3个秘诀
    Uva 1331
    js 推断字符串是否包括某字符串
    Verilog堵塞赋值与非堵塞赋值
    tabBar颜色改动
    零基础学python-4.2 其它内建类型
    怎样给你的Android 安装文件(APK)瘦身
    Ambari-部署常见问题
    ops
  • 原文地址:https://www.cnblogs.com/zzgyq/p/6529395.html
Copyright © 2011-2022 走看看