I am participating in the nuggets Community game creative submission Contest. For details, please see: Game Creative Submission Contest

preface

Nuggets really is too understand, write game activities, do not want to participate in all difficult! Number one, don’t step on the white!

Let’s look at the effect

As shown in the figure above, the three JKL keys correspond to three columns, with score on the upper left and time on the right. Click the corresponding button to play the game, if the wrong type will pop up the score and time

Next, we will begin to dismember this small game, step by step analysis is exactly how to achieve, let’s go~

html

<body>
    <div class="main">
        <div id="score">0</div>
        <div id="time">00:00:00</div>
    </div>
    <div class="caption">Don't step on the white!</div>
    <div class="container">
        <table id="tab">
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <span class="font one">J</span>
        <span class="font two">K</span>
        <span class="font three">L</span>
    </div>
</body>
Copy the code

The rest of the div is plain, with the middle body implemented as a table, and the JKL displayed at the top of the table

The homepage font

width: 300px;
font-size: 60px;
font-weight: bold;
text-align: center;
position: relative;
margin: 0 auto;
-webkit-text-fill-color: transparent;
/* Text fill color */
-webkit-text-stroke: 1.2 px. white;
Copy the code

The two attributes in focus: the last two attributes, webkit-text-fill-color and -webkit-text-stroke, the first is the fill color of the text and the second is the border color of the text, resulting in this effect

The middle table

The subject usestableI did. Four rows and three columns, and each row has a black block generated in a random column

Math.ceil(Math.random() * 3) - 1
Copy the code

Math.random() takes a random decimal from 0 to 1, multiplies by 3 to get a random decimal from 1 to 3, and math.ceil () rounds up and subtracts by 1 to get three possible results: 0, 1, 2

Realize each line of black block random display

Create a new DOM element hang

var Game={
    ...
    hang: document.getElementsByTagName('tr'); . }Copy the code

Add black blocks to random columns for each row

/ / get columns -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
Game.hang[0].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
Game.hang[1].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
Game.hang[2].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
Game.hang[3].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
Copy the code

The key events

The keypress event invokes two methods, one the main method key event and the other the color event responsible for displaying JKL

The key events

key: function () {
            onkeydown = function (event) {
                if (Game.bool == true && (event.key == 'j' || event.key == 'k' || event.key == 'l')) {
                    Game.int = setInterval(Game.times, 10);
                    Game.bool = false;
                }
                switch (event.key) {
                    case 'j':
                        if (Game.hang[3].children[0].style.background == 'black') {
                            Game.speed();
                            Game.scores();
                        } else {
                            Game.over();
                            Game.begin()
                        }
                        break;
                    case 'k':
                        if (Game.hang[3].children[1].style.background == 'black') {
                            Game.speed();
                            Game.scores();
                        } else {
                            Game.over();
                            Game.begin()
                        }
                        break;
                    case 'l':
                        if (Game.hang[3].children[2].style.background == 'black') {
                            Game.speed();
                            Game.scores();
                        } else {
                            Game.over();
                            begin()
                        }
                        break; } Game.color(); }}Copy the code

The first if statement controls the start and end of the Game. The Game starts when JKL is pressed, and game. times is a timer that executes every second

times

times: function () {
           Game.mis += 1;
           if (Game.mis > 99) {
               Game.mis = 0;
               Game.sec += 1;
           }
           if (Game.sec > 59) {
               Game.sec = 0;
               Game.min += 1;
           }
           if (Game.min > 23) {
               Game.min = 0;
           }
           Game.begin();
       },
Copy the code

Switch statement is the main logic, each key is divided into success and failure, if the current key is black, execute the speed method and score method

Speed method

speed: function () {
    Game.adds();
    Game.speedup();
    // There is an introduction below
},
Copy the code

Score method

scores: function () {
    Game.score += 1;
    Game.sco.innerHTML = Game.score;
},
Copy the code

Return the set score +1 to the page

If the button is judged not to be a black block, perform the end action, calling over() and begin()

Over method

over: function () {
    alert('Game over, score:' + Game.score + '; It ' + Game.time.innerHTML);
    clearInterval(Game.int);
    Game.mis = 0;
    Game.sec = 0;
    Game.min = 0;
    Game.score = 0;
    Game.sco.innerHTML = Game.score;
    Game.time.innerHTML = (Game.min < 10 ? "0" + Game.min : Game.min) + ":" + (Game.sec < 10 ? "0" + Game.sec : Game.sec) + ":" + (Game.mis < 10 ? "0" + Game.mis : Game.mis);
    Game.bool = true;
},
Copy the code

Display the end of the game prompt, timer, score, and game state to be initialized for the next restart

adds

adds: function () {
    Game.tab.insertRow(0);
    for (var i = 0; i < 3; i++) {
        Game.hang[0].insertCell();
    }
    Game.hang[0].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
},
Copy the code

This and the following methods are the main functions for moving the table down

Add a new tr line at the top
Insert three TDS into the TR loop
Set the random one of the three TDS to black

speedup

speedup: function () {
    if (Game.btn == 0 || Game.btn % 150! =0) {
        Game.tab.style.bottom = -Game.btn - 5 + 'px';
        Game.btn += 5;
        setTimeout(Game.speedup, 1);
    } else {
        clearTimeout(Game.speedup);
        Game.btn += 5; }},Copy the code

The speedup method gives an animation effect when moving down

The source code

Just throw it into an HTML and you can play

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>The experiment</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100%;
            margin: 0 auto;
            background: linear-gradient(-45deg, purple, blue);
        }

        .container {
            margin: 0 auto;
            width: 470px;
            height: 630px;
            overflow: hidden;
            position: relative;
        }

        table {
            width: 464px;
            height: 612px;
            position: absolute;
            right: 0;
            bottom: 0;
            border-collapse: collapse;
        }

        td {
            width: 150px;
            height: 150px;
            border: 6px solid pink;
        }

        .main {
            color: white;
            text-align: center;
            /* vertical-align: middle; * /
            font-size: 50px;
            position: absolute;
            top: 0;
            left: 0;
        }

        #score {
            display: inline-block;
            padding-right: 200px;
        }

        #time {
            display: inline-block;
        }

        .caption {
            width: 300px;
            font-size: 60px;
            font-weight: bold;
            text-align: center;
            position: relative;
            margin: 0 auto;
            -webkit-text-fill-color: transparent;
            /* Text fill color */
            -webkit-text-stroke: 1.2 px. white;
        }

        .font {
            color: transparent;
            display: inline-block;
            font-size: 60px;
            font-weight: bold;
            position: absolute;
        }

        .one {
            left: 14.5%;
            top: 81%;
        }

        .two {
            left: 45%;
            top: 81%;
        }

        .three {
            left: 79%;
            top: 81%;
        }
    </style>
</head>

<body>
    <div class="main">
        <div id="score">0</div>
        <div id="time">00:00:00</div>
    </div>
    <div class="caption">Don't step on the white!</div>
    <div class="container">
        <table id="tab">
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <span class="font one">J</span>
        <span class="font two">K</span>
        <span class="font three">L</span>
    </div>
</body>
<script>
    var Game = {
        / / property
        int: null.mis: 0.sec: 0.min: 0.score: 0.bool: true.btn: 0.tab: document.getElementsByTagName('table') [0].font: document.getElementsByTagName('span'),
        sco: document.getElementById('score'),
        time: document.getElementById('time'),
        hang: document.getElementsByTagName('tr'),
        / / method
        times: function () {
            Game.mis += 1;
            if (Game.mis > 99) {
                Game.mis = 0;
                Game.sec += 1;
            }
            if (Game.sec > 59) {
                Game.sec = 0;
                Game.min += 1;
            }
            if (Game.min > 23) {
                Game.min = 0;
            }
            Game.begin();
        },
        color: function () {
            if (Game.hang[3].children[0].style.background == 'black') {
                Game.font[0].style.color = 'white';
            } else {
                Game.font[0].style.color = 'transparent';
            }
            if (Game.hang[3].children[1].style.background == 'black') {
                Game.font[1].style.color = 'white';
            } else {
                Game.font[1].style.color = 'transparent';
            }
            if (Game.hang[3].children[2].style.background == 'black') {
                Game.font[2].style.color = 'white';
            } else {
                Game.font[2].style.color = 'transparent'; }},adds: function () {
            Game.tab.insertRow(0);
            for (var i = 0; i < 3; i++) {
                Game.hang[0].insertCell();
            }
            Game.hang[0].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
        },
        speedup: function () {
            if (Game.btn == 0 || Game.btn % 150! =0) {
                Game.tab.style.bottom = -Game.btn - 5 + 'px';
                Game.btn += 5;
                setTimeout(Game.speedup, 1);
            } else {
                clearTimeout(Game.speedup);
                Game.btn += 5; }},speed: function () {
            Game.adds();
            Game.speedup();
        },
        scores: function () {
            Game.score += 1;
            Game.sco.innerHTML = Game.score;
        },
        over: function () {
            alert('Game over, score:' + Game.score + '; It ' + Game.time.innerHTML);
            clearInterval(Game.int);
            Game.mis = 0;
            Game.sec = 0;
            Game.min = 0;
            Game.score = 0;
            Game.sco.innerHTML = Game.score;
            Game.time.innerHTML = (Game.min < 10 ? "0" + Game.min : Game.min) + ":" + (Game.sec < 10 ? "0" + Game.sec : Game.sec) + ":" + (Game.mis < 10 ? "0" + Game.mis : Game.mis);
            Game.bool = true;
        },
        key: function () {
            onkeydown = function (event) {
                if (Game.bool == true && (event.key == 'j' || event.key == 'k' || event.key == 'l')) {
                    Game.int = setInterval(Game.times, 10);
                    Game.bool = false;
                }
                switch (event.key) {
                    case 'j':
                        if (Game.hang[3].children[0].style.background == 'black') {
                            Game.speed();
                            Game.scores();
                        } else {
                            Game.over();
                        }
                        break;
                    case 'k':
                        if (Game.hang[3].children[1].style.background == 'black') {
                            Game.speed();
                            Game.scores();
                        } else {
                            Game.over();
                        }
                        break;
                    case 'l':
                        if (Game.hang[3].children[2].style.background == 'black') {
                            Game.speed();
                            Game.scores();
                        } else {
                            Game.over();
                        }
                        break; } Game.color(); }}}/ / get columns -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
    Game.hang[0].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
    Game.hang[1].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
    Game.hang[2].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
    Game.hang[3].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';

    //--------------------------------------------------
    // Keyboard press event ----------------------------------------
    Game.color();
    Game.key();
    //---------------------------------------------------
</script>

</html>
Copy the code

So far this small game is completed, I hope to help you, goodbye ~

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Jquery realize don’t step on white block, sound visitors move ~

preface

html

The homepage font

The middle table

Realize each line of black block random display

The key events

The key events

adds

speedup

The source code

Jquery realize don’t step on white block, sound visitors move ~

preface

html

The homepage font

The middle table

Realize each line of black block random display

The key events

The key events

adds

speedup

The source code

Related Posts

5 minutes quick handwriting implementation: bind

LeetCode Exploration (45) : 553- Optimal Division

Vue 3 + Vite + TS from scratch, encountered problems record, continue to update……