How JQuery and HTML5 Implement the 16-Squares Flop Elimination Game

How JQuery and HTML5 Implement the 16-Squares Flop Elimination Game: BY Roy24 Nov,2020; Tags:
HTML5 Games

Introduction

Today I will share with you a small game based on jQuery and HTML5. This game should be very familiar to everyone. It is a 16-square flop elimination game. After clicking the card, if the two cards have the same shape, they will be eliminated at the same time. This game application mainly uses jQuery to control the state of the card, and also uses HTML5 sessionStorage to store the flop records, and eliminates the two cards once they are the same.

How JQuery and HTML5 Implement the 16-Squares Flop Elimination Game

Instructions

HTML Body Code

<div class="container">
	<header>
		<h1>Matching game</h1>
	</header>

	<section class="score-panel">
		<ul class="stars">
			<li><i class="fa fa-star"></i></li>
			<li><i class="fa fa-star"></i></li>
			<li><i class="fa fa-star"></i></li>
		</ul>

		<span class="moves">0</span> Moves

		<div class="restart" onClick="run()">
			<i class="fa fa-repeat"></i>
		</div>
	</section>

	<ul class="deck" id="deck">

	</ul>
</div>

Css Code

body {
    background: #ffffff url('../img/geometry2.png'); 
    font-family: 'Coda', cursive;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

.deck {
    width: 660px;
    min-height: 680px;
    background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
    padding: 32px;
    border-radius: 10px;
    box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 3em;
}

.deck .card {
    height: 125px;
    width: 125px;
    background: #2e3d49;
    font-size: 0;
    color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
    transform: rotateY(180deg);
    transition: transform 0.3s;
}

Js Code

function shuffle(array) {
    var currentIndex = array.length, temporaryValue, randomIndex;

    while (currentIndex !== 0) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array; 
}

function run(){
    var Harr =  shuffle(Myarr);
    var Vhtml='';
    for(var i=0;i<Harr.length;i++){
        Vhtml = Vhtml+'<li class="card"> <i class="fa '+Harr[i]+'"></i> </li>'
    }

    $("#deck").html(Vhtml);
    fclick();
    sessionStorage.setItem("ss",0);
    sessionStorage.setItem("pp",0);
    sessionStorage.setItem("tt","xx");
    $(".moves").html(0);
}

VIEW NOW