“This is the 14th day of my participation in the Gwen Challenge.

1. Load the game background and hammer; When the mouse clicks on the background of the game, there is a hammer action

The background of the game and the size of the hammer are adjusted according to the actual size of the downloaded image

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

Js part: When mouse click, switch to hammer down the picture; When the mouse is released, the hammer is lifted

<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>
Copy the code

Effect: Hammer down, there is a hammer down the picture conversion

2. Move the hammer with the mouse pointer and hide the arrow in the center of the hammer

The CSS part:

    <style>
        #scene {
            width: 500px;
            height: 349px;
            background: url(bg.jpg);
            position: relative;
        }
        #hammer {
            width: 50px;
            height: 50px;
            position: absolute;
            margin-top: -25px; // Place the mouse over the center of the hammerborder, see no SettingsmarginThe effect of themargin-left: -25px;
            top:0;
            left:0;
            cursor: none;
        }
    </style>
Copy the code

Js part: use the event E to obtain the x and y coordinates of the mouse and assign values to the position of the hammer

<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>
Copy the code

Effect: The image is not PNG, so it is not transparent and will block

No hidden mouse arrow:



Hide the mouse arrow:

3. Unselect the image

When you double-click on an image, the image may be selected, and the effect is as follows:



Unselected state:

CSS:

        #hammer {
            width: 50px;
            height: 50px;
            position: absolute;
            /* margin-top: -25px; * /
            /* margin-left:-25px; * /
            top:0;
            left:0;
            /* cursor: none; * /user-select: none; // uncheck}Copy the code

4. Place a gopher picture in the first pit

The CSS part:

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

HTML:

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

Effect:

5. The gopher gradually rises to the top and then disappears after a pause

5.1 Let the gopher picture be under the pit first

        #hollow1Div{
            position:absolute;
            top: 90px;
            left: 123px;            
        }
        #hollow1 {
            width: 50px;
            height: 88px;
            position: absolute; // Here is the code to set the gopher in the pittop: 88px;
            left: 0;
        }
Copy the code

Effect:

5.2 Let the gopher rise slowly, and do not show the part under the pit

The hollow1Div must be set to a width and height, otherwise the image will not be visible throughout

        #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;
        }
Copy the code
        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); }}Copy the code

Effect:

5.3 The gopher slowly rises to the top, then pauses and disappears

        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'; }}}Copy the code

Effect:

6. When the mouse is clicked on the gopher, detect the collision

        var hollow1Div = document.getElementById('hollow1Div');
        scene.onclick = function(e){
            var x = e.clientX;
            var y = e.clientY;
            // Mouse position x ----- rectangle x,x2-----x1 
            var x1 = hollow1Div.offsetLeft + hollow1.offsetLeft;
            // The left value of hollow1Div relative to the scene + the image equals the left value of hollow1Div
            var x2 = x1 + hollow1.offsetWidth;
            // console.log('x:'+x+'; x1:'+x1);

            var y1 = hollow1Div.offsetTop + hollow1.offsetTop;// The lower position of the hole
            var y2 = y1 + hollow1Div.offsetHeight;
            if (x>x1 && x<x2 && y>y1 && y<y2){
                console.log('points');
                hollow1.src = 'beated.jpg';
            }
Copy the code

Effect: when you hit a gopher, there is an effect that changes from gopher to heart

7. Multiple gophers appear randomly

7.1 Set the location of each pit

Only the first three are used here

        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;
        }
Copy the code

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>
Copy the code

Effect:

7.2. The ground mouse rises randomly, and the hit state appears when the mouse is clicked

1. Randomly generate 0-2 numbers, corresponding to pits 1, 2, and 3, corresponding to the pit position of gopher randomly raised; 2. Encapsulate the hollowDiv and hollow gopher images of each pit into a list; 3. Which pit will raise the gopher, trigger show, click to trigger click event 4. The initial state should be adjusted by setting the nowTop position below the pit position each time the gopher is raised. The recovery picture is for the hit picture; Lower the image level (hammer on top); 5. Control the thread to ensure that there is only one mouse at a time

<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(){
            // Make sure there is only one mouse at a time
            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]);
            // Mouse position x ----- rectangle x,x2-----x1 
            var x1 = hollowDivAry[mouseId].offsetLeft + hollowAry[mouseId].offsetLeft;
            //hollowDiv1 = scene left + hollowDiv1 = scene left
            var x2 = x1 + hollowAry[mouseId].offsetWidth;
            // console.log('x:'+x+'; x1:'+x1);

            var y1 = hollowDivAry[mouseId].offsetTop + hollowAry[mouseId].offsetTop;// The lower position of the hole
            var y2 = y1 + hollowDivAry[mouseId].offsetHeight;// Hole position + hole height
            if (x>x1 && x<x2 && y>y1 && y<y2){
                console.log('points');
                hollowAry[mouseId].src = 'beated.jpg';
                hollowAry[mouseId].style.zIndex = '1000';
                // hollowAry[mouseId].src = 'mouse1.jpg';
                // Change the original Hollow1s to objects in the corresponding 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>
Copy the code