JS 射擊游戲

来源:http://www.cnblogs.com/zwcai/archive/2017/10/03/7623962.html
-Advertisement-
Play Games

Js 的射擊小游戲 玩法按下求 技能準備 點擊左鍵射擊，射擊到後面的球得分 代碼如下：直接粘到html文件中即可暢玩： <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset ...


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>


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 用JQuery寫出登錄彈出框
    類似百度的登錄彈出框，可用jquery的fadeIn()，hide()，show()，slideDown()等動畫函數實現，一下為html5 代碼： 小結：為獲取文檔元素可以為該元素設置一個空類，由空類名稱獲取，如上面的獲取.close；在寫表單的時候可以 放在<ol>和<ul>中，方便對齊格式；在 ...
  • echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.
    一：錯誤描述：echarts.js:1136 Uncaught Error: Initialize failed: invalid dom. 二：錯誤原因：echarts在用json數據請求時未調用 數據請求格式： 三：解決辦法： （1）將上述代碼放在一個函數中，然後在onload中調用這個函數 （ ...
  • 實戰系列之 Node.js 玩轉 Java
    這些年以來，Node.js的興起，JavaScript已經從當年的“世界最被誤解的語言”變成了“世界最流行的語言”。且其發展之勢，從語言本身的進化，庫和包的增長，工具支持的完善，star項目和領域解決方案的涌現，平臺、技術棧、應用領域的擴張等諸方面來看，都是前所未見的。隨著Node.js服務的普及， ...
  • Vue狀態管理vuex
    [1]引入 [2]概述 [3]開始 [4]state [5]getter [6]mutation [7]action [8]module [9]項目結構 [10]插件 [11]嚴格模式 [12]表單處理 [13]測試 [14]熱載入 ...
  • Vuex的API文檔
    前面的話 本文將詳細介紹Vuex的API文檔 概述 【構造器選項】 state Vuex store 實例的根 state 對象 mutations 在 store 上註冊 mutation，處理函數總是接受 state 作為第一個參數（如果定義在模塊中，則為模塊的局部狀態），payload 作為第 ...
  • Vue-router的API詳解
    [1]router-link [2]router-view [3]路由信息對象 [4]Router構造配置 [5]Router實例 [6]對組件註入 ...
  • Vue路由vue-router
    [1]概述 [2]使用 [3]路由模式 [4]重定向和別名 [5]根路徑 [6]嵌套路由 [7]命名路由 [8]命名視圖 [9]動態路由 [10]查詢字元串 [11]滾動行為 [12]過渡動效 [13]路由元數據 [14]編程式導航 [15]導航鉤子 [16]懶載入 ...
  • 電腦常見問題處理
    前面的話 作為程式員，每天與電腦打交道的時間可能比家人還多。所以，掌握一些電腦常識，處理棘手問題是必備技能 刪除文件 一些文件由於各種原因，無法直接刪除。例如，我在卸載git時，安裝目錄下有一個git_shell_ext64.dll文件無法刪除 解決辦法是修改其尾碼名，如git_shell_ext6 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類