2048私人定制（二）——游戏架构

       在程序运行之前，要先讲讲我用的编辑器，因为个人觉得非常好，所以强烈推荐给大家，而且它也确实已经很出名了。

一、IDEA编辑器的简单介绍

      IDEA 全称IntelliJ IDEA，是java语言开发的集成环境，IntelliJ在业界被公认为最好的java开发工具之一，尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、 创新的GUI设计等方面的功能可以说是超常的。IDEA是JetBrains公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

      关键是IDEA编辑器有良好的智能提示和界面友好，在Android、java、js、css、HTML方面都是很方便的，只要一使用就会爱不释手。官方网站是：http://www.jetbrains.com/idea/下面是软件的截图：

二、游戏的架构

                这个用口头语言表达不清楚，给大家贴一张图，即可一目了然：

三、新建项目——my2048

           新建一个static Web项目，这里不再赘述，在这里想说明的是项目里面的文件内容和架构。众所周知，我们需要新建一个css布局文件，用来控制整个页面的布局，将其命名为2048.css；

            其次是新建一个js文件，我们的2048游戏的主逻辑都会在这里完成，控制整个游戏的运行，将其命名为main2048.js；

            再者，我们需要一些游戏函数控制游戏的一些移动命令，常规参数的显示；将其名命名为support2048.js；

            最后，还需要给我们的2048添加上动画，新建一个show Animation.js;

四、2048头页面布局

              学过HTML和css的童鞋应该都知道，我这里的代码很简单，直接贴上让同学自己看啦！

index.html

    
    
    


    
    
    
    





    
2048
    New Game
    
Score: 0

PS:newgame()函数是重新启动游戏，刷新2048的面板，这里暂时不写，后面再补充

2048.css布局

header{
    display: block;
    margin: 0 auto;
    width: 500px;
    text-align: center;
}
header h1{
    font-family: Arial;
    font-size: 60px;
    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;

}
/*NewGame 鼠标放上的颜色变化*/

header #newgamebutton:hover{
    background-color: #9f8b77;
}


header p{
    font-family: Arial;
    font-size: 25px;
    margin: 20px auto;
}

最终效果如下：

请转载注明出处，刚开始写博客，有什么错误大家见谅，如有错误，请大家批评与指正！