ng2048源码阅读
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源码阅读的更多相关文章
- 【原】FMDB源码阅读(三)
[原]FMDB源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 FMDB比较优秀的地方就在于对多线程的处理.所以这一篇主要是研究FMDB的多线程处理的实现.而 ...
- 【原】FMDB源码阅读(二)
[原]FMDB源码阅读(二) 本文转载请注明出处 -- polobymulberry-博客园 1. 前言 上一篇只是简单地过了一下FMDB一个简单例子的基本流程,并没有涉及到FMDB的所有方方面面,比 ...
- 【原】FMDB源码阅读(一)
[原]FMDB源码阅读(一) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 说实话,之前的SDWebImage和AFNetworking这两个组件我还是使用过的,但是对于 ...
- 【原】AFNetworking源码阅读(六)
[原]AFNetworking源码阅读(六) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 这一篇的想讲的,一个就是分析一下AFSecurityPolicy文件,看看AF ...
- 【原】AFNetworking源码阅读(五)
[原]AFNetworking源码阅读(五) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇中提及到了Multipart Request的构建方法- [AFHTTP ...
- 【原】AFNetworking源码阅读(四)
[原]AFNetworking源码阅读(四) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇还遗留了很多问题,包括AFURLSessionManagerTaskDe ...
- 【原】AFNetworking源码阅读(三)
[原]AFNetworking源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇的话,主要是讲了如何通过构建一个request来生成一个data tas ...
- 【原】AFNetworking源码阅读(二)
[原]AFNetworking源码阅读(二) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇中我们在iOS Example代码中提到了AFHTTPSessionMa ...
- 【原】AFNetworking源码阅读(一)
[原]AFNetworking源码阅读(一) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 AFNetworking版本:3.0.4 由于我平常并没有经常使用AFNetw ...
随机推荐
- ListFragment源码 (待分析)
/* * Copyright (C) 2010 The Android Open Source Project * * Licensed under the Apache License, Versi ...
- Vue - 自定义指令
1.Vue.directive(id,definition)注册一个全局自定义指令,接收两个参数,指令ID以及定义对象 2.钩子函数:将作用域与DOM进行链接,链接函数用来创建可以操作DOM的指令 b ...
- 任务栏显示进度条 CreateComObject(CLSID_TaskbarList) as ITaskbarList4
http://www.cnblogs.com/jxsoft/archive/2011/06/02/2067712.html //在任务栏显示 进度条 unit Unit9; interface use ...
- 在Myeclipse中提交代码到GitHub中
这需要借助插件Egit,首先就是先下载该插件了,可以再eclipse中下载,也可以在外面下载,下载就不说了.下载地址git://github.com/houyongchao/plugin-Egit.g ...
- bing的简单英文字典工具
今天看到园友心白水撰写的<简单翻译工具--必应字典第三方API使用方法>,感觉很不错,所以用Python也写了一个.源码如下: import urllib.request import j ...
- Android MediaMetadataRetriever 读取多媒体文件信息,元数据(MetaData)
音乐播放器通常需要获取歌曲的专辑.作者.标题.年代等信息,将这些信息显示到UI界面上. 1.一种方式:解析媒体文件 命名空间:android.media.MediaMetadataRetrieve ...
- 【JBOSS】 JBOSS目录结构
JBOSS在默认情况下可以用3种方式启动minimal,default和all.三种模式内部的模块数量依次递增 例如: 1-执行JBOSS_HOME/bin/run.bat批量处理文件启动JBos ...
- iOS开发之AFNetworking 3.0.4使用
昨天使用Cocoapods导入AFN做POST的时候,导入的最新版的3.0.4,突然发现找不到AFHTTPRequestOperationManager了...上github上一看,发现没有这个了.刚 ...
- Dexpress 中 grid的使用
grid 中加入checkbox Run desiger Columns ColumnEdit中选择checkbox 此时我们要在后台手动指定一个数据列如下代码: dtRebatesReport.Co ...
- 加载跨域的HTML页面AJAX
//下面是谷歌浏览器处理方式,微信端,直接使用微信链接不作处理,,火狐浏览器另行处理... 借鉴地址:http://stackoverflow.com/questions/15005500/loadi ...