ng2048源码阅读

Tutorial: http://www.ng-newsletter.com/posts/building-2048-in-angularjs.html

Github: https://github.com/fullstackio/ng2048.git

本地不部署项目一直卡在node-sass不成功的问题上,需要的css文件没办法生成,我的目的是弄清设计原理,学习ng的用法,所以直接用sass编译sass文件为css文件,丢到项目文件夹下跑起来。

sass编译css文件

npm install node-sass -g
sass D:\GitHub\ng2048\app\styles\main.scss D:\GitHub\ng2048\app\styles\main.css

启动项目

这个项目是grunt构建的, 使用--force忽略sass编译的错误继续执行

grunt serve --force

这个列子有些小复杂,看看能学到啥

1. 数据传递,指令的使用,ng-if的使用

grid的使用,通过ng-model传递到指令内部的独立scope

<!-- 显示格子 -->
<div grid ng-model='ctrl.game' class="row"></div>

Grid中包含tile,tile指令也是通过ng-model传递到指令内部的独立scope,注意这里的ng-repeat迭代的对象的传递

<div id="game-{{ ngModel.gameSize }}">
<div class="grid-container">
<div class="grid-cell" ng-repeat="cell in ngModel.grid track by $index"></div>
</div> <div class="tile-container">
<div tile
ng-model='tile'
ng-repeat='tile in ngModel.tiles track by $id(tile.id || $index)'></div>
</div>
</div>

tile的模板

<div ng-if='ngModel' class="tile position-{{ ngModel.x }}-{{ ngModel.y }} tile-{{ ngModel.value }}"
ng-class="{ 'tile-merged': ngModel.merged}">
<div class="tile-inner">
{{ ngModel.value }}
</div>
</div>

2. 通用的游戏键盘控制服务

服务init的时候这个keydown什么也不做,通过on订阅事件,将自己的处理程序加到服务的keyEventHandlers列表中完成事件的定制。这个服务就通用的了,你只需要写好自己的控制程序,然后通过on订阅就可以了。这也算是一种设计技巧了。

'use strict';

angular.module('Keyboard', [])
.service('KeyboardService', function($document) { var UP = 'up',
RIGHT = 'right',
DOWN = 'down',
LEFT = 'left'; var keyboardMap = {
37: LEFT,
38: UP,
39: RIGHT,
40: DOWN
}; this.init = function() {
var self = this;
this.keyEventHandlers = [];
$document.bind('keydown', function(evt) {
var key = keyboardMap[evt.which]; if (key) {
// An interesting key was pressed
evt.preventDefault();
self._handleKeyEvent(key, evt);
}
});
}; this.on = function(cb) {
this.keyEventHandlers.push(cb);
}; this._handleKeyEvent = function(key, evt) {
var callbacks = this.keyEventHandlers;
if (!callbacks) {
return;
} evt.preventDefault(); if (callbacks) {
for (var x = 0; x < callbacks.length; x++) {
var cb = callbacks[x];
cb(key, evt);
}
}
}; });
//初始化
KeyboardService.init();
//订阅事件
KeyboardService.on(function(key) {
self.game.move(key);
});

3. 设计思路和实现思路

代码看完了,游戏的思路和我设想的差不多,但是在实现上跟我想的有些不一样,大致也就是两层循环挨个的处理格子,但是实现上感觉还是有些技巧的。

3.1 根据方向确定坐标的偏移量
    var vectors = {
'left': { x: -1, y: 0 },
'right': { x: 1, y: 0 },
'up': { x: 0, y: -1 },
'down': { x: 0, y: 1 }
};
3.2 根据方向确定两层循环的索引序列,[0,1,2,3]还是[3,2,1,0]
    this.traversalDirections = function(key) {
var vector = vectors[key];
var positions = {x: [], y: []};
for (var x = 0; x < this.size; x++) {
positions.x.push(x);
positions.y.push(x);
} if (vector.x > 0) {
positions.x = positions.x.reverse();
}
if (vector.y > 0) {
positions.y = positions.y.reverse();
} return positions;
};
3.3 一次性拿到可以直接移动到的位置和紧跟的进行碰撞的位置
    this.calculateNextPosition = function(cell, key) {
var vector = vectors[key];
var previous; do {
previous = cell;
cell = {
x: previous.x + vector.x,
y: previous.y + vector.y
};
} while (this.withinGrid(cell) && this.cellAvailable(cell));
//没有越界,并且cell是空的 return {
newPosition: previous,
next: this.getCellAt(cell)
};
};

ng2048源码阅读的更多相关文章

  1. 【原】FMDB源码阅读(三)

    [原]FMDB源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 FMDB比较优秀的地方就在于对多线程的处理.所以这一篇主要是研究FMDB的多线程处理的实现.而 ...

  2. 【原】FMDB源码阅读(二)

    [原]FMDB源码阅读(二) 本文转载请注明出处 -- polobymulberry-博客园 1. 前言 上一篇只是简单地过了一下FMDB一个简单例子的基本流程,并没有涉及到FMDB的所有方方面面,比 ...

  3. 【原】FMDB源码阅读(一)

    [原]FMDB源码阅读(一) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 说实话,之前的SDWebImage和AFNetworking这两个组件我还是使用过的,但是对于 ...

  4. 【原】AFNetworking源码阅读(六)

    [原]AFNetworking源码阅读(六) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 这一篇的想讲的,一个就是分析一下AFSecurityPolicy文件,看看AF ...

  5. 【原】AFNetworking源码阅读(五)

    [原]AFNetworking源码阅读(五) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇中提及到了Multipart Request的构建方法- [AFHTTP ...

  6. 【原】AFNetworking源码阅读(四)

    [原]AFNetworking源码阅读(四) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇还遗留了很多问题,包括AFURLSessionManagerTaskDe ...

  7. 【原】AFNetworking源码阅读(三)

    [原]AFNetworking源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇的话,主要是讲了如何通过构建一个request来生成一个data tas ...

  8. 【原】AFNetworking源码阅读(二)

    [原]AFNetworking源码阅读(二) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇中我们在iOS Example代码中提到了AFHTTPSessionMa ...

  9. 【原】AFNetworking源码阅读(一)

    [原]AFNetworking源码阅读(一) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 AFNetworking版本:3.0.4 由于我平常并没有经常使用AFNetw ...

随机推荐

  1. ListFragment源码 (待分析)

    /* * Copyright (C) 2010 The Android Open Source Project * * Licensed under the Apache License, Versi ...

  2. Vue - 自定义指令

    1.Vue.directive(id,definition)注册一个全局自定义指令,接收两个参数,指令ID以及定义对象 2.钩子函数:将作用域与DOM进行链接,链接函数用来创建可以操作DOM的指令 b ...

  3. 任务栏显示进度条 CreateComObject(CLSID_TaskbarList) as ITaskbarList4

    http://www.cnblogs.com/jxsoft/archive/2011/06/02/2067712.html //在任务栏显示 进度条 unit Unit9; interface use ...

  4. 在Myeclipse中提交代码到GitHub中

    这需要借助插件Egit,首先就是先下载该插件了,可以再eclipse中下载,也可以在外面下载,下载就不说了.下载地址git://github.com/houyongchao/plugin-Egit.g ...

  5. bing的简单英文字典工具

    今天看到园友心白水撰写的<简单翻译工具--必应字典第三方API使用方法>,感觉很不错,所以用Python也写了一个.源码如下: import urllib.request import j ...

  6. Android MediaMetadataRetriever 读取多媒体文件信息,元数据(MetaData)

    音乐播放器通常需要获取歌曲的专辑.作者.标题.年代等信息,将这些信息显示到UI界面上. 1.一种方式:解析媒体文件   命名空间:android.media.MediaMetadataRetrieve ...

  7. 【JBOSS】 JBOSS目录结构

    JBOSS在默认情况下可以用3种方式启动minimal,default和all.三种模式内部的模块数量依次递增   例如: 1-执行JBOSS_HOME/bin/run.bat批量处理文件启动JBos ...

  8. iOS开发之AFNetworking 3.0.4使用

    昨天使用Cocoapods导入AFN做POST的时候,导入的最新版的3.0.4,突然发现找不到AFHTTPRequestOperationManager了...上github上一看,发现没有这个了.刚 ...

  9. Dexpress 中 grid的使用

    grid 中加入checkbox Run desiger Columns ColumnEdit中选择checkbox 此时我们要在后台手动指定一个数据列如下代码: dtRebatesReport.Co ...

  10. 加载跨域的HTML页面AJAX

    //下面是谷歌浏览器处理方式,微信端,直接使用微信链接不作处理,,火狐浏览器另行处理... 借鉴地址:http://stackoverflow.com/questions/15005500/loadi ...