JS应用：打地鼠小游戏记录

安之ccy
515 阅读2分钟

“这是我参与更文挑战的第14天，活动详情查看： 更文挑战”

1.加载游戏背景和锤子；当鼠标点击游戏背景时，有锤子敲打的动作

游戏背景和锤子的大小根据实际下载的图片大小做调整

    <style>
        #scene {
            width: 500px;
            height: 349px;
            background: url(bg.jpg);
        }
        #hammer {
            width: 50px;
            height: 50px;
        }
    </style>

js部分：鼠标点击时，切换到锤子敲打下去的图片；鼠标松开时，锤子是上举的状态

<body>
    <div id="scene">
        <img src="hammer1.jpg" alt="" id="hammer">
    </div>
    <script>
        var scene = document.getElementById('scene');
        var hammer = document.getElementById('hammer');
        scene.onmousedown = function(){
            hammer.src = 'hammer2.jpg'; 
        }
        scene.onmouseup = function(){
            hammer.src = 'hammer1.jpg'; 
        }
    </script>
</body>

效果：锤子打下去时，有一个锤子砸下去的图片转换
在这里插入图片描述

2.让锤子跟着鼠标移动，并让鼠标在锤子中心位置，隐去鼠标箭头

css部分：

    <style>
        #scene {
            width: 500px;
            height: 349px;
            background: url(bg.jpg);
            position: relative;
        }
        #hammer {
            width: 50px;
            height: 50px;
            position: absolute;
            margin-top: -25px;
            //让鼠标在锤子中心，
            //可以在锤子图片上加border，看看没有设置margin时的效果
            margin-left:-25px;
            top:0;
            left:0;
            cursor: none;
        }
    </style>

js部分：利用事件e，获取鼠标的x、y坐标，赋值给锤子的位置

<body>
    <div id="scene">
        <img src="hammer1.jpg" alt="" id="hammer">
    </div>
    <script>
        var scene = document.getElementById('scene');
        var hammer = document.getElementById('hammer');
        scene.onmousedown = function(){
            hammer.src = 'hammer2.jpg'; 
        }
        scene.onmouseup = function(){
            hammer.src = 'hammer1.jpg'; 
        }
        scene.onmousemove = function(e){
            var x = e.clientX;
            var y = e.clientY;
            hammer.style.top = y + 'px';
            hammer.style.left = x + 'px';
        }
    </script>
</body>

效果：图片不是png的，所以没有透明，会遮挡
没有隐去鼠标箭头：
在这里插入图片描述
隐去鼠标箭头：
在这里插入图片描述

3.取消图片选中状态

当双击图片时，可能会选中该图片，此时的效果是：
在这里插入图片描述
取消选中状态：
css上：

        #hammer {
            width: 50px;
            height: 50px;
            position: absolute;
            /* margin-top: -25px; */
            /* margin-left:-25px; */
            top:0;
            left:0;
            /* cursor: none; */
            user-select: none;//取消选中
        }

4.放置一张地鼠图片，先放在第一个坑内

css部分：

        #hollow1Div{
            position:absolute;
            top: 90px;
            left: 123px;            
        }
        #hollow1 {
            width: 50px;
            height: 88px;
        }

html：

    <div id="scene">
        <img src="hammer1.jpg" alt="" id="hammer">
        <div id="hollow1Div"><img src="mouse1.jpg" alt="" id="hollow1"></div>
    </div>

效果：
在这里插入图片描述

5.地鼠逐渐上升至最高处，停顿一会后消失

5.1先让地鼠图片在坑下面

        #hollow1Div{
            position:absolute;
            top: 90px;
            left: 123px;            
        }
        #hollow1 {
            width: 50px;
            height: 88px;
            position: absolute;//此处是设置地鼠在坑下的代码
            top: 88px;
            left: 0;
        }

效果：
在这里插入图片描述

5.2让地鼠缓慢上升，在坑下方的部分不显示

hollow1Div必须设置宽高，否则图片全程都看不见

        #hollow1Div{
            position:absolute;
            border:1px solid #ccc;
            top: 90px;
            left: 123px; 
            height: 88px;
            width: 50px;
            overflow: hidden;  
        }
        #hollow1Div #hollow1 {
            width: 50px;
            height: 88px;
            position: absolute;
            top: 88px;
            left: 0;
        }

        var hollow1 = document.getElementById('hollow1');
        var mouseLoop = setInterval(mouseShow, 100);
        var initTop = 88;
        var endTop = 0;
        var nowTop = 88;
        function mouseShow(){
            if (nowTop > endTop){
                 nowTop -= 4;
                 hollow1.style.top = nowTop + 'px';
            }
            if (nowTop <= endTop){
                hollow1.style.top = initTop + 'px';
                clearInterval(mouseLoop);
            }

        }

效果：
在这里插入图片描述

5.3地鼠缓慢上升到最高处后，停顿一下再消失

        var mouseLoop = setInterval(mouseShow, 100);
        var initTop = 88;
        var endTop = 0;
        var nowTop = 88;

        var waitTime = 0;
        var maxTime = 500;
        function mouseShow(){
            if (nowTop > endTop){
                 nowTop -= 8;   
                 hollow1.style.top = nowTop + 'px'; 
            }
            // if (nowTop < endTop){
            //     nowTop = 0;   
            //      hollow1.style.top = '0px'; 
            // }
            if (nowTop <= endTop){
                if (waitTime < maxTime){
                    waitTime += 100;
                }
                else if (waitTime >= maxTime){
                    clearInterval(mouseLoop);
                    hollow1.style.top = initTop + 'px';
                }
                
            }
            
        }

效果：
在这里插入图片描述

6.鼠标点击到地鼠时，检测碰撞

        var hollow1Div = document.getElementById('hollow1Div');
        scene.onclick = function(e){
            var x = e.clientX;
            var y = e.clientY;
            //鼠标的位置x  -----  矩形横坐标x1,x2-----x1 <x <x2时碰撞，y轴同理
            var x1 = hollow1Div.offsetLeft + hollow1.offsetLeft;
            //hollow1Div相对于scene的left值 + 图片相当于hollow1Div的left值
            var x2 = x1 + hollow1.offsetWidth;
            // console.log('x:'+x+';x1:'+x1);

            var y1 = hollow1Div.offsetTop + hollow1.offsetTop;//洞的下方位置
            var y2 = y1 + hollow1Div.offsetHeight;
            if (x>x1 && x<x2 && y>y1 && y<y2){
                console.log('点中');
                hollow1.src = 'beated.jpg';
            }

效果：打中地鼠时，有一个打中的效果图，从地鼠变成爱心图
在这里插入图片描述

7.多个地鼠随机出现

7.1 设置每个坑的位置

此处只设前三个

        div[id^='hollowDiv'] {
            position:absolute;
            /* border:1px solid #ccc; */
            height: 88px;
            width: 50px;
            overflow: hidden;  
            border: 1px solid black;
        }
        #hollowDiv1{
            top: 90px;
            left: 123px; 
        }
        #hollowDiv2{
            top: 90px;
            left: 225px; 
        }
        #hollowDiv3{
            top: 90px;
            left: 335px; 
        }
        div[id^='hollowDiv']>img {
            width: 50px;
            height: 88px;
            position: absolute;
            top: 88px;
            left: 0;
        }

html：

    <div id="scene">
        <img src="hammer1.jpg" alt="" id="hammer">
        <div id="hollowDiv1"><img src="mouse1.jpg" alt="" id="hollow1"></div>
        <div id="hollowDiv2"><img src="mouse1.jpg" alt="" id="hollow2"></div>
        <div id="hollowDiv3"><img src="mouse1.jpg" alt="" id="hollow3"></div>
    </div>

效果：
在这里插入图片描述

7.2.地鼠随机升起，鼠标点中则呈现打中状态

1.随机生成0-2数字，对应坑1，2，3，对应随机升起地鼠的坑位；
2.将每个坑的hollowDiv和hollow地鼠图片封装进一个list；
3.哪个坑位要升起地鼠，就触发show，点击时触发点击事件
4.初始状态要调整，每次要升起地鼠时，将nowTop位置设置到坑位之下；恢复图片是为被打击的图片；将图片的层次降低（锤子在最上面）；将等待时间归零
5.控制线程，保证每次只有一个老鼠

<script>
        // var hollowDiv1 = document.getElementById('hollowDiv1');
        // var hollow1 = document.getElementById('hollow1');

        var hollowDivAry = [];
        var hollowAry = [];
        var mouseId;
        for (var i = 0; i < 3; i++){
            hollowDivAry[i] = document.getElementById('hollowDiv' + (i+1));
            hollowAry[i] = document.getElementById('hollow'+ (i+1));
        }
        // var mouseLoop = setInterval(mouseShow, 100);
        var mouseLoop = null;
        var initTop = 88;
        var endTop = 0;
        var nowTop = 88;
        setInterval(function(){
            //保证每次只有一个老鼠
            if (mouseLoop == null){
            mouseId = parseInt(Math.random()*3);
            nowTop = 88;
            waitTime = 0;
            hollowAry[mouseId].src = 'mouse1.jpg';
            hollowAry[mouseId].style.zIndex = '888';
            console.log('mouseId:'+mouseId);
            mouseLoop = setInterval(mouseShow, 100);
            }

        },3000);
        
        var scene = document.getElementById('scene');
        var hammer = document.getElementById('hammer');
        
        scene.onmousedown = function(){
            hammer.src = 'hammer2.jpg'; 
        }
        scene.onmouseup = function(){
            hammer.src = 'hammer1.jpg'; 
        }
        scene.onmousemove = function(e){
            var x = e.clientX;
            var y = e.clientY;
            hammer.style.top = y + 'px';
            hammer.style.left = x + 'px';
        }
        scene.onclick = function(e){
            var x = e.clientX;
            var y = e.clientY;
            console.log('hollowDivAry[mouseId]:' + hollowDivAry[mouseId]);
            //鼠标的位置x  -----  矩形横坐标x1,x2-----x1 <x <x2时碰撞，y轴同理
            var x1 = hollowDivAry[mouseId].offsetLeft + hollowAry[mouseId].offsetLeft;
            //hollowDiv1相对于scene的left值 + 图片相当于hollowDiv1的left值
            var x2 = x1 + hollowAry[mouseId].offsetWidth;
            // console.log('x:'+x+';x1:'+x1);

            var y1 = hollowDivAry[mouseId].offsetTop + hollowAry[mouseId].offsetTop;//洞的下方位置
            var y2 = y1 + hollowDivAry[mouseId].offsetHeight;//洞的位置+洞高
            if (x>x1 && x<x2 && y>y1 && y<y2){
                console.log('点中');
                hollowAry[mouseId].src = 'beated.jpg';
                hollowAry[mouseId].style.zIndex = '1000';
                // hollowAry[mouseId].src = 'mouse1.jpg';
                //将原先的hollow1都改成相应的hollowAry里的对象
            }
        }
        
        var waitTime = 0;
        var maxTime = 1000;
        function mouseShow(){
            if (nowTop > endTop){
                 nowTop -= 8;   
                 hollowAry[mouseId].style.top = nowTop + 'px'; 
            }
            if (nowTop <= endTop){
                if (waitTime < maxTime){
                    waitTime += 100;
                }
                else if (waitTime >= maxTime){
                    clearInterval(mouseLoop);
                    hollowAry[mouseId].style.top = initTop + 'px';
                    mouseLoop = null;
                }
                
            }
            
        }
    </script>

在这里插入图片描述

avatar
文章
阅读
粉丝
相关推荐
2024为什么前端都应该掌握Nextjs 或 Nuxtjs
55k阅读
 · 
351点赞
开心打地鼠，Android休闲益智游戏开发
487阅读
 · 
2点赞
jQuery小游戏——打地鼠
275阅读
 · 
1点赞
VUE小游戏——打地鼠
549阅读
 · 
5点赞
Elasticsearch 和 Go 中使用向量搜索寻找地鼠
850阅读
 · 
0点赞
JSDoc 真能取代 TypeScript？
69k阅读
 · 
670点赞
电话背调，我给他打了8分
125k阅读
 · 
1.2k点赞
爆笑，打地鼠的极限，PyAutoGUI的开始~
287阅读
 · 
1点赞
被裁员了，记录下去年刚入职一个月时在组内关于前端基建的技术分享
85k阅读
 · 
2.0k点赞
可视化大屏：autofit.js 一行搞定自适应
109k阅读
 · 
2.2k点赞

友情链接：