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

引言

   《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》游戏的标题包含游戏名称、开始新游戏的按钮和游戏分数等三个项目，如下图

     

     创建游戏界面index.html:

     

    
  
  
    
     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个方块，如下图

    编辑游戏页面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用的技术以及游戏的基本框架。不断探索，不断研究，才会学到更多的内容。在后续的博客中会介绍逻辑的内容，请关注小编的后续更新