js关于2048的编写一

最新推荐文章于 2020-07-15 18:45:15 发布

做自己的猫

最新推荐文章于 2020-07-15 18:45:15 发布

阅读量280

点赞数 1

分类专栏： 2048

本文链接：https://blog.csdn.net/weixin_42150986/article/details/88857977

版权

2048 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

题记：这是个人第一篇记录自己生活创作的文章，将其开放出来让大家能够看到，希望有帮助到人亦或者让自己坚持。

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;
}

至此，暂且将整个布局完成，得到此布局