题记:这是个人第一篇记录自己生活创作的文章,将其开放出来让大家能够看到,希望有帮助到人亦或者让自己坚持。
JS创作2048的思路
1.html布局并给整个布局加CSS
2.构建整个游戏框架
1)随机生成数字2或4(2几率大于4)
2)重启(重置)按钮
3)score记录得分
3.手机端的实现以及上下左右的移动功能
此前,必须安利一下《JavaScript.DOM编程艺术(第2版)》,这本书较详细地写了js和dom的语法,比较喜欢的是作者用很生动的语句并且带你一步步去创作,它提供给我们的是一种全新而又严谨的思维模式,我觉得对于我们编程来说尤为重要。说到学以致用,我也将在个人制作2048的过程中,慢慢渗透以及后面会进行更新。
html布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2048小程序</title>
<link href="css.css" rel="stylesheet">
</head>
<body>
<header>
<h1>2048小程序</h1>
<a href="" id="new_game_button">New Game</a>
<p>score: <span id="score">0</span></p>
</header>
<div id="main">
<div class="first" id="cd_0_0"></div>
<div class="first" id="cd_0_1"></div>
<div class="first" id="cd_0_2"></div>
<div class="first" id="cd_0_3"></div>
<div class="first" id="cd_1_0"></div>
<div class="first" id="cd_1_1"></div>
<div class="first" id="cd_1_2"></div>
<div class="first" id="cd_1_3"></div>
<div class="first" id="cd_2_0"></div>
<div class="first" id="cd_2_1"></div>
<div class="first" id="cd_2_2"></div>
<div class="first" id="cd_2_3"></div>
<div class="first" id="cd_3_0"></div>
<div class="first" id="cd_3_1"></div>
<div class="first" id="cd_3_2"></div>
<div class="first" id="cd_3_3"></div>
</div>
<script type="text/javascript" src="dynamics.js"></script>
</body>
</html>
在后面将会更新至能够平稳退化(上面书中提到的观点),即尽量将结构和行为完全分离。
css
*{
margin: 0;
padding: 0;
}
body{
font-family: Arial;
margin: 0 auto;
text-align: center;
}
header{
margin: 20px;
}
header a{
font-family: Arial;
text-decoration: none;
display: block;
color: white;
margin: 20px auto;
width: 125px;
height: 35px;
text-align: center;
line-height: 40px;
background-color: #8f7a66;
border-radius: 10px;
font-size: 15px;
}
header p{
font-family: Arial;
font-size: 20px;
}
header #new_game_button:hover {
background-color: #9f8b77;
}
#main{
width: 460px;
height: 460px;
background-color: #bbada0;
margin: 0 auto;
border-radius: 10px;
position: relative;
padding: 20px;
}
.first{
width: 100px;
height: 100px;
border-radius: 6px;
background-color: #ccc0b3;
position: absolute;
}
至此,暂且将整个布局完成,得到此布局
但是我们的目的还未达到,设定一个短暂目标如下图