原生老鼠游戏

现在前端的框架越来越好，让前端有了飞跃的发展，不过一切都在原生JS的基础构建的框架，只要原生有了过硬的能力，前端之路就就没有什么可以阻挡了，下面是用原生js做的一个小游戏，大家可以多多参考学习。

完成之后的效果图

html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="mou.css"/>
    </head>
    <body>
        <div id="box">
            <div class="scree"></div>
            <div class="btn">
                <input class="start" type="button" value="开始游戏" />
                <input class="end" type="button" value="暂停游戏" />
            </div>
        </div>
        
        <script src="mou.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

css代码

*{
    margin: 0;
    padding: 0;
}
#box{
    width: 800px;
    height: 600px;
    margin: 0 auto;
}
.scree{
    width: 100%;
    height: 550px;
    background: gray;
    border: 4px solid rosybrown;
}
.btn{
    box-sizing: border-box;
    padding-left: 300px;
}
.btn input{
        width: 80px;
    height: 30px;
    font-size: 15px;
    background: #ea4a80;
    font-weight: bold;
}
img{
    width: 50px;
    height: 50px;
}

js代码

//获取开始和结束按钮
var start = document.getElementsByClassName('start')[0];
var end = document.getElementsByClassName('end')[0];
//获取显示老鼠
var scree = document.getElementsByClassName('scree')[0];
//添加点击开始事件
var no = null;
var mouseNum = 0;
start.onclick = function(){
    //必须写这个if语句的判断，否则暂停之后，直接重新开始，而不会从暂停的位置开始
    if(mouseNum == 0){
        scree.innerHTML = '';
    }
    
    clearInterval(no);
    no = setInterval(mouse,200);
}
end.onclick = function(){
    clearInterval(no);
}


//生产老鼠的函数
function mouse(){
    if(mouseNum>=10){
        clearInterval(no);
        //清空屏幕中的老鼠
        scree.innerHTML = '';
        var imgD = document.createElement('img');
        imgD.src = 'img/end.png';
        //注意：图片一定的设置display：block 否则margin没有作用
        imgD.style='width:400px; height:120px; margin:200px auto;display:block';
        scree.appendChild(imgD);
        
        //把老鼠的数量设置为零，否则无法重新开始
        mouseNum = 0
        
        //数量大于10的时候直接让结束，不让再往下执行
        return;
    }
    var ImgE = document.createElement('img');
    ImgE.src = 'img/mouse.png';
    //让老鼠在屏幕中随机出现  
    //设置定位
    scree.style.position = 'relative';
    ImgE.style.position = 'absolute';
    //获取随机宽高
    var scrW = Math.floor(Math.random()*751); 
//  console.log(scrW);
    var scrH = Math.floor(Math.random()*501);
//  console.log(scrH);
    ImgE.style.top = scrH + 'px';
    ImgE.style.left = scrW + 'px';
    
    scree.appendChild(ImgE);
    //添加杀死老鼠的事件
    ImgE.onclick = killmouse;
    
    mouseNum++;
}

//杀死老鼠的函数
function killmouse(){
    scree.removeChild(this);
    mouseNum--;
}

之后会写出更好好玩的原生游戏。

原生老鼠游戏

推荐阅读更多精彩内容