JSFiddle - React, Tailwind, and code Playground

by the_argus

HTML

<!DOCTYPE html>
<html lang="PL">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <title>2048 - game</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
	<main>
		<h3>2048 GAME</h3>
		<div class="grid">
			<div class="item item_00"></div>
			<div class="item item_10"></div>
			<div class="item item_20"></div>
			<div class="item item_30"></div>

			<div class="item item_01"></div>
			<div class="item item_11"></div>
			<div class="item item_21"></div>
			<div class="item item_31"></div>

			<div class="item item_02"></div>
			<div class="item item_12"></div>
			<div class="item item_22"></div>
			<div class="item item_32"></div>

			<div class="item item_03"></div>
			<div class="item item_13"></div>
			<div class="item item_23"></div>
			<div class="item item_33"></div>
		</div>
		<h1 id="test"> qbacuber 2020&copy;</h1>
	</main>
    <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS

/* ALL */
body{
    margin: 0;
    padding: 0;
    background: #ccc;
	height: 100vh;
	width: 100vw;
	position: relative;
	z-index: 1;
}

main {
	position: absolute;
	width: 100vw;
	height: 100vh;
	z-index: 1;
	overscroll-behavior: none;
}

/* mobile */
.grid{
    width: 300px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr); 
    grid-gap: 10px;
    background: #baaca1;
    border-radius: 20px;
}

.item{
    font-size: 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #71675e;
}

h1{
    text-align: right;
    margin-right: 20px;
}

h3{
    text-align: center;
    font-size: 25px;
    color: #555;
}

/* min width  600 */
@media only screen and (min-width: 600px) {
    .grid{
        width: 500px;
        height: 500px;
        margin-top: 40px;
        padding: 30px;
        grid-gap: 20px;
    }

    .item{
        font-size: 40px;
    }

    h3{
        font-size: 45px;
    }
}

JavaScript

var map = [
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
  ];

function draw(){
    for(var i=0; i<4; i++){
        for(var j=0; j<4; j++){
            
            if(map[j][i]=='0')document.getElementsByClassName("item_"+i+j)[0].innerHTML = '';
            if(map[j][i]=='0')document.getElementsByClassName("item_"+i+j)[0].style.background = '#ccc';
            if(map[j][i]=='2')document.getElementsByClassName("item_"+i+j)[0].innerHTML = '2';
            if(map[j][i]=='2')document.getElementsByClassName("item_"+i+j)[0].style.background = '#eee4da';
            if(map[j][i]=='4')document.getElementsByClassName("item_"+i+j)[0].innerHTML = '4';
            if(map[j][i]=='4')document.getElementsByClassName("item_"+i+j)[0].style.background = '#ece0c8';
            if(map[j][i]=='8')document.getElementsByClassName("item_"+i+j)[0].innerHTML = '8';
            if(map[j][i]=='8')document.getElementsByClassName("item_"+i+j)[0].style.background = '#f1b078';
            if(map[j][i]=='16')document.getElementsByClassName("item_"+i+j)[0].innerHTML = '16';
            if(map[j][i]=='16')document.getElementsByClassName("item_"+i+j)[0].style.background = '#ee8c4f';
            if(map[j][i]=='32')document.getElementsByClassName("item_"+i+j)[0].innerHTML = '32';
            if(map[j][i]=='32')document.getElementsByClassName("item_"+i+j)[0].style.background = '#f57c5f';
            if(map[j][i]=='64')document.getElementsByClassName("item_"+i+j)[0].innerHTML = '64';
            if(map[j][i]=='64')document.getElementsByClassName("item_"+i+j)[0].style.background = '#e85939';
            if(map[j][i]=='128')document.getElementsByClassName("item_"+i+j)[0].innerHTML = '128';
            if(map[j][i]=='128')document.getElementsByClassName("item_"+i+j)[0].style.background = '#f2d86a';
            if(map[j][i]=='256')document.getElementsByClassName("item_"+i+j)[0].innerHTML = '256';
           ...