js实现一个简单的射击碰撞类游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js实现一个简单的射击碰撞类游戏代码，点击发射子弹，鼠标移动调整方向

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <style>
        *{margin:0;padding:0;}
        .startView{width:520px;height:600px;background:#f52e4c;position:relative;color:#fff;font-weight:bold;font-size: 50px;
            text-align:center;line-height:400px;user-select: none;-moz-user-select:none;-webkit-user-select:none;}
        .startView button{position:absolute;width:60px;height:30px;background:#ffff00;cursor:pointer;color:#000;border:none;left:230px;
            bottom:120px;outline-style: none;border-radius:5px;line-height:30px;}
        .bodyBg{width:520px;background:#ccc;height:600px; -moz-user-select:none;-webkit-user-select:none;user-select:none;display: none;}
        .bodyBg h1{height:60px;background:#f52e4c;position:relative;z-index: 9;padding-left:20px;line-height:60px;}
        #myFly{width:40px;height:40px;background:#141313;position:absolute;top:560px;z-index:1;}
        #shell{width:10px;height:10px;background:#f52e4c;border-radius:50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;
            position:absolute;}
        #enemy{width:40px;height:40px;background:#ff0;position:absolute;border:1px solid #f52e4c;top:0;}
        .gameOver{width:520px;height:600px;background:#f52e4c;position:relative;color:#fff;font-weight:bold;font-size: 50px;
            text-align:center;line-height:300px;display:none;-moz-user-select:none;-webkit-user-select:none;user-select:none;}
        .gameOver h1{font-size:20px;line-height:0;}
        .gameOver button{position:absolute;width:80px;height:30px;background:#ffff00;cursor:pointer;color:#000;border:none;left:220px;
            bottom:120px;outline-style: none;border-radius:5px;line-height:30px;}
    </style>
    <title></title>
</head>

<body>
    <div class="startView" id="startView">
        Aircraft Game
        <button id="startBtn">START</button>
    </div>
    <div class="bodyBg" id="bodyBg">
        <h1 id="score">score:0</h1>
        <div id="myFly"></div>
    </div>
    <div class="gameOver" id="gameOver">
        GAME OVER!
        <h1 id="iverScore">score:0</h1>
        <button id="restart">RESTART</button>
    </div>
    <script type="text/javascript">
        /**
     * Created by lx on 2015/11/5.
     */
    window.onload = init;
    function init(){
        var startBtn = document.getElementById("startBtn"),
            bodyBg = document.getElementById("bodyBg"),
            startView = document.getElementById("startView");
        if(startBtn.addEventListener){
            startBtn.addEventListener("click",startHandler,false);
        }else if(startBtn.attachEvent){
            startBtn.attachEvent("onclick",startHandler);
        }else{
            startBtn.onclick = startHandler;
        }
        function startHandler(){
            startView.style.cssText = "display:none;";
            bodyBg.style.cssText = "display:block;";
            if(startBtn.addEventListener){
                startBtn.removeEventListener("click",startHandler,false);
            }else if(startBtn.attachEvent){
                startBtn.detachEvent("onclick",startHandler);
            }else{
                startBtn.onclick = null;
            }
            initGame();
        }
    }
    var myFly = document.getElementById("myFly"),
        bodyBg = document.getElementById("bodyBg"),
        score = document.getElementById("score");
    function initGame(){
        var flyLeft = 20,
            shell = null,
            timer = null,
            shellArr = [],//存放子弹的数组
            setStartPos = 0,
            setTime = null,
            enemy = null,
            enemyArr = [],//存放敌人的数组
            scoreInt = 0;
    
        document.onmousemove = function(event){
            var e = event || window.event;
            if(e.clientY < 580 && e.clientY > 80 && e.clientX > 20 && e.clientX < 500){
                myFly.style.left = e.clientX - flyLeft + "px";
                myFly.style.top = e.clientY - flyLeft + "px";
            }
        };
        myFly.onmousedown = function(event){
            var e = event || window.event;
            if(e.stopPropagation){
                e.stopPropagation();
            }else{
                e.cancelBubble = true;
            }
            shell = document.createElement("div");
            shell.setAttribute("id","shell");
            bodyBg.appendChild(shell);
            shell.style.left = e.clientX - 5 + "px";
            shell.style.top = e.clientY - 5 + "px";
            shellArr.push(shell);
        };
        //*移动目标和检测碰撞*/
        var speed = 8;
     .........完整代码请登录后点击上方下载按钮下载查看