Native js playing ground mouse game


Learning the syntax of native js is actually easy, and the most important thing is to practice logical thinking. For me, who just finished learning js grammar, it really took me a whole day to write the game. The js code written in the overall feeling is actually the code of some small cases that are usually practiced. The js code is relatively small, and the most difficult is logical thinking. Practicing logical thinking is necessary for every beginner to learn js.
Recommendation:
When writing some programs with strong logical thinking, it is suggested to draw a mind map. Can help write code is clear thinking, to avoid confusion.


The white wire frame is where each mouse appears

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .game {
            width: 750px;
            height: 600px;
            margin: 0 auto;
        }
        .ground {
            position: relative;
            width: 100%;
            height: 600px;
            background: url("images/bg_canvas.png") no-repeat;
            cursor: url("images/hammer.png") ,auto;
        }
        .ground .score {
            width: 300px;
            height: 30px;
            position: absolute;
            top: 180px;
            right: 40px;
        }
        .score img {
            width: 80px;
            height: 30px;
            display: inline-block;
        }
        .score span {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            color: #fff;
            font-size: 24px;
            margin-left: 10px;
            vertical-align: top;
        }
        .ground .mask {
            width: 140px;
            height: 125px;
            position: absolute;
            overflow: hidden;
            border: 1px solid #ccc;
            background-position: 50% 50%;
        }
        .mouse {
            width: 110px;
            height: 125px;
            position: absolute;
            top: 10px;
            animation: mousecreate 0.5s linear ;
        }
        @keyframes mousecreate {
            0%{
                top: 70px;
            }
            100% {
                top: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="game">
        <div class="ground" id="_ground">
            <div class="score">
                <img src="images/score.png" alt="">
                <span></span>
            </div>          
        </div>
    </div>
</body>
</html>
<script>
    // Get element, set global variable
    var _ground = document.getElementById("_ground");
    var Mask = [];// Storage mask mask
    var Mouse = [];// Storing mice
    var score = 0;
    var life = 10;
    var gemeTimer = null;
    var maxMouseCount = 2;//At the beginning, the number of rats does not exceed 2
    var coordinate = [{x: 130, y:173}, {x: 320, y:171}, {x: 515, y:175}, {x: 105, y: 265}, {x: 320, y: 256}, {x: 522, y: 256}, {x: 96, y: 350}, {x: 320, y: 355}, {x: 540, y: 358}];//Portal coordinates
    /*
        1:Press the ground button, the mouse hammer changes, the mouse pops up and the hammer recovers
        2:Creating caves and masks
        3:Creating mice 
        4:Mice appear
        5:Mouse disappear - > 1: disappear without knocking 2: disappear with knocking box
    */

    // 1: click ground and the mouse hammer changes
    _ground.onmousedown = function() {
        _ground.style.cursor = "url('images/hammer2.png'),auto";
    }
    _ground.onmouseup = function() {
        _ground.style.cursor = "url('images/hammer.png'),auto";    
    }
    init();// Initialization function
    // 2: create caves and masks
    function createMask() {
        for(var i = 0; i < coordinate.length; i++)
        {
        var mask = document.createElement("div");
        mask.className = "mask";
        mask.style.left = coordinate[i].x + "px";
        mask.style.top = coordinate[i].y + "px";
        mask.index = i;
        var maskimg = document.createElement("div");
        maskimg.className = "mask";
        maskimg.style.zIndex = i * 2  + 1; // The mask level is greater than the mouse level, and the mask level of the upper layer cannot be greater than the mouse level of the next layer, otherwise the mouse's head will be covered 
        maskimg.style.backgroundImage = "url('images/mask"+i+".png')";
        mask.appendChild(maskimg);// Add mask layer
        Mask[i] = mask;
        _ground.appendChild(mask);// Adding caves
        mask.onclick = function() {
            disappear(this.index,true); // (the index of the beaten mask, beaten)
        }
        }
    }

    // 3: create mouse
    function createMouse(i) {
        // Randomly selected mice
        var picnum = Math.floor(Math.random()*4);// Generate a random number from 0-4
        var mouse = document.createElement("div");
        mouse.className = "mouse";
        mouse.num = picnum;
        mouse.style.zIndex = i * 2;
        mouse.style.backgroundImage = "url('images/mouse"+picnum+".png')";
        Mouse[i] = mouse;// Add a mouse to the mouse array
        Mask[i].appendChild(mouse); // Add rats to the cave

        // Every mouse has a timer that disappears
        var timer = setTimeout(function(){
            disappear(i,false);
        },2000);
        mouse.timer = timer;

    }

    // 4: mouse appears
    function genarateMouse() {
        var num = Math.floor(Math.random()*coordinate.length);// Randomly generate a cave location
        if (Mouse.filter(function (item){
        return item;
    }).length < maxMouseCount && Mouse[num] == null) {
        createMouse(num);
    }
    }

    // 5: mouse disappears -- > 1: mouse disappears automatically 2: mouse disappears after being knocked
    function disappear(index,isHit) { // Whether isHit is hit, Boolean
        if(Mouse[index] != null)
        {
            Mouse[index].style.top = "70px";
            Mouse[index].style.transition  = "top 0.5s";
            if(isHit)// If it's knocked
            {
                clearInterval(Mouse[index].timer);// Timer to clear the mouse itself
                score += 10;
            }
            else
            {
                life -= 1;
            }
             setTimeout(function(){
                if(Mouse[index])
                {
                Mask[index].removeChild(Mouse[index]);
                }
                Mouse[index] = null;
            },500);
        }
    }

    function init() {
        createMask();
        gameTimer = setInterval(function(){
            genarateMouse();
            if(life <= 0)
            {
                clearInterval(gameTimer);
                alert("At the end of the game, your score is" + score);
            }
            document.getElementsByClassName("score")[0].getElementsByTagName("span")[0].innerHTML =  score + "´╝îLife:"+ life;
            maxMouseCount = score / 100 + 1;// For every score increase to 100, the number of rats allowed to appear is increased by 1
        },50);
       
    }
</script>

Tags: IE

Posted on Tue, 03 Dec 2019 15:01:02 -0500 by pacognovellino