原生JS经典射击游戏-小蜜蜂

最新推荐文章于 2024-08-04 16:33:59 发布
最新推荐文章于 2024-08-04 16:33:59 发布
阅读量2.8k 收藏 6
点赞数 3
分类专栏： Javascript 文章标签： javascript 游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rockolin/article/details/70825357
版权

经典射击游戏-小蜜蜂做之前的大概思路看下面这个图，这个游戏我打算用单例模式来写也就是平常我们说的单体模式。

源码链接
在线玩经典射击游戏-小蜜蜂

经典射击游戏-小蜜蜂

小蜜蜂

单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果他可以被实例化，那么他只能被实例化一次。 单体模式是javascript里面最基本但是也是最有用的也是最常用的模式之一。

单体模式的特点：

  1. 可以用来划分命名空间，从而清除全局变量所带来的危险,也就是该类只有一个实例
  2. 该类自行创建该实例，即在该类内部创建自身的实例对象，向整个系统公开这个实例接口。
  3. 利用分支技术来封装浏览器直接的差异
  4. 可以把代码组织的更为一体，便于阅读和维护。

单体模式的思路是： 一个类能返回一个对象的引用（并且永远是同一个）和一个获得该实例的方法（静态方法，通常使用getInstance名称）。那么当我们调用这个方法时，如果类持有的引用不为空就返回该引用，否者就创建该类的实例，并且将实例引用赋值给该类保持的那个引用再返回。同时将该类的构造函数定义为私有方法，避免其他函数使用该构造函数来实例化对象，只通过该类的静态方法来得到该类的唯一实例。 用一句话来说，单例模式的核心是确保只有一个实例，并提供全局访问。

布局代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>经典射击游戏-小蜜蜂</title>
  <link rel="stylesheet" href="css/index.css" />
  <script type="text/javascript" src="js/index.js" charset="UTF-8"></script>
 </head>
 <body>
    <div id="containt">
        <div id="goBtn">游戏开始</div>
    </div>
 </body>
</html>

CSS

body,ul,li,span{
    margin:0;
    padding:0;
}
html,body {
    width:100%;
    height:100%;
    overflow:hidden;
}
body {
    background:#f1f1f1;
}
li{
    list-style:none;
}
.score {
    color:white;
}
#containt{
    width:900px;
    height:600px;
    overflow:hidden;
    background:black;
    margin:10px auto;
    position:relative;
}
#goBtn{ 
    color:white;
    font-size:20px;
    cursor:pointer;
    border:1px #FFFFFF solid;
    width:100px;
    height:40px;
    line-height:40px;
    text-align:center;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-20px;
    margin-left:-50px;
}
.enemy1 {/* 一级怪的样式 */
    width:25px;
    height:25px;
    background:url(../images/aliensheet.png);
    background-position:left bottom;
    overflow:hidden;
    float:left;
}
.enemy2 {/* 二级怪的样式 */
    width:25px;
    height:25px;
    background:url(../images/aliensheet.png);
    background-position:left 50px;
    overflow:hidden;
    float:left;
}
.enemy3 {/* 三级怪的样式 */
    width:25px;
    height:25px;
    background:url(../images/aliensheet.png);
    background-position:left 72px;
    overflow:hidden;
    float:left;
}
.enemy4 {/* 四级怪的样式 */
    width:25px;
    height:25px;
    background:url(../images/aliensheet.png);
    background-position:left top;
    overflow:hidden;
    float:left;
}
.air { /* 飞机的样式 */
    width:32px;
    height:25px;
    background:url(../images/playersheet.png);
    background-position:left 0px;
    overflow:hidden;
    position:absolute;
    left:0px;
    top:0px;
}
.bullet { /* 子弹的样式 */
    width:4px;
    height:16px;
    background:url(../images/lasers.gif);
    background-position:left 0px;
    overflow:hidden;
    position:absolute;
}
#list {
    position:relative;
}
#list:after {
    content:'';
    display:block;
    clear:both;
}

javascript

window.onload = function() {
    var oBtn = document.getElementById("goBtn");
    oBtn.onclick = function() {
        this.style.display = "none";
        Game.init("containt");
    }
}
var Game = {
    //敌人数据
    oEnemy : {
        /**
        *   style 敌人样式
        *   blood 敌人的血量
        *   speed 敌人的移动速度
        *   score 敌人的积分
        */
        oEnemy1 : {style:"enemy1",blood:1,speed:2,score:1},
        oEnemy2 : {style:"enemy2",blood:2,speed:3,score:2},
        oEnemy3 : {style:"enemy3",blood:3,speed:4,score:3},
        oEnemy4 : {style:"enemy4",blood:4,speed:5,score:4}
    },
    gk : [
        //第一关
        {
            aMap : [
                'oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2',
                'oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2',
                'oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1'
            ],
            cloNum : 10,
            iSpeedX : 3,
            iSpeedY : 2,
            timer : 2000,
        },
        //第二关
        {
            aMap : [
                'oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3',
                'oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2',
                'oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1'
            ],
            cloNum : 10,
            iSpeedX : 4,
            iSpeedY : 2,
            timer : 3000,
        },
        //第三关
        {
            aMap : [
                'oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3',
                'oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2',
                'oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2','oEnemy2',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1'
            ],
            cloNum : 13,
            iSpeedX : 5,
            iSpeedY : 2,
            timer : 3000,
        },
        //第四关
        {
            aMap : [
                'oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4',
                'oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3',
                'oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1'
            ],
            cloNum : 13,
            iSpeedX : 5,
            iSpeedY : 2,
            timer : 3000,
        },
        //第五关
        {
            aMap : [
                'oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4',
                'oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4',
                'oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1'
            ],
            cloNum : 13,
            iSpeedX : 5,
            iSpeedY : 2,
            timer : 3000,
        },
        //第六关
        {
            aMap : [
                'oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4',
                'oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4','oEnemy4',
                'oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3','oEnemy3',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1',
                'oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1','oEnemy1',
            ],
            cloNum : 18,
            iSpeedX : 5,
            iSpeedY : 2,
            timer : 3000,
        }
    ],  
    //通关数
    gs : {
        gs : 0,
    },
    air : {
        style : "air", //飞机样式
        bulletStyle : "bullet" //子弹样式
    },
    //初始化
    init : function(id) {
        this.oParent = document.getElementById(id);
        this.createScore();
        this.createEemey(this.gs.gs);
        this.createAir()
    },
    //创建积分
    createScore : function() {
        var oSco = document.createElement("div");
        oSco.className = "score";
        oSco.innerHTML = "积分：<span>0</span>分";
        this.oParent.appendChild(oSco);
        this.oNum = oSco.getElementsByTagName("span")[0];
    },
    //创建敌人
    createEemey : function(iNow) {
        //如果敌人整体的ul还存在就把它删掉
        if(this.list) {
            clearInterval(this.list.timer); // 如果敌人整体的ul还存在就应该删掉前把定时器关掉
            this.oParent.removeChild(this.list); //删除敌人
        }
        var oGk = this.gk[iNow]; //获取关卡数据
        //创建ul并且加到containt里面去
        var oUl = document.createElement("ul");
        oUl.id="list";
        oUl.style.width = oGk.cloNum*25 + "px"; //给ul宽度，也就是控制每一行显示的个数
        this.list = oUl;
        this.oParent.appendChild(oUl); // 追加
        oUl.style.left = (this.oParent.offsetWidth - oUl.offsetWidth)/2 + "px"; //默认让敌人在中间出发
        document.title = "经典射击游戏-小蜜蜂第" + (this.gs.gs + 1) +"关";
        //创建li
        for(var i = 0; i < oGk.aMap.length; i++) {
            var oLi = document.createElement("li");
            //给敌人上装备比如：样式，血量，积分。把敌人的装备转成他们自身自定义属性
            oLi.className = this.oEnemy[oGk.aMap[i]].style;
            oLi.blood = this.oEnemy[oGk.aMap[i]].blood;
            oLi.speed = this.oEnemy[oGk.aMap[i]].speed;
            oLi.score = this.oEnemy[oGk.aMap[i]].score;
            oLi.zIndex1 = 1;
            oUl.appendChild(oLi);//追加
        }
        this.aLi = oUl.getElementsByTagName("li");// 向整个系统公开这个实例接口。

        //布局转换
        var arr = [];
        for(var i = 0; i < this.aLi.length; i++) {
            arr.push({l : this.aLi[i].offsetLeft,t : this.aLi[i].offsetTop}); //把宽高存到json里面，方便提取
        }
        // 加定位前把left和top值先加上去
        for(var i = 0; i < this.aLi.length; i++) {
            this.aLi[i].style.left = arr[i].l + "px";
            this.aLi[i].style.top = arr[i].t + "px";
        }
        //加定位
        for(var i = 0; i < this.aLi.length; i++) {
            this.aLi[i].style.position = "absolute";
        }
        this.runEemey(oGk); //敌人开始移动
    },
    //敌人移动
    runEemey : function(oGk) {
        var This = this; //转this指向，这没什么好说的
        var l = 0;
        var R = this.oParent.offsetWidth - this.list.offsetWidth; // 敌人右移动最大的left
        this.list.timer = setInterval(function(){
            if(This.list.offsetLeft < l) {
                oGk.iSpeedX*=-1; //转方向移动
                This.list.style.top = This.list.offsetTop + oGk.iSpeedY + "px"; //敌人向y轴移动一点点
            }
            else if(This.list.offsetLeft>R)
            {
                oGk.iSpeedX*=-1;//转方向移动
                This.list.style.top = This.list.offsetTop + oGk.iSpeedY + "px";//敌人向y轴移动一点点
            }
            This.list.style.left = This.list.offsetLeft + oGk.iSpeedX + "px"; //敌人向水平方向移动
        },200);
        //在这开始单兵做战
        setInterval(function(){
            This.oneMove();
        },oGk.timer)
    },
    //单兵做战 敌人追随
    oneMove : function() {
        var This = this;
        var nowLi = this.aLi[Math.floor(Math.random()*this.aLi.length-1)]; // 随机选一个敌人出来作战，厉害了我的哥
        nowLi.style.zIndex = nowLi.zIndex1++; // 敌人每次出来都是正前方出来
        nowLi.timer = setInterval(function(){
            //蜜蜂和飞机中心点的水平距离
            var x = (This.oAir.offsetLeft +　This.oAir.offsetWidth/2) - (nowLi.offsetLeft + This.list.offsetLeft + nowLi.offsetWidth/2); //X轴的距离
            var y = (This.oAir.offsetTop +　This.oAir.offsetHeight/2) - (nowLi.offsetTop + This.list.offsetTop + nowLi.offsetHeight/2); //Y的距离
            var z = Math.sqrt(x*x+y*y); //勾股定理，我就不多说了
            var oIsX=nowLi.speed*x/z; 
            var oIsY=nowLi.speed*y/z;
            nowLi.style.left = nowLi.offsetLeft + oIsX + "px"; //X轴追起来了，哈哈
            nowLi.style.top = nowLi.offsetTop + oIsY + "px"; //Y轴追起来了，哈哈
            //检测敌人是否碰到飞机，碰到就结束游戏
            if(This.pz(This.oAir,nowLi)){
                alert('游戏结束');
                window.location.reload(); //从新加载
            }
        },30);
    },
    // 创建飞机
    createAir : function() {
        var oAir = document.createElement("div");
        oAir.className = this.air.style;
        this.oAir = oAir;
        this.oParent.appendChild(oAir); // 追加
        //把飞机初始化位置调到中间
        oAir.style.left = (this.oParent.offsetWidth - oAir.offsetWidth)/2 + "px";
        oAir.style.top = (this.oParent.offsetHeight - oAir.offsetHeight-10) + "px";
        this.bindAir();
    },
    //操作飞机
    bindAir : function() {
        var timer = null;
        var iNum = 0;
        var This = this;
        document.onkeydown = function() {
            document.onkeydown = function(ev) {
                var ev = ev || event;
                if(!timer) {
                    timer = setInterval(run,30);
                }
                if(ev.keyCode == 37 ) { //按左方向的时候干的事
                    iNum = 1;
                } else if (ev.keyCode == 39) {  //按右方向的时候干的事
                    iNum = 2;
                } else if( ev.keyCode == 38) {//按上方向的时候干的事
                    iNum = 3;
                } else if( ev.keyCode == 40) {//按下方向的时候干的事
                    iNum = 4;
                }
            }
            document.onkeyup = function(ev) {
                var ev = ev || event;
                clearInterval(timer);
                timer = null;
                iNum = 0;
                if(ev.keyCode == 32) {
                    This.createBullet();
                }
            }
            function run() {
                if(iNum == 1) {
                    //禁止飞机从左边出去
                    if(This.oAir.offsetLeft<=0) {
                        This.oAir.style.left=0 + "px";
                    }
                    This.oAir.style.left = This.oAir.offsetLeft - 6 + "px";
                } else if (iNum == 2) {
                    //禁止飞机从右边出去
                    if(This.oParent.offsetWidth - This.oAir.offsetWidth <= This.oAir.offsetLeft) {
                        This.oAir.style.left = This.oParent.offsetWidth - This.oAir.offsetWidth + "px";
                    }
                    This.oAir.style.left = This.oAir.offsetLeft + 6 + "px";
                } else if (iNum == 3) {
                    //禁止飞机从上边出去
                    if(This.oAir.offsetTop <= 0 ) {
                        This.oAir.style.top = 10+"px";
                    }
                    This.oAir.style.top = This.oAir.offsetTop - 6 + "px";
                } else if (iNum == 4) {
                    //禁止飞机从下边出去
                    if(This.oAir.offsetTop >= This.oParent.offsetHeight - This.oAir.offsetHeight-10 ) {
                        This.oAir.style.top = This.oParent.offsetHeight - This.oAir.offsetHeight-10+"px";
                    }
                    This.oAir.style.top = This.oAir.offsetTop + 6 + "px";
                }
            }
        }
    },
    // 创建子弹
    createBullet : function() {
        //创建div
        var oBullet = document.createElement("div");
        oBullet.className = this.air.bulletStyle;
        this.oParent.appendChild(oBullet);
        //把子弹定位到飞机的正前方
        oBullet.style.left = this.oAir.offsetLeft + this.oAir.offsetWidth/2 + "px";
        oBullet.style.top = this.oAir.offsetTop - oBullet.offsetHeight + "px";
        //创建后就开始运动
        this.runBullet(oBullet);
    },
    //子弹运动
    runBullet : function(obj) {
        var This = this;
        obj.timer = setInterval(function(){
            if(obj.offsetTop < -11 ) {//当子弹飞出游戏窗就销毁该子弹，谨防子弹一直飞，导致子弹过多，页面元素过多影响性能
                clearInterval(obj.timer);
                This.oParent.removeChild(obj);
            } else {
                obj.style.top = obj.offsetTop - 5 + "px"; //子弹的速度
            }
            for(var i = 0; i < This.aLi.length; i++) {
                if(This.pz(obj,This.aLi[i])) { //如果碰撞了就为true否则为false
                    // 如果敌人血量为0了，就把他干掉
                    if(This.aLi[i].blood == 1 ) { 
                        clearInterval(This.aLi[i].timer);
                        This.oNum.innerHTML = parseInt(This.oNum.innerHTML) + This.aLi[i].score;
                        This.list.removeChild(This.aLi[i]);
                    } else { //或者血量减1
                        This.aLi[i].blood--;
                    }
                    clearInterval(obj.timer); //子弹碰到了敌人就把定时器关掉
                    This.oParent.removeChild(obj); //子弹碰到了敌人就把子弹干掉
                }
            }
            if(!This.aLi.length) {
                //检测过了最后一关，就通关了
                if(This.gk.length == This.gs.gs) {
                    alert("恭喜你，你通关了！");
                    window.location.reload();
                }
                This.gs.gs++; 
                This.createEemey(This.gs.gs);
            }
        },30);
    },
    //碰撞检测
    pz : function(obj1,obj2) {
        var L1 = obj1.offsetLeft;
        var R1 = obj1.offsetLeft +　obj1.offsetWidth;
        var T1 = obj1.offsetTop;
        var B1 = obj1.offsetTop + obj1.offsetHeight;

        //因为小蜜蜂li是装在ul里面的，所以计算小蜜蜂的top、left值是相对于ul的，所以要加上ul的top、left值才算小蜜蜂的值
        var L2 = obj2.offsetLeft + this.list.offsetLeft;
        var R2 = obj2.offsetLeft + obj2.offsetWidth + this.list.offsetLeft;
        var T2 = obj2.offsetTop + this.list.offsetTop;
        var B2 = obj2.offsetTop +obj2.offsetHeight + this.list.offsetTop;

        if(R1<L2 || L1 > R2 || T1 < T2 || T1 >  B2) {
            //这里是没有碰撞
            return false;
        } else {
            //碰撞了返回true
            return true;
        }
    }
}

最新源码点击这里源码链接

代码要是有看不懂的地方，在码云给我留言，我会第一时间回复你们。

rockolin
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
利用原生js制作小游戏
weixin_45044349的博客
05-26 3882
1.编写函数： 该函数对游戏间隔时间、影响游戏的对象的绑定、开始、结束进行编写 /** * * @param {*} duration 间隔时间 * @param {*} thisObj 绑定的this对象 * @param {*} startCallBack 开始回调函数 * @param {*} stopCallBack 结束回调函数 */ function getTimer(duration, thisObj, startCallBack, stopCallBack) { va
JS原生编写飞机大战小蜜蜂游戏
南舟
09-14 6495
javascript设计模式之单体模式--飞机大战小蜜蜂游戏 单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果他可以被实例化，那么他只能被实例化一次。 单体模式是javascript里面最基本但是也是最有用的也是最常用的模式之一。 单体模式的特点： 1，可以用来划分命名空间，从而清除全局变量所带来的危险。 2，利用分支技术来封装浏览器直接的差异。 3，可以把
原生JS 获取自定义data-xxx 数据
weixin_46473856的博客
03-24 1457
最近在写js的时候遇到原生用js 获取 自定义data 获取从数据库读取的数据 调用其他js 渲染模型 需要 在循环的div 中 自定义 data-image (可以自定义) <!-- 模型文件显示位置--> <div class="box_group"> <div c
探究原生JS-XMLHttpRequest-小黄人的请求
世界和我们都不该止步于此
03-24 2574
一.了解小黄人 使用jQuery来进行请求是比较简单的，既然jQuery是一个基于原生JS的JS库，那么jQuery中的Ajax也应该是一个封装出来的函数，是的，它的原型就是XMLHttpRequest（xhr）我们喜欢称呼它为：小黄人，它是浏览器给我们提供的JavaScript对象，通过它我们可以去请求服务器上的数据资源，Ajax函数就是基于小黄人对象封装出来的，我们看这样一张图来理解一下它们之间的关系： 所以我们原生JS也可以使用xhr对象发起Ajax请求，只不过复杂一点，不过这也正常，要是不复
使用原生js实现element-ui的message组件
Rookie
06-07 5427
文章目录前言搭建效果环境创建html文件创建css文件绑定按钮事件创建messaage组件construct()setOption(options)完整的js代码小结结语 前言 使用vue的朋友应该或多或少都知道element-ui组件吧，这篇博客我将使用原生js实现一个“低配”版本的message组件。 开始前先给出element-ui message组件的网址链接，不论是否有使用过，大家都可以参照的对比。 目标message组件 搭建效果环境 为了演示实现效果，所以我们必须得需要一个完整的运行环境，以如
原生js小游戏——俄罗斯方块
qq_56942232的博客
09-29 1073
原生js小游戏——俄罗斯方块
jQueryy原生js实现---hover事件
wujimiao的专栏
10-03 1万+
jQuery常用鼠标事件之一，hover事件。相信大家对它很熟悉，对其原理也很熟悉。通常就是鼠标经过，鼠标离开事件的集合。我为了更好理解jQuery插件库，所以找一些常用方法用js实现，增强对js的理解。 根据上面分析，核心事件就是onmouseover和onmouseout。那么我们就看一下初步效果吧！ 3 4 1 2 //j
微信小程序原生框架转Uni-App：你需要知道的一切
热门推荐
沉淀、分享、成长，让自己和他人都能有所收获！
08-31 1万+
代码迁移永远不会是一个简单的任务，但通过有条不紊的步骤和充分的准备，我们可以使这个过程尽可能地平滑。希望这篇博客能给你在微信小程序原生框架迁移到Uni-App的过程中提供一些有用的信息和建议。作者：默语日期：2023-08-31标签：#微信小程序 #Uni-App #代码迁移点击下方名片，加入IT技术核心学习团队。一起探索科技的未来，共同成长。
原生 js ----构造函数
yyjourney的博客
04-09 1304
javascript 是一种基于对象的语言，它包含5中原生数据类型： number(数值类型) boolean（布尔值类型） string(字符串类型) null（空） undefined(未定义) 除此之外，其他的都是对象，函数也是一个对象； function fn(){ //这是一个函数声明，函数是一个特殊的对象 } 构造函数定义 构造函数是一个普通的函数，与其他函数没有...
原生js-js类库-js框架-前端框架-区别
Be myself
08-24 1947
原生js-js类库-js框架-前端框架-区别 1.原生js就是javascript ，也是网站前端核心内容，主要操作流程是，先获得DOM或切换DOM，然后修改DOM对象的属性或调用DOM对象的方法，存在的主要问题是低版本IE兼容性问题及复杂的DOM操作 2.js类库--jquery zeptojs js类库，解决了原生js中，获取DOM或更高DOM对象，操作DOM复杂的问题，把DOM操作变得简单，而且解决了浏览器的兼容性问题。但是本质上和原生js设计思想没有差别，还是获取...
经典射击游戏-小蜜蜂
04-29
【标题】"经典射击游戏-小蜜蜂"是一个基于JavaScript编程语言开发的游戏，它致敬了早期电子游戏中的经典之作。在游戏开发领域，JavaScript是一种广泛使用的客户端脚本语言，尤其适用于Web浏览器，允许开发者创建交互...
原生JS经典小项目-DOM练习
05-18
在本项目"原生JS经典小项目-DOM练习"中，我们将深入探讨JavaScript与DOM（文档对象模型）的交互，这是Web开发中的核心技能。DOM是HTML和XML文档的编程接口，它允许我们通过JavaScript来查找、修改和操作页面元素。在...
原生JS经典小项目-form表单校验
05-18
通过这个原生JS的小项目，你可以深入理解表单校验的原理，掌握如何使用JavaScript实现高效且友好的表单验证机制。这不仅提高了网页应用的安全性，还能提升用户的操作体验。在实际开发中，这样的技能是必不可少的。
原生JS经典小项目-网页布局
05-18
本项目"原生JS经典小项目-网页布局"旨在通过实际操作来深入理解和掌握JS在网页布局中的应用，结合HTML和CSS的基础知识，构建出具有响应性和灵活性的网页。 首先，我们需要理解HTML是网页的基础结构，CSS则是用于...
原生js撞击小游戏-兔子吃月饼
10-10
【原生JS撞击小游戏-兔子吃月饼】是一款适用于手机端的HTML5小游戏，它完全基于JavaScript（JS）开发，无需依赖任何外部库或框架。这款游戏的设计理念是通过简单的操作让玩家控制兔子移动，吃到屏幕中的月饼，从而...
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 634
注释很详细，直接上代码……
Springboot+Websocket+Security+Vue 实现弹幕推送功能
Gemini1995的博客
08-01 571
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
RN高级interview
流星雨的博客
07-31 501
RN高级interview
vite静态资源处理，处理vite项目中src和url路径问题
WanweI897的博客
08-02 424
处理vite项目中src和url路径问题
原生js怎么添加el-button
09-01
在原生的JavaScript中，我们可以通过以下步骤来添加el-button： 1. 首先，获取一个父元素的引用，该父元素将包含el-button。可以通过getElementById()、querySelector()等方法获取到父元素的引用。 2. 使用document....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值