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

引言

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

简介

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

    2、游戏架构

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

    

    2048.css：游戏样式

    jQuery.js：jQuery文件

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

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

    main.js：游戏主逻辑文件

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

构建页面

1、游戏标题

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

     

     创建游戏界面index.html:

     

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