网页版2048实战--简介及构建页面

爱被打了一巴掌 2022-06-11 04:58 152阅读 0赞

# 引言 #

《2048》是比较流行的一款数字游戏。原版2048首先在GitHub上发布，原作者是Gabriele Cirulli。它是基于《1024》和《小3传奇》的玩法开发而成的新型数字游戏。小编最近在学习js，于是找了一个东西来实战一下

# 简介 #

**1、**此次实战**主要用的技术**有：HTML、CSS、JavaScript、JQuery

**2、游戏架构**

index.html：游戏界面，引入样式文件及逻辑文件。具体引用顺序如下：

rel="stylesheet" type="text/css" href="2048.css">
    <script type="text/javascript" src="jquery-1.11.0.js"></script>
    <script type="text/javascript" src="support.js"></script>
    <script type="text/javascript" src="animation.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript" src="game.js"></script>

2048.css：游戏样式

jQuery.js：jQuery文件

support.js：游戏基础逻辑文件

animation.js：：游戏动画逻辑文件

main.js：游戏主逻辑文件

game.js：游戏交互逻辑文件

# 构建页面 #

## 1、游戏标题 ##

《2048》游戏的标题包含游戏名称、开始新游戏的按钮和游戏分数等三个项目，如下图

![SouthEast][]

创建游戏界面index.html:

2048
         rel="stylesheet" type="text/css" href="2048.css">
    
    
        
      
        
        2048 
        New Game 
        score: 0

创建样式文件2048.css：

//设置游戏标题样式
    header {
        display: block;
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }
    
    //设置游戏名称样式
    header h1 {
        font-family: Arial;
        font-size: 40px;
        font-weight: bold;
    }
    
    //设置游戏按钮样式
    header #newgamebutton {
        display: block;
        margin: 20px auto;
    
        width: 100px;
        padding: 10px 10px;
        background-color: #8f7a66;
        font-family: Arial;
        color: white;
        border-radius: 10px;
        text-decoration: none;
    }
    
    //设置游戏鼠标悬浮样式
    header #newgamebutton:hover {
        background-color: #9f8b77;
    }
    
    //设置游戏分数样式
    header p {
        font-family: Arial;
        font-size: 25px;
        margin: 20px auto;
    }

## 2、游戏主体 ##

《2048》游戏的主体包含16个方块，如下图

![SouthEast 1][]

编辑游戏页面index.html：

编辑样式文件2048.css：

//设置16个方块的主体方块样式
    #grid-container {
        width: 460px;
        height: 460px;
        padding: 20px;
    
        margin: 50px auto;
        background-color: #bbada0;
    
        border-radius: 10px;
        position: relative;
    }
    
    //设置16个方块的样式
    .grid-cell {
        width: 100px;
        height: 100px;
        border-radius: 6px;
        background-color: #ccc0b3;
    
        position: absolute;
    }

# 结语 #

本篇文章主要简单的介绍一下2048的起源、2048用的技术以及游戏的基本框架。不断探索，不断研究，才会学到更多的内容。在后续的博客中会介绍逻辑的内容，请关注小编的后续更新

[SouthEast]: /images/20220611/10e9dee13c274b75ad86b99c96fd1481.png
[SouthEast 1]: /images/20220611/489c1932c6ac4e0bbcf0be842d980a5c.png