色彩搭配理论

首先,这个理论只是告诉你可以这样搭配,而不是你应该这样搭配
我们约定您已知道什么是HSB和HSV(HSL),知道色相/饱和度/明度/亮度
或者你可以在这儿查看相关知识

协调的颜色

之前写完没保存,于是重写了一遍[泣]

对比色

也叫互补色,色相反过来(反相)
■ #bc2f40
■ #43d0bf
对比度非常高

同类色

色相几乎相同(严格来讲15度以内),但是饱和度有一定变化
原色
■ #b137e4
+15度
■ #dd64e3 ■ #df91e3
不变
■ #bd64e3 ■ #ca91e3
-15度
■ #9d64e3 ■ #b691e3

邻近色

色相相近(30度以内)
原色
■ #a6df5d
两个邻近色
■ #ded55d
■ #66de5d
冷暖一致,色调和谐

类似色

色相接近(90度以内)
原色
■ #3fa2db
两个类似色
■ #c740db
■ #3fa2db
虽然看起来并不类似

加色法

加色法就是这里用到的RGB
三者相加直到变成白色,很容易理解(就偷个懒不举例了)

减色法

减色法一般应用于使用颜料的时候
比如打印时的CMYK
■Cyan ■Magenta ■Yellow ■BLACK
减色法减不出黑色所以加入了黑色染料
什么都没有的时候当然就是白色了

搭配的艺术

CLASHING-对冲色

具有很强的冲击力,加入一定对比色

原色
■ #ef276a
对冲色(接近对比色)
■ #76a606

MONOCHROMATIC-单一色

和黑白的区别就是它有颜色

原色
■ #f59405
原色添加40%黑色
■ #c57007
原色添加40%白色
■ #eda951

NEUTRAL-中和颜色组

(相对温和的搭配)

原色
■ #ef276a
原色添加40%对比色
■ #8f435f
原色添加40%黑色/白色
■ #981d46

SPLIT-COMPLIMENTARY-分裂互补色颜色组

用互补色旁边的两个颜色来替代选定颜色的互补色本身,减少强烈的对比张力

原色
■ #76a606
互补色,偏蓝
■ #271863
互补色,偏红
■ #ef276a

RETANGLE-矩形颜色组

色谱较广,但是注意冷暖平衡

两个相近的颜色
■ #e8234f
■ #f59405

两个相近的颜色
■ #0661a8
■ #057f94

SQUARE-方形颜色组

两组对比色,将其他颜色添加黑白来搭配主色
■ #f59405
■ #0661a8
■ #ef276a
■ #057440

MindLet 项目策划

点击传送门体验MindLet

项目由来

用过很多思维导图软件, 但是没有软件渲染导图就没法编辑
markdown能轻松排版文档, 但是没有文档内部之间的跳转(需要手动写html)
这个东西大概也算是markdown的扩展吧..

功能

编辑:

清晰的标识出节点及其联结, 联结说明

使用:

在没有程序渲染思维导图时, 仅查看文本文件也可以纵览整个思维导图, 从而修改重要的地方

特点:

无需用户标记节点位置, 渲染时自动判断
语言特性, 有自己的语法

缺陷

• 编辑不便
• 相同节点与相同联结
• 有向有环图

可能加入的特性

图片节点(但是对于文本操作可读性很差)
坐标控制(渲染需要判断是否连通图)
标签(在过于复杂, 可读性差的情况下)
多节点到多节点的拓扑(多个节点'同时'连到一个节点上, 可读性更差了)

如何使用项目

语法示例:

# MVC架构
一种web应用框架

# 模型

[控制器]返回响应/模型

# 视图

[控制器]提交动作

# 控制器

[模型]提交查询
[视图]返回数据并由View渲染

• 以#开头的行会被解析为一个节点
• 若图存在环路, 解析时会暂时忽视一些联结
• []中表示联结到的节点, 之后是对联结的说明

若节点名重复, 则其前向会同时连接到所有同名节点
最后, 以上文本将被解析为下图:

视图

Single/All模式

将所有节点保存之后, 默认仅显示节点
用户可以选择显示连接线/不显示连接线(显示连接线可能会很乱)

• 当鼠标单击该节点时, 会隐藏所有不相关节点, 并重新排列视图, 进入Single模式
• 当鼠标右击任意位置, 会返回All模式
• 当鼠标悬停在某个节点上时, 会单独显示该节点相关的所有连接线

下图是一个Single模式的视图格式

它由五个部分组成:

• 前向
• 后继
• 环路
• 节点
• 节点信息

解析

示例文本

# A
Description of A
[B]description of A to B
[C]A to C
[D]A to D
[E]A to E

# B

# C

# D
[A]D to A

# E
[A]E to A
[A]E also to A

# F
[A]F to A

# G
[A]G to A

F
G
E    A    B
            C
            D

理想的解析:

• All-Mode-Without-Line

• All-Mode

• Single-Mode(单击节点A)

• Single-Mode-View(暂不支持)

首先解析为json

[
    {
        "name": "",
        "next": [
            {
                "name": "",
                "next": [
                    
                ]
            },
            {
                "name": "",
                "next": [
                    
                ]
            }
        ]
    },
    {
        "name": "A",
        "description": "Description of A",
        "next": [
            {
                "name": "B",
                "description": "description of A to B"
            },
            {
                "name": "C",
                "description": "A to C"
            },
            {
                "name": "D",
                "description": "A to D"
            },
            {
                "name": "E",
                "description": "A to E"
            }
        ],
        "back": [
            "D",
            "E",
            "F",
            "G"
        ]
    },
    {
        "name": "B",
        "description": "",
        "next": [
            
        ],
        "back": [
            "A"
        ]
    },
    {
        "name": "C",
        "description": "",
        "next": [
            
        ],
        "back": [
            "A"
        ]
    },
    {
        "name": "D",
        "description": "",
        "next": [
            {
                "name": "A",
                "description": "D to A"
            }
        ],
        "back": [
            "A"
        ]
    },
    {
        "name": "E",
        "description": "",
        "next": [
            {
                "name": "A",
                "description": "E to A"
            },
            {
                "name": "A",
                "description": "E also to A"
            }
        ],
        "back": [
            "A"
        ]
    },
    {
        "name": "F",
        "description": "",
        "next": [
            {
                "name": "A",
                "description": "F to A"
            }
        ]
    },
    {
        "name": "G",
        "description": "",
        "next": [
            {
                "name": "A",
                "description": "G to A"
            }
        ]
    }
]

然后写出了一堆bug,于是(并没有因此弃坑)修复
后来不知道html结构怎么组织比较好,于是弃坑了

变量

• 非ASCII字符: \x41 -> A
• Unicode字符: \u4e2d -> 中
• `多行字符串,你懂的`
  '这样可以${name}把变量嵌进去'
• 神奇特性
  • 变量提升特性:

    var x = 'Hello, ' + y;
    console.log(x);
    var y = 'Bob';
    

  • let声明局部作用域变量
  • 解构赋值
    ({x, y} = { name: '小明', x: 100, y: 200});

高阶函数!

function add(x, y, f) {
    return f(x) + f(y);
}

• map() //对每一个元素操作
• reduce() //对(n,n+1)操作()
• filter() //过滤返回false的函数
• sort() //最好自己实现
• generator与yield

正则表达式

• /开头
• ()提取Group
• 由/.exec()提取出数组

JSON

• json对象转json*(indent=缩进)
  JSON.stringify(value, filter, indent)
• json转json对象
  JSON.parse('value')返回value的JavaScript对象

面向对象

• (ES6) g class关键字直接写, 和后面两个是一样的
• 将xiaoming的原型指向Bird
  xiaoming.prototype = Bird;
• 返回一个Bird对象的原型
  Object.create(Bird)

操作DOM

选择DOM元素

1. document.getElementById();
2. document.getElementsByTagName();
3. document.getElementsByClassName();
4. querySelector();
5. querySelectorAll();

更新DOM

1. DOM_obj.innerHTML(); 对字符编码来避免XSS攻击
2. DOM_obj.innerText(); 不返回隐藏元素的文本
3. DOM_obj.textContent(); 返回所有文本

插入DOM

1. DOM_obj.appendChild(DOM_obj2); OM_obj2会从网页中删掉

删除DOM

1. parent.removeChild(parent.children[1]); 删完后children[1]变成children[0]

其他琐碎的科普

• Number类型统一按浮点数处理, 64位存储 ,整数是按 最大54位 来算最大最小数的,否则会丧失精度 某些操作(如数组索引还有位操作)是按32位处理的
• 浮点数范围:
  as large as ±1.7976931348623157 × 10的308次方
  as small as ±5 × 10的−324次方
• 精确整数范围:
  The JavaScript number format allows you to exactly represent all integers between
  −9007199254740992 and 9007199254740992 (即正负2的53次方)

好想法需要厉害的实现

我暂时没法把它做的更好, 不能阻止别人每秒无消耗对队友造成巨额本体伤害......

点击传送门进入新世界

游戏开发技术篇

SpriteLamp-2D光照系统
2D角色移动实现细节

美术篇

教你画像素画

开始使用

• 初始化git
  git init
• 添加一个地址
  git remote add <local-name> <SSH-address>
• 添加到暂存区
  git add .
git add <file>
• 保存到本地
  git commit -m '<something to say about this commit>'
• 从远程拉取(下载)
  git pull <remote-name> <branch-name>
• 提交到远程
  git push <remote-name> <branch-name>

查看其它信息

• 远程仓库
  git remote
• 查看修改
  git status
• 查看所在分支
  git branch
• 查看历史(图像)
  git log --graph --pretty --abbrev-commit
git log --graph --pretty=oneline --abbrev-commit

管理分支

• 合并HEAD和某个分支
  git merge <branch-name> --no--ff
  '--no--ff' is used to add commit when merge
• 删除分支
  git branch -d <branch-name>
  强制
  git branch -D <branch-name>

储藏(stash)

• 添加储藏
  git stash
• 切换到分支
  git checkout -b <new-branch-name>
  修改后
  git commit -m '<mark something>'
  查看储藏仓
  git stash list
  选择:
  • 弹出储藏
    git stash apply
    然后删除
    git stash drop
  • 弹出并删除
    git stash pop

版本标签

• 给某个版本上标签
  注意 :
  • commit-id can be omitted
  • -a and -m is a couple
  • *** ' -d ' *** 可以删除一个本地标签
    git tag -a <tag-name> -m "<mark something>" <commit-id>
• 根据commit-id上标签
  git tag <tag-name> <commit-id>
• 查看标签
  git show <tag-name>
git tag
• 删除一个远程标签
  git push origin :refs/tags/<tagname>