JS 射击游戏

2018-06-24 00:26:02来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

Js 的射击小游戏

玩法按下求 技能准备 点击左键射击,射击到后面的球得分

代码如下:直接粘到html文件中即可畅玩:

 

 

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        * {

            margin: 0px;

            padding: 0px;

        }

 

        .b {

            position: absolute;

            top: 0px;

            left: 300px;

            width: 15px;

            height: 15px;

            border: 1px solid yellow;

            -webkit-border-radius: 15px;

            -moz-border-radius: 15px;

            background-color: red;

        }

 

        .y {

            position: absolute;

            top: 0px;

            left: 150px;

            width: 15px;

            height: 15px;

            border: 1px solid yellow;

            -webkit-border-radius: 15px;

            -moz-border-radius: 15px;

            background-color: green;

        }

 

        #Img {

            display: none;

            position: absolute;

            top: 0px;

            left: 0px;

            width: 10px;

            height: 10px;

            border: 1px solid yellow;

            -webkit-border-radius: 15px;

            -moz-border-radius: 15px;

            text-align: center;

        }

 

        .q {

            position: absolute;

            top: 0px;

            left: 0px;

            width: 15px;

            height: 15px;

            border: 1px solid yellow;

            background-size: 100% auto;

            background-repeat: no-repeat;

            background-image: url(https://thumbnail0.baidupcs.com/thumbnail/515adce0c31d707acd055666cf0ee0de?fid=372067725-250528-265770217030144&time=1507017600&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-8BQFEfnNZRwvmEmBF1OUMXE4Q9Q%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=6394348028093904219&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video);

            -webkit-border-radius: 15px;

            -moz-border-radius: 15px;

            text-align: center;

        }

 

        #xz {

            position: absolute;

            top: 495px;

            left: 1107px;

            width: 70px;

        }

 

        #Main {

            background-color: #F60;

            width: 1177px;

            height: 570px;

        }

    </style>

</head>

<body>

    <div id="Main">

        <div id="Img"></div>

        <img id="xz" src="https://thumbnail0.baidupcs.com/thumbnail/f6d77c5db40deb70818e8fa1764d512e?fid=372067725-250528-1020959445205490&time=1507017600&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-QsVHde1Fml1AOj0RP8F3NjiB0Rg%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=6394370782677662805&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video" />

    </div>

    <div>一库一库 游戏规则:<br>

        你共有50次q技能的能量。<br>

        点击q技能,鼠标左键则向鼠标位置释放,右键取消技能<br>

        直接点击右键上下移动瞎子。<br>

        共释放了<span id="qindex">0</span>次q<br>

        命中英雄<span id="zindex">0</span>次<br>

    </div>

    <script>

        document.oncontextmenu = function (e) {

            e.preventDefault();

        };

        var it = null;

        var iy = null;

        var qindex = 0;

        var yindex = 0;

        var zindex = 0;

        var ele = document.getElementById("Main");

        var zele = document.getElementById("zindex");

        var qele = document.getElementById("qindex");

        var xz = document.getElementById("xz");

        var Img = document.getElementById("Img");

        var x = "";

        var y = "";

        var mLength = 3;

        function createB() {

            var b = document.createElement('div');

            var mLength = 2;

            var ib = null;

            b.className = 'b'

            ele.appendChild(b);

            function move() {

                if (b.offsetTop < 570) {

                    b.style.top = (b.offsetTop + mLength) + "px";

                } else {

                    b.remove();

                    clearInterval(ib);

                }

            }

            ib = setInterval(move, 10);

            return b;

        }

        function createY() {

            yindex++;

            var y = document.createElement('div');

            var iy = null;

            y.className = 'y';

            y.id = yindex + 'y';

            ele.appendChild(y);

            function move() {

                if (y.offsetTop < 570) {

                    y.style.top = (y.offsetTop + mLength) + "px";

                } else {

                    y.remove();

                    clearInterval(iy);

                }

            }

            iy = setInterval(move, 10);

            return y;

        }

        function GetMouse(oEvent) {

            x = oEvent.clientX;

            y = oEvent.clientY;

            Img.style.left = (x - 5) + "px";

            Img.style.top = (y - 5) + "px";

        }

        function createQ(index) {

            var q = document.createElement('div');

            q.className = 'q'

            q.id = 'q' + index;

            q.style.left = xz.offsetLeft + "px";

            q.style.top = (xz.offsetTop + 40) + "px";

            ele.appendChild(q);

            return q;

        }

        function releaseQ() {

            if (qindex >= 50) {

                return false;

            }

            qindex++;

            var q = createQ(qindex);

            qele.textContent = qindex;

            var qy = q.offsetTop;

            var qx = q.offsetLeft;

            var my = y - qy;

            var mx = x - qx;

            var titleL = Math.sqrt(my * my + mx * mx);//总长

            var mLength = 10;//10毫秒运动px数

            var titleTime = titleL / mLength;//运动到鼠标点的时间

            var xs = mx / titleTime;//y 速度

            var ys = (my / titleTime);//x 速度

            var itq = setInterval(move, 10, qindex);

            var qOffsetTop = q.offsetTop;

            var qOffsetLeft = q.offsetLeft;

            function move(qindex) {

                var qqindex = qindex;

                qOffsetTop += ys;

                qOffsetLeft += xs;

                q.style.top = (qOffsetTop) + "px";

                q.style.left = (qOffsetLeft) + "px";

                // 红点 getClass 循环红点 判断是否碰撞

                //绿点 同理  但是绿点只有一个

                if (q.offsetLeft < 310 && q.offsetLeft > 290) {

                    var ba = document.getElementsByClassName('b');

                    var offsetTop = q.offsetTop;

                    for (var index = 0; index < ba.length; index++) {

                        if (ba[index].offsetTop - 15 < offsetTop && ba[index].offsetTop + 15 > offsetTop) {

                            q.remove();

                            ba[index].remove();

                            clearInterval(itq);

                            if (qqindex >= 50) {

                                alert('成绩:' + zindex);

                                location.reload();

                            }

                        }

                    }

                }

                if (q.offsetLeft < 160 && q.offsetLeft > 140) {

                    var ya = document.getElementsByClassName('y');

                    var offsetTop = q.offsetTop;

                    for (var index = 0; index < ya.length; index++) {

                        if (ya[index].offsetTop - 15 < offsetTop && ya[index].offsetTop + 15 > offsetTop) {

                            q.remove();

                            ya[index].remove();

                            zindex++;

                            zele.textContent = zindex;

                            clearInterval(itq);

                            if (qqindex >= 50) {

                                alert('成绩:' + zindex);

                                location.reload();

                            }

                        }

                    }

                }

                if (q.offsetTop < -20 || q.offsetLeft < -20 || q.offsetTop > 550 || q.offsetLeft > 1150) {

                    q.remove();

                    clearInterval(itq);

                    if (qqindex >= 50) {

                        alert('成绩:'+zindex);

                        location.reload();

                    }

                }

            }

        }

        function moveXZ() {

            var xzy = xz.offsetTop;

            var my = y - xzy;

            it = setInterval(move, 10);

            function move() {

                if (my > 0) {

                    if (my > mLength) {

                        xz.style.top = (xz.offsetTop + mLength) + "px";

                        my -= mLength;

                    } else {

                        xz.style.top = (xz.offsetTop + my) + "px";

                        my = 0;

                    }

                } else if (my < 0) {

                    if (-my > mLength) {

                        xz.style.top = (xz.offsetTop - mLength) + "px";

                        my += mLength;

                    } else {

                        xz.style.top = (xz.offsetTop + my) + "px";

                        my = 0;

                    }

                } else {

                    clearInterval(it);

                }

            }

 

            //gogogo

        }

        function Main() {

            setInterval(createB, 1000);

            setInterval(createY, (600 / (mLength / 10)));

            ele.onmousemove = GetMouse;

            document.onkeydown = function (event) {

                var e = event || window.event || arguments.callee.caller.arguments[0];

                if (e && e.keyCode == 81) {

                    if (Img.style.display != 'block') {

                        Img.style.display = 'block';

                    }

                }

            };

            ele.onmousedown = function (elem) {

                if (Img.style.display == 'block') {

                    Img.style.display = 'none';

                    if (elem.button == 0) {

                        // 释放q技能

                        releaseQ()

                    }

                } else {

                    if (elem.button == 2) {

                        clearInterval(it);

                        // xz 向坐标点y轴位移

                        moveXZ();

                    }

                }

            }

        }

        function ChangeBg(id, url) {

            document.getElementById(id).src = url;

        }

        Main();

    </script>

</body>

</html>

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <style>        * {            margin: 0px;            padding: 0px;        }
        .b {            position: absolute;            top: 0px;            left: 300px;            width: 15px;            height: 15px;            border: 1px solid yellow;            -webkit-border-radius: 15px;            -moz-border-radius: 15px;            background-color: red;        }
        .y {            position: absolute;            top: 0px;            left: 150px;            width: 15px;            height: 15px;            border: 1px solid yellow;            -webkit-border-radius: 15px;            -moz-border-radius: 15px;            background-color: green;        }
        #Img {            display: none;            position: absolute;            top: 0px;            left: 0px;            width: 10px;            height: 10px;            border: 1px solid yellow;            -webkit-border-radius: 15px;            -moz-border-radius: 15px;            text-align: center;        }
        .q {            position: absolute;            top: 0px;            left: 0px;            width: 15px;            height: 15px;            border: 1px solid yellow;            background-size: 100% auto;            background-repeat: no-repeat;            background-image: url(https://thumbnail0.baidupcs.com/thumbnail/515adce0c31d707acd055666cf0ee0de?fid=372067725-250528-265770217030144&time=1507017600&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-8BQFEfnNZRwvmEmBF1OUMXE4Q9Q%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=6394348028093904219&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video);            -webkit-border-radius: 15px;            -moz-border-radius: 15px;            text-align: center;        }
        #xz {            position: absolute;            top: 495px;            left: 1107px;            width: 70px;        }
        #Main {            background-color: #F60;            width: 1177px;            height: 570px;        }    </style></head><body>    <div id="Main">        <div id="Img"></div>        <img id="xz" src="https://thumbnail0.baidupcs.com/thumbnail/f6d77c5db40deb70818e8fa1764d512e?fid=372067725-250528-1020959445205490&time=1507017600&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-QsVHde1Fml1AOj0RP8F3NjiB0Rg%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=6394370782677662805&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video" />    </div>    <div>一库一库 游戏规则:<br>        你共有50次q技能的能量。<br>        点击q技能,鼠标左键则向鼠标位置释放,右键取消技能<br>        直接点击右键上下移动瞎子。<br>        共释放了<span id="qindex">0</span>次q<br>        命中英雄<span id="zindex">0</span>次<br>    </div>    <script>        document.oncontextmenu = function (e) {            e.preventDefault();        };        var it = null;        var iy = null;        var qindex = 0;        var yindex = 0;        var zindex = 0;        var ele = document.getElementById("Main");        var zele = document.getElementById("zindex");        var qele = document.getElementById("qindex");        var xz = document.getElementById("xz");        var Img = document.getElementById("Img");        var x = "";        var y = "";        var mLength = 3;        function createB() {            var b = document.createElement('div');            var mLength = 2;            var ib = null;            b.className = 'b'            ele.appendChild(b);            function move() {                if (b.offsetTop < 570) {                    b.style.top = (b.offsetTop + mLength) + "px";                } else {                    b.remove();                    clearInterval(ib);                }            }            ib = setInterval(move, 10);            return b;        }        function createY() {            yindex++;            var y = document.createElement('div');            var iy = null;            y.className = 'y';            y.id = yindex + 'y';            ele.appendChild(y);            function move() {                if (y.offsetTop < 570) {                    y.style.top = (y.offsetTop + mLength) + "px";                } else {                    y.remove();                    clearInterval(iy);                }            }            iy = setInterval(move, 10);            return y;        }        function GetMouse(oEvent) {            x = oEvent.clientX;            y = oEvent.clientY;            Img.style.left = (x - 5) + "px";            Img.style.top = (y - 5) + "px";        }        function createQ(index) {            var q = document.createElement('div');            q.className = 'q'            q.id = 'q' + index;            q.style.left = xz.offsetLeft + "px";            q.style.top = (xz.offsetTop + 40) + "px";            ele.appendChild(q);            return q;        }        function releaseQ() {            if (qindex >= 50) {                return false;            }            qindex++;            var q = createQ(qindex);            qele.textContent = qindex;            var qy = q.offsetTop;            var qx = q.offsetLeft;            var my = y - qy;            var mx = x - qx;            var titleL = Math.sqrt(my * my + mx * mx);//总长            var mLength = 10;//10毫秒运动px数            var titleTime = titleL / mLength;//运动到鼠标点的时间            var xs = mx / titleTime;//y 速度            var ys = (my / titleTime);//x 速度            var itq = setInterval(move, 10, qindex);            var qOffsetTop = q.offsetTop;            var qOffsetLeft = q.offsetLeft;            function move(qindex) {                var qqindex = qindex;                qOffsetTop += ys;                qOffsetLeft += xs;                q.style.top = (qOffsetTop) + "px";                q.style.left = (qOffsetLeft) + "px";                // 红点 getClass 循环红点 判断是否碰撞                //绿点 同理  但是绿点只有一个                if (q.offsetLeft < 310 && q.offsetLeft > 290) {                    var ba = document.getElementsByClassName('b');                    var offsetTop = q.offsetTop;                    for (var index = 0; index < ba.length; index++) {                        if (ba[index].offsetTop - 15 < offsetTop && ba[index].offsetTop + 15 > offsetTop) {                            q.remove();                            ba[index].remove();                            clearInterval(itq);                            if (qqindex >= 50) {                                alert('成绩:' + zindex);                                location.reload();                            }                        }                    }                }                if (q.offsetLeft < 160 && q.offsetLeft > 140) {                    var ya = document.getElementsByClassName('y');                    var offsetTop = q.offsetTop;                    for (var index = 0; index < ya.length; index++) {                        if (ya[index].offsetTop - 15 < offsetTop && ya[index].offsetTop + 15 > offsetTop) {                            q.remove();                            ya[index].remove();                            zindex++;                            zele.textContent = zindex;                            clearInterval(itq);                            if (qqindex >= 50) {                                alert('成绩:' + zindex);                                location.reload();                            }                        }                    }                }                if (q.offsetTop < -20 || q.offsetLeft < -20 || q.offsetTop > 550 || q.offsetLeft > 1150) {                    q.remove();                    clearInterval(itq);                    if (qqindex >= 50) {                        alert('成绩:'+zindex);                        location.reload();                    }                }            }        }        function moveXZ() {            var xzy = xz.offsetTop;            var my = y - xzy;            it = setInterval(move, 10);            function move() {                if (my > 0) {                    if (my > mLength) {                        xz.style.top = (xz.offsetTop + mLength) + "px";                        my -= mLength;                    } else {                        xz.style.top = (xz.offsetTop + my) + "px";                        my = 0;                    }                } else if (my < 0) {                    if (-my > mLength) {                        xz.style.top = (xz.offsetTop - mLength) + "px";                        my += mLength;                    } else {                        xz.style.top = (xz.offsetTop + my) + "px";                        my = 0;                    }                } else {                    clearInterval(it);                }            }
            //gogogo        }        function Main() {            setInterval(createB, 1000);            setInterval(createY, (600 / (mLength / 10)));            ele.onmousemove = GetMouse;            document.onkeydown = function (event) {                var e = event || window.event || arguments.callee.caller.arguments[0];                if (e && e.keyCode == 81) {                    if (Img.style.display != 'block') {                        Img.style.display = 'block';                    }                }            };            ele.onmousedown = function (elem) {                if (Img.style.display == 'block') {                    Img.style.display = 'none';                    if (elem.button == 0) {                        // 释放q技能                        releaseQ()                    }                } else {                    if (elem.button == 2) {                        clearInterval(it);                        // xz 向坐标点y轴位移                        moveXZ();                    }                }            }        }        function ChangeBg(id, url) {            document.getElementById(id).src = url;        }        Main();    </script></body></html>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:onselectstart和onselect的使用

下一篇:javascript深入浅出——学习笔记(六种数据类型和隐式转换)