2048の小さいゲームはどのようにHTML+CSS+JSでそれを実現します
14475 ワード
私たちは2048ゲームをする前に、ゲームの考え方を明らかにして、まずゲームをすることをお勧めします.
HTML+CSS部分は何も言うことがない直接上図;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>2048</title>
<link rel="stylesheet" href="css/2048.css" />
</head>
<body>
<div class="container">
<div class="container-head">
SCORE:<span style="color: red;" id="SCORE1" >0</span>
</div>
<div class="mian">
<div class="grid-container">
<div class="grid-row">
<div class="grid-cell " id="n00"></div>
<div class="grid-cell " id="n01"></div>
<div class="grid-cell " id="n02"></div>
<div class="grid-cell " id="n03"></div>
</div>
<div class="grid-row">
<div class="grid-cell" id="n10"></div>
<div class="grid-cell" id="n11"></div>
<div class="grid-cell" id="n12"></div>
<div class="grid-cell" id="n13"></div>
</div>
<div class="grid-row" >
<div class="grid-cell" id="n20"></div>
<div class="grid-cell" id="n21"></div>
<div class="grid-cell" id="n22"></div>
<div class="grid-cell" id="n23"></div>
</div>
<div class="grid-row">
<div class="grid-cell" id="n30"></div>
<div class="grid-cell" id="n31"></div>
<div class="grid-cell" id="n32"></div>
<div class="grid-cell" id="n33"></div>
</div>
</div>
</div>
<div class="gameend" id="Gameover">
<div class="Gameover" >
<p >GAME OVER!!!</p>
<p>SCORE:<span style="color:red" id="SCORE2"></span></p>
<a style="display: inline-block;" href="">try again</a>
</div>
</div>
</div>
</body>
`