HTML+CSS+JS implementation 2048

<! DOCTYPE html>
<!--suppress All--
<meta charset= "UTF-8" >
<title>2048</title>
<style>
*{
padding:0;
margin:0;
font-family:arial;
}
#game-title. title{
Text-align:center;
Font-weight:bolder;
font-size:40px;
margin:6px;
}

#game-window{
width:500px;
Margin:auto;
font-weight:700;
}

#game-window. Option button{
position:relative;
Background-color: #9f8b77;
border:1px solid #9f8b77; br> Color:white;
padding:5px;
Border-radius:4px;
Cursor:pointer;
}
#game-window. Option button:active{
Color: #eab3bc;
top:2px;
left:2px;
}
#game-window. game-panel{
width:500px;
height:500px;
Background-color: #bbada0;
Border-radius : 6px;
Margin-top:6px;
Position:relative;
}
#game-window. Game-panel. Bg-cell,
#game-window. Game-panel. cell{
Position:absolute;
Width : 100px;
height:100px;
Background-color: #ccc0b3;
Border-radius:6px;
Transition:200ms;

}
#game-window. Game-panel. cell{
Background-color: #ffcb38;
opacity:.8;
font-size:60px;
Font-weight:bold;
line-height:100px;
Text-align:center;
Color: #776e65;
}
. row0{
top:20px;
}
. row1{
top:140px;
}
. row2{
top:260px;
}
. row3{
top:380px;
}
. col0{
left:20px;
}
. col1{
left:140px;
}
. col2{
left:260px;
}
. col3{
left:380px;
}
</style>

<script src= "Jquery.js" ></script>
<script>
var cells;
Shop Background Box
function init () {
Cells = [
[0,0,0,0],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]
];
$ ("#game-window. Option Score"). Text (0);//Fractional 0

var panel = $ ("#game-window. Game-panel");
var BGS = "";
for (var i = 0; i<4; i++) {
for (var j = 0; J < 4; J + +) {
BGS + = "<div class = ' Bg-cell row" + i + "col" + j + "></div>";
}
}
Panel.html (BGS);
Random_cell ();
}
Get a random number between 1-4
function Select_from (seed) {
Return Math.floor (Math.random () *seed);
}
Generate a random number block
Nums = [2,4];
function Random_cell () {
Popup function after lattice full
var count = 0;
for (var i = 0;i<cells.length;i++) {
for (var j = 0;j<cells[i].length;j++) {
if (Cells[i][j]) {
count++;
}
}
}
if (count = = 16) {
Return
}
Determine if the lattice is empty, or if it is, randomly fill 2 or 4
while (1) {
var i = Select_from (4);
Console.log (i);
var j = Select_from (4);
Console.log (j);
var cell = Cells[i][j];
if (cell) {
Continue
}
var num = Nums[select_from (2)];
CELLS[I][J] = num;
Cell = "<div class= ' cell row" +i+ "col" +j+ ">" +num+ "</div>"
Cell = $ (cell); Get the jquery object
SetStyle (cell);//color block color
$ ("#game-window. Game-panel"). Append (cell);
Break
}
}

var colors = [
"#eee4da",//2
"#ede0c8",//4
"#f2b179",//8
"#f59563",//16
"#f67c5f",//32
"#f65e3b",//64
"#edcf72",//128
"#edcc61",//256
"#9c0",//512
"#33b5e5",//1024
"#09c",//2048
"#a6c",//4096
"#93c"//8192
];
function SetStyle (cell) {
var num = Cell.text ();
var backgroundcolor = colors[(Math.log (num)/math.log (2))-1];
Cell.css ({
"Background-color": BackgroundColor,
"Font-size": num>=1024? 40px ":" ",
"Color": Num<=4? "": "White"
});

}
function SetScore (score) {
$ ("#game-window. Option Score"). Text (
$ ("#game-window. Option Score"). Text () *1+score);
}
function Findcell (i,j) {
Return $ ("#game-window. Game-panel. Cell.row" +i+ ". Col" +j);
}
function Isdead () {
for (var i = 0;i<cells.length;i++) {
for (Var j=0;j<cells[i].length;j++) {
var cell = Cells[i][j];
if (!cell) {
return false;
}
if (i-1>=0 && cell = = Cells[i-1][j]) {
return false;
}
if (i+1<cells.length && cell = = Cells[i+1][j]) {
return false;
}
if (j-1>=0 && cell = = Cells[i][j-1]) {
return false;
}
if (j+1<cells[i].length && cell = = Cells[i][j+1]) {
return false;
}
}
}
return true;
}

function Leftaction () {
var count = 0;
for (var i = 0;i<cells.length;i++) {
for (var j = 0;j<cells.length;j++) {
if (!cells[i][j]) {
Continue
}
if (MoveLeft (cells[i],i,j)) {
count++;
}
}
}
return count;
}
function Topaction () {
var count = 0;
for (var j = 0;j<cells[0].length;j++) {
for (var i = 1; i < cells.length; i++) {
if (!cells[i][j]) {
Continue
}
if (Movetop (i, J)) {
count++;
}
}
}
return count;
}
function Rightaction () {
var count = 0;
for (var i = 0;i<cells.length;i++) {
for (var j = cells[i].length-2;j>=0;j--) {
if (!cells[i][j]) {
Continue
}
if (MoveRight (cells[i],i,j)) {
count++;
}
}
}
return count;
}
function Bottomaction () {
var count = 0;
for (var j = 0; J < Cells[0].length; J + +) {
for (var i = 2; i>=0; i--) {
if (!cells[i][j]) {
Continue
}
if (Movebottom (i, J)) {
count++;
}
}
}
return count;
}
function Movetop (i,j) {//Enter functions description column fixed, number of moving rows
var pre= cells[i][j]; Fetch Current Value
var ismoved = false;
for (var k = i-1;k>=0;k--) {//Up check
var curr = cells[k][j]; Now check the position of the element
if (Curr) {//If there is a number
if (Curr = = Pre) {//If the numbers are equal
CELLS[I][J] = 0; Original Position Zero
CELLS[K][J] = Curr + pre; Check position number add
Ismoved = true;
TODO Set Score
SetScore (Curr);
Findcell (k,j). Remove ();
var cell = Findcell (I,J)
. Removeclass ("Row" +i)
. addclass ("Row" +k)
. text (Curr + pre);
SetStyle (cell);
}else{//If the numbers are not equal
if (!cells[k+1][j]) {//If check position is 0
Ismoved = true;
CELLS[I][J] = 0; The original position is set to 0
CELLS[K+1][J] = pre; Check position set as Pre

Cell = Findcell (i,j)
. Removeclass ("Row" +i)
. addclass ("Row" + (k+1));
}
}
return ismoved;
}
}
if (cells[0][j] = = 0) {
Ismoved = true;
}
//Front is 0
Cells[i][j] = 0;
Cells[0][j] = pre;
var cell = Findcell (i,j). Removeclass ("Row" +i)
. addclass (" Row0 ");
return ismoved;
}
Function MoveLeft (row,i,j) {
var pre= row[j];
var ismoved = false;
for (var k = j-1;k>=0;k--) {
var Curr = row[k];//Now checks the position of the element
if (curr) {
if (Curr = = Pre) {
Row[j] = 0;//Original position 0
Row[k] = Curr + pre;
is Moved = true;
//todo Set score
SetScore (curr);

Findcell (i,k). Remove ();
var cell = Findcell (i,j)
. Removeclass ("col" +j)
. addclass ("col" +k)
. Text (Curr + pre);
SetStyle (cell) ;
}else{
if (!row[k+1]) {
ismoved = true;
Row[j] = 0;
Row[k+1] = pre;
cell = Findcell (i,j)
. Remov EClass ("col" +j)
. addclass ("col" + (k+1));
}
}
return ismoved;
}
}
if (row[0] = = 0) {
Ismoved = true;
}
//Front is 0
Row[j] = 0;
Row[0] = pre;
var cell = Findcell (i,j). Removeclass ("col" +j)
. addclass ("col0");

Return ismoved;
}
Function MoveRight (row, I, j) {
var pre= row[j];
var ismoved = false;
for (var k = J+1;k<row.leng th;k++) {
var Curr = row[k];//Now checks the position of the element
if (curr) {
if (Curr = = Pre) {
Row[j] = 0;//Original position 0
Row[k] = Curr + Pre
Ismoved = true;
//todo Set score
SetScore (curr);
Findcell (i,k). Remove ();
var cell = Findcell (i,j)
. Removeclass ("col" +j)
. addclass ("col" +k)
. Text (Curr + pre);
SetStyle (cell);
} else{
if (!row[k-1]) {
ismoved = true;
Row[j] = 0;
Row[k-1] = pre;
cell = Findcell (i,j)
. removeclass ("col" +j)
. addclass ("col" + (k-1));
}
}
return ismoved;
}
}
if (row[3] = = 0) {
Ismoved = true;
}
//Front is 0
Row[j] = 0;
Row[row.length-1] = pre;
var cell = Findcell (i,j). Removeclass ("col" +j)
. addclass ( "Col3");

return ismoved;
}
function Movebottom (i,j) {
var pre= cells[i][j]; Fetch Current Value
var ismoved = false;
for (var k = i+1;k<=3;k++) {//down check
var curr = cells[k][j]; Now check the position of the element
if (Curr) {//If there is a number
if (Curr = = Pre) {//If the numbers are equal
CELLS[I][J] = 0; Original Position Zero
CELLS[K][J] = Curr + pre; Check position number add
Ismoved = true;
TODO Set Score
SetScore (Curr);
Findcell (k,j). Remove ();
var cell = Findcell (I,J)
. Removeclass ("Row" +i)
. addclass ("Row" +k)
. text (Curr + pre);
SetStyle (cell);
}else{//If the numbers are not equal
if (!cells[k-1][j]) {
Ismoved = true;
CELLS[I][J] = 0; The original position is set to 0
CELLS[K-1][J] = pre; Check position set as Pre

Cell = Findcell (I,J)
. Removeclass ("Row" +i)
. addclass ("Row" + (k-1));
}
}
return ismoved;
}
}
if (cells[3][j] = = 0) {
Ismoved = true;
}
It's all 0 ahead.
CELLS[I][J] = 0;
CELLS[3][J] = pre;
var cell = Findcell (i,j). Removeclass ("Row" +i)
. addclass ("row3");
return ismoved;
}
$ (function () {
Initializing the interface
Init ();
New Game Button Effect implementation
$ ("#game-window. Option. Button"). Click (function () {
Init ();
} )
Listening
$ (window). On ("KeyDown", function (e) {
var keycode = E.keycode;
var KeyChar = String.fromCharCode (keycode)
. toLocaleUpperCase ();//Convert Uppercase
if (KeyChar = = "A" | | KeyCode = = 37) {
if (Leftaction ()) {
Random_cell ();
if (isdead () = = True) {
Alert ("Game Over");
Return
}
}
}else if (KeyChar = = "W" | | KeyCode = = 38) {
if (Topaction ()) {
Random_cell ();
if (isdead () = = True) {
Alert ("Game Over");
Return
}
}
}else if (KeyChar = = "D" | | KeyCode = = 39) {
if (Rightaction ()) {
Random_cell ();
if (isdead () = = True) {
Alert ("Game Over");
Return
}
}
}else if (KeyChar = = "S" | | KeyCode = = 40) {
if (Bottomaction ()) {
Random_cell ();
if (isdead () = = True) {
Alert ("Game Over");
Return
}
}
}
});

})
</script>
<body>

<section id= "Game-window" >
<div class= "option" >
<button class= "button" >new game</button>
Scroe:
<span class= "Score" >0</span>
</div>
<div class= "Game-panel" >
<div class= "Bg-cell row2 col3" ></div>
<div class= "Cell row2 col3" >2</div>
</div>

</section>
</body>

HTML+CSS+JS implementation 2048