GitHub上的2048 源码分析_2048 github_Android小码家的博客-程序员宅基地

技术标签： github  web  2048  html  源码  web开发  

做为一个JS白痴，学习一门新新技术最快最好的方式就是抄，说出来有点危言耸听。不过确实如此。

这是一个基于html 由android包裹而成的WebApp

GitHub https://github.com/goodluckforme/2048-android

为了掌握web开发 我将逐一分析每一行代码

HTML基础

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
</body>
<html>

Head部分

标题

<title>2048</title>

标准的Css引用

<link href="style/main.css" rel="stylesheet" type="text/css">

标签上显示的小图片 验证:更换图片刷新就知道哪里了 请查看

<link rel="shortcut icon" href="favicon.ico">

Apple手机中网页logo和上面的一致 验证:请查看

 <link rel="apple-touch-icon" href="meta/apple-touch-icon.png">

IOS设备的启动页 验证 请查看

 <link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone 5+ -->
<link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x920.png"  media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone, retina -->

WebApp 里Meta标签大全，webappmeta标签大全
全屏

<meta name="apple-mobile-web-app-capable" content="yes">

状态栏颜色黑色

<meta name="apple-mobile-web-app-status-bar-style" content="black">

针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓请查看

    <meta name="HandheldFriendly" content="True">

微软的老式浏览器

<meta name="MobileOptimized" content="320">
  • width - viewport的宽度
  • height - viewport的高度
  • initial-scale - 初始的缩放比例
  • minimum-scale - 允许用户缩放到的最小比例
  • maximum-scale - 允许用户缩放到的最大比例
  • user-scalable - 用户是否可以手动缩放

验证 请查看

<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">

Body部分

引入js代码

<script src="js/i18n.js"></script>

引用样式 container heading 

<div class="container"> </div>
<div class="heading"></div>

布局中的标题哦

 <h1 class="title">2048</h1>

最佳得分 和 当前得分

<div class="scores-container">
        <div class="score-container">0</div>
        <div class="best-container">0</div>
</div>

这个是清除浮动的意思 即浏览器窗口变小 模块会直接换行 不跟随移动

<div class="above-game"></div>

.above-game:after {
  content: "";
  display: block;
  clear: both; }

一个A链接

  <a id="nightbtn"><img src="style/night.png"></a>

**写入一段话：Join the numbers and get to the 2048 tile!
加入代码必须用 script 模块**

<p class="game-intro"><script>document.write(i18n.get('intro'))</script></p>

又是两个A链接

<a class="restart-button"><script>document.write(i18n.get('new_game'))</script></a>
<a class="undo-button"><script>document.write(i18n.get('undo'))</script></a>

九宫格背景

 <div class="grid-container">
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
      </div>

z-index 这越大 就越在最上层

  • position:fixed 相对于 窗口
  • position:relative 相当于Android的RelativeLayout
  • position:absolute 相对于父布局 的相对定位
<div class="tile-container"></div>
.tile-container {
    
  position: absolute;
  z-index: 2; }

Css部分

从index.html入手

有意思 和 android 类似

@import url(fonts/clear-sans.css);

这里主要是字体的定义 可参考：这里

html, body {
  margin: 0;
  padding: 0;
  background: #faf8ef;
  color: #776e65;
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px; }

@font-face {
    font-family: "Clear Sans";
    src: url("ClearSans-Light-webfont.eot");
    src: url("ClearSans-Light-webfont.eot?#iefix") format("embedded-opentype"),
         url("ClearSans-Light-webfont.svg#clear_sans_lightregular") format("svg"),
         url("ClearSans-Light-webfont.woff") format("woff");
    font-weight: 200;
    font-style: normal;
}

屏幕适配 验证 请查看

@media screen and (max-width: 520px)

属性动画:Css3中属性 

@-webkit-keyframes move-up { 
0% {
    top: 25px;
    opacity: 1; }

100% {
    top: -50px;
    opacity: 0; } }

最后一个元素 Css3 属性 验证 请查看

grid-cell:last-child

这个是清除浮动的语法 dispaly 块元素表示(此元素将显示为块级元素，此元素前后会带有换行符。)验证：请查看

.heading:after {
  content: "";
  display: block;
  clear: both; }

最外层布局 居中对齐 

  .container {
    width: 280px;
    margin: 0 auto; }

标题2048需要这么多样式？

position: absolute; 相对于父布局定位

transition:<过渡属性名称> <过渡时间> <过渡模式>
transition-timing-function 的五种取值：
1.ease 逐渐变慢
2.linear 匀速
3.ease-in 缓慢开始（加速）
4.ease-out 缓慢结束（减速）
5.ease-in-out 缓慢开始，缓慢结束（先加速后减速）
6.cubic-bezier 贝塞尔曲线（matthewlein.com/ceaser）
  过渡模式比如宽过渡，高过渡和all过渡

验证 请查看

-webkit-transition: 100ms ease-in-out; Css3属性动画 /* Safari 和 Chrome */
验证请查看

transition-property（指定适用时间过渡效果的css属性） 验证请查看

.tile {
  position: absolute;
  -webkit-transition: 100ms ease-in-out;
  -moz-transition: 100ms ease-in-out;
  transition: 100ms ease-in-out;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform; }

右浮动 文本右对齐
.scores-container {
float: right;
text-align: right; }

.score-container, .best-container {
  position: relative;       相对布局 
  display: inline-block;    内联板块 
  background: #bbada0;      背景颜色
  padding: 12px 20px;       内边距 
  font-size: 25px;          字体大小    
  height: 25px;             字体高度
  line-height: 47px;        //行高度 验证：请查看 http://www.jb51.net/css/199174.html
  font-weight: bold;        字体
  border-radius: 3px;       圆角
  color: white;             字颜色
  margin-top: 8px;          上边距
  text-align: center; }     对齐方式

这部分在 html 和 css 中都没有,应该在某 js(nightmode) 当中. 

 <div id="night" style="padding:10px;">
            <a id="nightbtn"><img src="style/night.png"></a>
 </div>

window.onload:防止加载完成前调用 造成找不到对象BUG 验证：请查看

‘===’验证：请查看

window.onload = function() {
  var a = document.getElementById("night");
  a.onclick = function() {
    if (document.getElementsByTagName("html")[0].style.backgroundColor === "rgb(45, 48, 44)") {
        document.getElementsByTagName("html")[0].style.backgroundColor = "#faf8ef";
        document.getElementsByTagName("body")[0].style.backgroundColor = "#faf8ef";
        return false;
    } else {
        document.getElementsByTagName("html")[0].style.backgroundColor = "#2D302C";
        document.getElementsByTagName("body")[0].style.backgroundColor = "#2D302C";
        return false;
    }
  }
}

游戏介绍 i18n.get(‘intro’)

a=b||0 b不等于undefined和null，也就是说b有东西那a就等于b的值

typeof 类型比对 和instanceof的区别 验证请查看

 <p class="game-intro"><script>document.write(i18n.get('intro'))</script></p>

 this.get = function(key) {
        if (typeof this.messages[key] === 'string') {
            return this.messages[key];
        }
        return '';
    };

A链接 restart-button 这个在哪个JS（keyboard_input_manager.js）中有调用呢？

<a class="restart-button"><script>document.write(i18n.get('new_game'))</script></a>

.restart-button {
  display: inline-block;    不换行
  background: #8f7a66;
  border-radius: 3px;
  padding: 0 20px;
  text-decoration: none;  无下划线
  color: #f9f6f2;       
  height: 40px;
  line-height: 42px;
  display: block;
  text-align: center;
  float: right;
  margin-left: 5px;
  font-size: 16px; }

application.js 中获取到 GameManager实例
game_manager.js 中设置点击事件 bindButtonPress 并初始化
- this.inputManager = new InputManager; 键盘
- this.storageManager = new StorageManager; 缓存
- this.actuator = new Actuator; 触摸事件
keyboard_input_manager.js 重写触摸事件
学习点这里

window.requestAnimationFrame(function () {
    
  new GameManager(4, KeyboardInputManager, HTMLActuator, LocalStorageManager);
});

this.bindButtonPress(".restart-button", this.restartWithConfirmation);

KeyboardInputManager.prototype.restartWithConfirmation = function (event) {
    
  event.preventDefault();
  this.emit("restartWithConfirmation");
}; 

KeyboardInputManager.prototype.bindButtonPress = function (selector, fn) {
    
  var button = document.querySelector(selector);
  button.addEventListener("click", fn.bind(this));
  button.addEventListener(this.eventTouchend, fn.bind(this));
};

JavaScript部分

  <script src="js/bind_polyfill.js"></script>
  <script src="js/classlist_polyfill.js"></script>
  <script src="js/animframe_polyfill.js"></script>
  <script src="js/keyboard_input_manager.js"></script>
  <script src="js/html_actuator.js"></script>
  <script src="js/grid.js"></script>
  <script src="js/tile.js"></script>
  <script src="js/local_storage_manager.js"></script>
  <script src="js/game_manager.js"></script>
  <script src="js/application.js"></script>
  <script src="js/nightmode.js"></script>

classlist_polyfill.js 中 数组操作符 验证 请查看

  var prototype = Array.prototype,
      push = prototype.push,
      splice = prototype.splice,
      join = prototype.join;

DOMTokenList window成员方法重写 请查看


  DOMTokenList.prototype = {
    add: function (token) {
    
      if (this.contains(token)) return;
      push.call(this, token);
      this.el.className = this.toString();
    },
    contains: function (token) {
    
      return this.el.className.indexOf(token) != -1;
    },
    item: function (index) {
    
      return this[index] || null;
    },
    remove: function (token) {
    
      if (!this.contains(token)) return;
      for (var i = 0; i < this.length; i++) {
        if (this[i] == token) break;
      }
      splice.call(this, i, 1);
      this.el.className = this.toString();
    },
    toString: function () {
    
      return join.call(this, ' ');
    },
    toggle: function (token) {
    
      if (!this.contains(token)) {
        this.add(token);
      } else {
        this.remove(token);
      }

      return this.contains(token);
    }
  };

animframe_polyfill.js 中执行刷新动画
验证 请查看

类方法 .prototype 修饰符

Tile.prototype.savePosition = function () {
    
  this.previousPosition = { x: this.x, y: this.y };
};

我们需要着重看 game_manager.js 这是个核心类

待续哦···
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20330595/article/details/79379269

智能推荐

linux 查看某个文件或目录占用磁盘空间的大小_Elag的博客-程序员宅基地

du查看某个文件或目录占用磁盘空间的大小常用参数-h：以人类可读的方式显示 　　-s：显示目录占用的磁盘空间大小，不要显示其下子目录和文件占用的磁盘空间大小 -c：显示几个目录或文件占用的磁盘空间大小，还要统计它们的总和 　　–apparent-size：显示目录或文件自身的大小 　　-l：统计硬链接占用磁盘空间的大小 　　du -ah –max-depth=1 显示目录下...

Pycharm 出现Unresolved reference ‘‘ 错误的解决方法 --- 亲测有效_unresolved reference 'image_想搞全栈的前端的博客-程序员宅基地

在用Pycharm写项目的时候的时候碰到一个很无语的问题路径明明没有问题，运行也没有出错，但就是爆红，逼死强迫症啊。。。多方查找最后解决了。步骤如下：File–&gt;Settings–&gt;Project Structure–&gt;找到问题目录–&gt;Sources–&gt;Apply–&gt;OKOK了，不在爆红...

机器视觉中的常用打光方式（明场照明，暗场照明）_视觉打光_郑建广视觉的博客-程序员宅基地

概念和分类1、正面光/入射光：相机和光源在同一测。典型的有同轴光、环形光、条形光源的等。2、背光/透射光：相机和光源位于被检测物体的两侧。典型的光源是背光源；3、明场照明：光源和被测物体呈一定角度，使大部分光反射到相机上；典型的高角度环形光源，条形光源等。4、暗场照明：光源和被测物体呈一定的角度，使大部分光源不能反射到相机上，让少部分光或者特定的光反射到相机里；典型的光源是低角度光源；实际应用案例（实际使用中，仅供参考，在选择光源时，先按照常规..

04《区块链财富指北》账号篇（1）：混沌之初，抢注公链短账号的生意经。_肖南飞的博客-程序员宅基地

区块链世界，每个人、每家企业、每个实体必然要拥有至少一个区块链账号。公链的短账号抢注生意在于稀缺性资源的占有套利。如今，区块链世界混沌初开、万物尚未定型、公链还处于混战之中。且不说公链短账号究竟价值几何，尚有待时间验证。就连竞价注册公链短账号，也是入口难觅、操作复杂。然而，正是混乱，才会给渺小个体带来机遇。

Labview中数组与文本文件的相互转化_labview将数组写入文本文件_小万..zzZZ的博客-程序员宅基地

Labview中数组与文本文件的相互转化本文主要讲解一个在Labview里面常用的一个小功能：将得到的数组保存在txt格式文件中；将txt文件的数据导入Labview，并以数组格式进行引用。将数组保存为txt文档此程序中主要使用“数组至小数字符串转换”和“写入文本文件”，两者的寻找方式如下图：最后的程序如图：读取TXT文档直接放图了猴急简单但是很常用的功能，希望对大家的学习...

React16.8中Hooks详解_weixin_33981932的博客-程序员宅基地

一、React Hooks(钩子)是什么Introducing HooksReact哲学：一切皆组件类组件class Counter extends Component { render () { return "Hello World" }}复制代码函数组件const Counter = () =&gt; { return "Hello Wo...

随便推点

DBA面试题系列一_dba面试问题_OwenZeng_DBA的博客-程序员宅基地

整理一些SQL SERVER 面试题，也是非常能考察数据库基础的题目。

用InkScape绘制中国人寿LOGO_informationss的博客-程序员宅基地

用InkScape绘制中国人寿LOGO绘制基本图形1、选择工具（S）单击左侧“创建矩形或正方形”按钮或使用快捷键R进行绘制正方形，在底部选择你想填充的颜色。2、单击左侧“创建和编辑文本对象”按钮或使用快捷键T进行插入文字，选择文字，在底部选择你想要的颜色。3、单击左侧“创建圆、椭圆和弧”按钮或使用快捷键E进行绘制圆，在底部选择你想填充的颜色，我这里填充的是绿色。再绘制一个小圆，移动小圆，使两个圆重叠成同心圆的形状。4.在同心圆的右上角绘制一个小正方形，填充颜色为白色。5.然后在空白的小正

scrum敏捷开发工具leangoo，管理单团队敏捷开发_Agile_zhanglao的博客-程序员宅基地

概述单团队敏捷开发主要是针对10人以下、只有一个Scrum团队的小型产品或项目的敏捷开发。对于小型团队来说，在Leangoo中创建一个单团队敏捷开发项目就可以很好地支持团队产品或项目的开发。适用场景适用于单个团队进行Scrum敏捷开发协作，Leangoo项目内也提供了“单团队敏捷开发”模板供团队选取使用。如果是多团队大规模敏捷开发，请查看多团队敏捷开发Scrum简介Scrum一个是用于开发和维护复杂产品的框架。上世纪90年代，Scrum在全球已得到广泛应用，它最初用于..

线程创建的检测strerror与perror_Shen-的博客-程序员宅基地

在线程的创建中，检测创建是否成功为什么使用strerror而不是perror？这要从perror和strerror的原理说起在库函数中有个errno的全局变量，每个errno的值对应错误的类型。当我们调用某些函数出错时，该函数就设置了errno的值，perror就将errno值对应的错误类型打印出来(这也是perror要紧跟着函数调用的原因);而在另外一些函数中，函数出错并不设置e...

C语言从函数返回数组的方法_c语言如何通过函数实参把函数里的数组取出_电子木头的博客-程序员宅基地

C 语言不允许返回一个完整的数组作为函数的参数。但是，可以通过指定不带索引的数组名来返回一个指向数组的指针。另外，C 不支持在函数外返回局部变量的地址，除非定义局部变量为 static 变量。示例： u8 *testarr; u8 i; u8 *test() { static u8 a[4]={0x11,0x22,0x33,0x44}; return a; } testarr = test(); for(i = 0; i &lt; 4; i ++) {

Unity2018的shader中LIGHT_ATTENUATION()报错的解决方案_天富儿的博客-程序员宅基地

文章目录描述错误原因修改后参考描述错误在将Unity5.5.0版本的项目转换成Unity2018.1.1的项目时，一个玻璃的shader报错了。错误信息：Shader error in ‘Shader Forge/Examples/Refraction’: syntax error: unexpected token ‘;’ at line 261 (on d3d11)根据上面的报错信息，我们定位错误位置：错误代码：float attenuation = LIGHT_ATTEN

推荐文章

热门文章

相关标签