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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看