├── LICENSE
├── README.md
├── build
├── shimeji.css
└── shimeji.js
├── demo
├── index.htm
├── squalo
│ ├── mascot.json
│ ├── shime1.png
│ ├── shime10.png
│ ├── shime11.png
│ ├── shime12.png
│ ├── shime13.png
│ ├── shime14.png
│ ├── shime15.png
│ ├── shime16.png
│ ├── shime17.png
│ ├── shime18.png
│ ├── shime19.png
│ ├── shime2.png
│ ├── shime20.png
│ ├── shime21.png
│ ├── shime22.png
│ ├── shime23.png
│ ├── shime24.png
│ ├── shime25.png
│ ├── shime26.png
│ ├── shime27.png
│ ├── shime28.png
│ ├── shime29.png
│ ├── shime3.png
│ ├── shime30.png
│ ├── shime31.png
│ ├── shime32.png
│ ├── shime33.png
│ ├── shime34.png
│ ├── shime35.png
│ ├── shime36.png
│ ├── shime37.png
│ ├── shime38.png
│ ├── shime39.png
│ ├── shime4.png
│ ├── shime40.png
│ ├── shime41.png
│ ├── shime42.png
│ ├── shime43.png
│ ├── shime44.png
│ ├── shime45.png
│ ├── shime46.png
│ ├── shime5.png
│ ├── shime6.png
│ ├── shime7.png
│ ├── shime8.png
│ └── shime9.png
└── style.css
├── package.json
└── src
├── behaviors
├── boxNoEntry.js
├── boxNoExit.js
└── randomWalk.js
├── shimeji.css
└── shimeji.js
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Jim Chen
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ShimejiHTML5
2 | ============
3 |
4 | The worlds most useless port of the desktop mascot. Acces the
5 | [demo](http://jabbany.github.com/ShimejiHTML5/demo) here.
6 |
7 |
8 |
--------------------------------------------------------------------------------
/build/shimeji.css:
--------------------------------------------------------------------------------
1 | .shimeji {
2 | position: fixed;
3 | z-index: 10;
4 | }
5 |
6 | .shimeji img {
7 | position: absolute;
8 | }
9 |
10 | .shimeji img.reverseH {
11 | transform: scaleX(-1);
12 | transform-origin: 50% 50%;
13 | }
14 |
15 | .shimeji img.reverseV {
16 | transform: scaleY(-1);
17 | transform-origin: 50% 50%;
18 | }
19 |
--------------------------------------------------------------------------------
/build/shimeji.js:
--------------------------------------------------------------------------------
1 | /** Library for loading shinmeji **/
2 | var Shimeji = (function(){
3 | var Shimeji = function(config){
4 | this.config = config;
5 | this.actionQueue = [];
6 | this.environment = [];
7 | this.behaviors = {};
8 | this.container = null;
9 | this.image = null;
10 | this._timeout = -1;
11 | this._x = null;
12 | this._y = null;
13 | };
14 | Shimeji.prototype.init = function(element, x, y){
15 | if(!element) { throw "Invalid bind element"; }
16 | var image = document.createElement("img");
17 | element.appendChild(image);
18 | this.container = element;
19 | this.image = image;
20 | this._x = (typeof x === "number") ? x : this.container.offsetLeft;
21 | this._y = (typeof y === "number") ? y :this.container.offsetTop;
22 |
23 | this.place(this._x, this._y);
24 | };
25 | Shimeji.prototype.makeEnvironment = function(elems){
26 | this.environment.push({
27 | "name":"page",
28 | "top":0,
29 | "left":0,
30 | "bottom":window.innerHeight,
31 | "right":window.innerWidth
32 | })
33 | if(typeof elems === "undefined"){ return; }
34 | for(var i = 0; i < elems.length; i++){
35 | var elem = elems[i];
36 | this.environment.push({
37 | "name": (elem.id !== "" ? elem.id : "elem_" + i),
38 | "top": elem.offsetTop,
39 | "bottom": elem.offsetTop + elem.offsetHeight,
40 | "left": elem.offsetLeft,
41 | "right": elem.offsetLeft + elem.offsetWidth
42 | });
43 | };
44 | };
45 | Shimeji.prototype._inEnv = function(env, x, y){
46 | return x < env.right && x > env.left && y > env.top && y < env.bottom;
47 | };
48 | Shimeji.prototype.place = function(x, y){
49 | this._x = x;
50 | this._y = y;
51 | this.container.style.left = this._x + "px";
52 | this.container.style.top = this._y + "px";
53 | };
54 | Shimeji.prototype.cancelAct = function(){
55 | this.actionQueue = [];
56 | };
57 | Shimeji.prototype.interact = function(oX, oY){
58 | // Interact with the environment
59 | for(var i = 0; i < this.environment.length; i++){
60 | var env = this.environment[i];
61 | if(this._inEnv(env, this._x, this._y) !== this._inEnv(env, oX, oY)){
62 | var interact = [];
63 | if(this._inEnv(env, oX, oY)){
64 | interact.push("exit");
65 | if(this._y >= env.bottom && oY < env.bottom){
66 | interact.push("bottom");
67 | }else if(this._y <= env.top && oY > env.top){
68 | interact.push("top");
69 | }
70 | if(this._x >= env.right && oX < env.right){
71 | interact.push("right");
72 | }else if(this._x <= env.left && oX > env.left){
73 | interact.push("left");
74 | }
75 | }else{
76 | interact.push("enter");
77 | if(this._y <= env.bottom && oY > env.bottom){
78 | interact.push("bottom");
79 | }else if(this._y >= env.top && oY < env.top){
80 | interact.push("top");
81 | }
82 | if(this._x <= env.right && oX > env.right){
83 | interact.push("right");
84 | }else if(this._x >= env.left && oX < env.left){
85 | interact.push("left");
86 | }
87 | }
88 | var ikey = interact.join("_");
89 | if(typeof this.behaviors[env.name] === "function"){
90 | this.behaviors[env.name](ikey, env);
91 | }else if(this.behaviors[env.name] && this.behaviors[env.name][ikey]){
92 | if(typeof this.behaviors[env.name][ikey] !== "function"){
93 | this.actionQueue = [];
94 | this.act(this.behaviors[env.name][ikey]);
95 | return;
96 | }else{
97 | this.behaviors[env.name][ikey](env);
98 | }
99 | }
100 | }
101 | }
102 | };
103 | Shimeji.prototype.pose = function(posture){
104 | this.image.src = (this.config.baseUrl ? this.config.baseUrl : "") + posture.src;
105 | this.image.style.left = -posture.anchor[0] + "px";
106 | this.image.style.top = -posture.anchor[1] + "px";
107 |
108 | this.image.className = (posture.reverseVert ? "reverseV" : "") + " " + (posture.reverseHori ? "reverseH" : "");
109 | var oX = this._x, oY = this._y;
110 | this._x += (posture.reverseHori ? -1: 1) * posture.move.x;
111 | this._y += (posture.reverseVert ? -1: 1) * posture.move.y;
112 | this.interact(oX, oY);
113 |
114 | this.container.style.transition = "top " + posture.duration + "ms, left " + posture.duration + "ms linear";
115 | this.place(this._x, this._y);
116 | };
117 | Shimeji.prototype.act = function(action, repeat, reverseH, reverseV, reverseM, onEnd){
118 | if(typeof repeat !== "number"){
119 | repeat = 1;
120 | }
121 | if(this.config.actions[action]){
122 | if(!reverseM){
123 | for(var r = 0; r < repeat; r++){
124 | for(var i = 0; i < this.config.actions[action].length; i++){
125 | var revact = {};
126 | for(var prop in this.config.actions[action][i]){
127 | if(this.config.actions[action][i].hasOwnProperty(prop)){
128 | revact[prop] = this.config.actions[action][i][prop];
129 | }
130 | }
131 | revact["reverseVert"] = reverseV;
132 | revact["reverseHori"] = reverseH;
133 | this.actionQueue.push(revact);
134 | };
135 | }
136 | }else{
137 | for(var r = 0; r < repeat; r++){
138 | for(var i = this.config.actions[action].length - 1; i >= 0; i--){
139 | var revact = JSON.parse(JSON.stringify(this.config.actions[action][i]));
140 | revact["reverseVert"] = reverseV;
141 | revact["reverseHori"] = reverseH;
142 | revact.move.x = -revact.move.x;
143 | revact.move.y = -revact.move.y;
144 | this.actionQueue.push(revact);
145 | };
146 | }
147 | }
148 | if(typeof onEnd === "function"){
149 | this.actionQueue.push(onEnd);
150 | }
151 | if(this._timeout < 0){
152 | var self = this;
153 | var _cb = function(){
154 | if(self.actionQueue.length > 0){
155 | var posture = self.actionQueue.shift();
156 | if(typeof posture === "function"){
157 | posture();
158 | _cb();
159 | return;
160 | }
161 | self.pose(posture);
162 | self._timeout = setTimeout(_cb, posture.duration );
163 | }else{
164 | self._timeout = -1;
165 | }
166 | };
167 | _cb();
168 | }
169 | }
170 | };
171 | Shimeji.prototype.behavior = function(trigger, action, hook){
172 | if(typeof hook === "undefined"){
173 | this.behaviors[trigger] = action;
174 | }else{
175 | if(!this.behaviors[trigger]){
176 | this.behaviors[trigger] = {};
177 | }
178 | this.behaviors[trigger][hook] = action;
179 | }
180 | };
181 | return Shimeji;
182 | })();
183 |
--------------------------------------------------------------------------------
/demo/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Shimeji HTML5 Demo
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Shimeji Web Library Demonstration
17 |
18 |
Reverse Horizontal
19 |
Reverse Vertical
20 |
Reverse Motion
21 |
22 |
23 |
Walk
24 |
Climb
25 |
Stand
26 |
Drop
27 |
28 |
29 |
New
30 |
31 |
32 |
33 |