700 lines
16 KiB
JavaScript
700 lines
16 KiB
JavaScript
var ktk = ktk || {};
|
|
|
|
/*
|
|
===============================================================================
|
|
|
|
ktk.Walker
|
|
|
|
|
|
===============================================================================
|
|
*/
|
|
|
|
/*
|
|
0 0 0 0
|
|
/|\ /|\ /|\ /|
|
|
_ \ /| |\
|
|
*/
|
|
|
|
ktk.startWalker = function(div, x, y, size) {
|
|
new ktk.Walker(div, x, y, size);
|
|
}
|
|
|
|
ktk.walker_data = {
|
|
spawn_cycle:
|
|
[
|
|
[
|
|
["---"],
|
|
[" "],
|
|
[" "]
|
|
],
|
|
[
|
|
[" 0 "],
|
|
["---"],
|
|
[" "]
|
|
],
|
|
[
|
|
[" 0 "],
|
|
["/|\\"],
|
|
["---"]
|
|
],
|
|
[
|
|
[" 0 "],
|
|
["/|\\"],
|
|
["_|_"]
|
|
]
|
|
],
|
|
stand_cycle:
|
|
[
|
|
[
|
|
[" 0 "],
|
|
["/|\\"],
|
|
["_|_"]
|
|
],
|
|
[
|
|
[" 0 "],
|
|
["/|\\"],
|
|
["_|/"]
|
|
]
|
|
],
|
|
bored_cycle:
|
|
[
|
|
[
|
|
[" 0 "],
|
|
["/|\\"],
|
|
["_|_"]
|
|
],
|
|
[
|
|
[" 0"],
|
|
["/|\\"],
|
|
["_|_"]
|
|
],
|
|
[
|
|
[" 0 "],
|
|
["-|\\"],
|
|
["_|_"]
|
|
],
|
|
[
|
|
["0 "],
|
|
["-|-"],
|
|
["_|_"]
|
|
],
|
|
[
|
|
[" 0 "],
|
|
["~|-"],
|
|
["_|_"]
|
|
],
|
|
[
|
|
[" 0"],
|
|
["~|~"],
|
|
["_|_"]
|
|
],
|
|
[
|
|
[" 0"],
|
|
["-|~"],
|
|
["_|_"]
|
|
]
|
|
],
|
|
walk_right_cycle:
|
|
[
|
|
[
|
|
[" 0 "],
|
|
["/|\\"],
|
|
[" \\ "]
|
|
],
|
|
[
|
|
[" 0 "],
|
|
[" |"],
|
|
[" | "]
|
|
],
|
|
[
|
|
[" 0 "],
|
|
[",|\\"],
|
|
["/ \\"]
|
|
]
|
|
],
|
|
walk_left_cycle:
|
|
[
|
|
[
|
|
[" 0 "],
|
|
["/|\\"],
|
|
["/ \\"]
|
|
],
|
|
[
|
|
[" 0 "],
|
|
[" |"],
|
|
[" | "]
|
|
],
|
|
[
|
|
[" 0 "],
|
|
["/|>"],
|
|
["/ \\"]
|
|
]
|
|
],
|
|
/*
|
|
0 0
|
|
<' <`
|
|
/` ,|
|
|
*/
|
|
push_right_cycle:
|
|
[
|
|
[
|
|
[" 0 "],
|
|
[" <'"],
|
|
[" /`"]
|
|
],
|
|
[
|
|
[" 0 "],
|
|
[" <`"],
|
|
[" ,|"]
|
|
]
|
|
],
|
|
/*
|
|
0 0
|
|
`> '>
|
|
'\ |`
|
|
*/
|
|
push_left_cycle:
|
|
[
|
|
[
|
|
[" 0 "],
|
|
["`>"],
|
|
["'\\"]
|
|
],
|
|
[
|
|
[" 0 "],
|
|
["'>"],
|
|
[" |`"]
|
|
]
|
|
],
|
|
|
|
/*
|
|
\0/ \0/ \0/
|
|
| | |
|
|
/ | \
|
|
*/
|
|
falling_cycle:
|
|
[
|
|
[
|
|
["\\0/"],
|
|
[" | "],
|
|
["/ "]
|
|
],
|
|
[
|
|
["\\0/"],
|
|
[" | "],
|
|
[" | "]
|
|
],
|
|
[
|
|
["\\0/"],
|
|
[" | "],
|
|
[" \\"]
|
|
]
|
|
],
|
|
/*
|
|
0/ 0, 0'
|
|
|, |' |'
|
|
/ \ \`
|
|
*/
|
|
climb_right_cycle:
|
|
[
|
|
[
|
|
[" 0 "],
|
|
[" |,"],
|
|
[" / "]
|
|
],
|
|
[
|
|
[" 0,"],
|
|
[" |'"],
|
|
[" \\"]
|
|
],
|
|
[
|
|
[" 0'"],
|
|
[" |'"],
|
|
[" \\`"]
|
|
]
|
|
],
|
|
/*
|
|
\0 ,0 '0
|
|
`| .| '|
|
|
\ / /
|
|
|
|
|
|
*/
|
|
climb_left_cycle:
|
|
[
|
|
[
|
|
["\\0 "],
|
|
["`| "],
|
|
[" / "]
|
|
],
|
|
[
|
|
[",0 "],
|
|
[".| "],
|
|
["/ "]
|
|
],
|
|
[
|
|
["'0 "],
|
|
["'| "],
|
|
["/ "]
|
|
]
|
|
]
|
|
};
|
|
|
|
ktk.newSurrounding = function(element, ignore_xy) {
|
|
var ignore_xy = (typeof ignore_xy === 'undefined' ? false : true);
|
|
var width = parseInt(element.offsetWidth) || parseInt(element.style.width) || parseInt(element.style.minWidth);
|
|
var height = parseInt(element.offsetHeight) || parseInt(element.style.height) || parseInt(element.style.minHeight);
|
|
var x = (ignore_xy == false ? parseInt(element.offsetLeft) : 0 );
|
|
var y = (ignore_xy == false ? parseInt(element.offsetTop) : 0 );
|
|
var id = element.id || element.className || 'foo';
|
|
|
|
return new ktk.Surrounding(element, id, x, y, width, height);
|
|
};
|
|
|
|
ktk.Surrounding = function(element, id, x, y, width, height) {
|
|
this.id = id;
|
|
this.x = x;
|
|
this.y = y;
|
|
this.width = width;
|
|
this.height = height;
|
|
this.element = element;
|
|
};
|
|
|
|
ktk.Walker = function(parent_div, start_x, start_y, start_size) {
|
|
_walker_ = this;
|
|
|
|
if (parent_div == 'body') {
|
|
this.world_name = 'body';
|
|
this.world_element = document.body;
|
|
} else {
|
|
this.world_name = parent_div;
|
|
this.world_element = document.getElementById(this.world_name);
|
|
}
|
|
this.world = ktk.newSurrounding(this.world_element, parent_div);
|
|
console.log(this.world);
|
|
this.surroundings = [];
|
|
|
|
this.set = "spawn_cycle";
|
|
this.last_set = "spawn_cycle";
|
|
this.frame = 0;
|
|
this.last_frame = 0;
|
|
this.order = 0;
|
|
this.last_order = 0;
|
|
this.is_playing = false;
|
|
this.is_acting = true;
|
|
|
|
this.is_falling = false;
|
|
|
|
this.next_action = '';
|
|
this.last_action = '';
|
|
this.action = 'spawn';
|
|
this.action_elapsed = 0;
|
|
this.action_duration = 100;
|
|
this.MOVE_SUCCESS = 0;
|
|
this.MOVE_FAILURE = 1;
|
|
|
|
this.size = start_size;
|
|
this.width = this.size*2;
|
|
this.height = this.size*3.6;
|
|
|
|
this.arm_strength = 1;
|
|
this.leg_strength = 4;
|
|
|
|
this.element = document.createElement('div');
|
|
|
|
this.element.style.fontSize = this.size+"px";
|
|
this.element.style.width = this.width+"px";
|
|
this.element.style.height = this.height+"px";
|
|
this.element.style.display = "block";
|
|
|
|
this.element.style.position = "absolute";
|
|
|
|
this.element.id = "ktk.Walker";
|
|
this.element.className = "ktkWalker";
|
|
|
|
this.x = start_x;
|
|
this.y = start_y;
|
|
this.x_velocity = 0;
|
|
this.y_velocity = 0;
|
|
|
|
this.world_element.appendChild(this.element);
|
|
|
|
this.Tick = function() {
|
|
this.current_time = new Date().getTime();
|
|
|
|
this.delta_time = (this.current_time - this.previous_time);
|
|
this.elapsed_time += this.delta_time;
|
|
|
|
this.doGravity();
|
|
|
|
this.Think();
|
|
|
|
this.Blit();
|
|
this.previous_time = this.current_time;
|
|
setTimeout(function() { _walker_.Tick(); }, 100);
|
|
};
|
|
|
|
this.Think = function() {
|
|
if (!this.is_acting) {
|
|
var rand = Math.round(Math.random());
|
|
if (rand == 0) {
|
|
this.thinkWalk();
|
|
} else {
|
|
//this.thinkWalk();
|
|
this.thinkBored();
|
|
}
|
|
// if (this.bored_level > 4) {
|
|
// this.thinkBored();
|
|
// }
|
|
} else {
|
|
this.doAction();
|
|
//this.playSet(this.set, 0);
|
|
}
|
|
};
|
|
|
|
this.Blit = function() {
|
|
this.element.style.left = this.x+"px";
|
|
this.element.style.top = this.y+"px";
|
|
};
|
|
|
|
this.thinkNext = function() {
|
|
if (this.next_action == "climb") {
|
|
this.action = "climb";
|
|
this.action_duration = 2000;
|
|
this.is_acting = true;
|
|
}
|
|
this.next_action = '';
|
|
};
|
|
|
|
this.thinkWalk = function() {
|
|
var rand = Math.round(Math.random());
|
|
var duration = Math.round(Math.random() * (8000 - 2000) + 2000);
|
|
if (rand == 0) {
|
|
this.action = "walk_left";
|
|
this.action_duration = duration;
|
|
this.is_acting = true;
|
|
} else {
|
|
this.action = "walk_right";
|
|
this.action_duration = duration;
|
|
this.is_acting = true;
|
|
}
|
|
};
|
|
this.doAction = function() {
|
|
this.action_elapsed += 250;
|
|
|
|
if (!this.is_falling) {
|
|
if (this.action == "walk_left") {
|
|
this.playSet("walk_left_cycle");
|
|
this.Move(-(this.leg_strength), 0);
|
|
} else if (this.action == "walk_right") {
|
|
this.playSet("walk_right_cycle");
|
|
this.Move(this.leg_strength, 0);
|
|
} else if (this.action == "bored") {
|
|
this.playSet("bored_cycle");
|
|
} else if (this.action == "climb_right") {
|
|
this.playSet("climb_right_cycle");
|
|
this.Move(0, -(this.arm_strength+(this.leg_strength/2)));
|
|
} else if (this.action == "climb_left") {
|
|
this.playSet("climb_left_cycle");
|
|
this.Move(0, -(this.arm_strength+(this.leg_strength/2)));
|
|
} else if (this.action == "spawn") {
|
|
this.playSet("spawn_cycle");
|
|
} else if (this.action == "push_right") {
|
|
this.playSet("push_right_cycle");
|
|
this.Push((this.arm_strength/2)+(this.leg_strength/2), 0);
|
|
} else if (this.action =="push_left") {
|
|
this.playSet("push_left_cycle");
|
|
this.Push(-((this.arm_strength/2)+(this.leg_strength/2)), 0);
|
|
}
|
|
if (this.action_elapsed >= this.action_duration) {
|
|
this.is_acting = false;
|
|
this.last_action = this.action;
|
|
this.action = '';
|
|
this.action_elapsed = 0;
|
|
this.action_duration = 0;
|
|
|
|
if (this.next_action != '') {
|
|
this.action = this.next_action;
|
|
this.action_duration = this.next_action_duration;
|
|
this.next_action = '';
|
|
this.is_acting = true;
|
|
}
|
|
}
|
|
} else {
|
|
if (this.last_action == "climb_right") {
|
|
if (this.action == "walk_right") {
|
|
this.playSet("walk_right_cycle");
|
|
//this.Move((this.arm_stength+(this.leg_strength/2)), 0);
|
|
this.Move(2, 0);
|
|
}
|
|
} else if (this.last_action == "climb_left") {
|
|
if (this.action == "walk_left") {
|
|
this.playSet("walk_left_cycle");
|
|
//this.Move(-(this.arm_stength+(this.leg_strength/2)), 0);
|
|
this.Move(-2, 0);
|
|
}
|
|
}
|
|
if (this.action == "climb_right") {
|
|
this.playSet("climb_right_cycle");
|
|
//console.log(-(this.arm_strength+(this.leg_strength)));
|
|
//this.Move(0, -(this.arm_stength+(this.leg_strength/2)));
|
|
this.Move(0, -4);
|
|
} else if (this.action == "climb_left") {
|
|
this.playSet("climb_left_cycle");
|
|
//this.Move(0, -(this.arm_stength+(this.leg_strength/2)));
|
|
this.Move(0, -4);
|
|
} else if (this.action == "falling") {
|
|
this.playSet("falling_cycle");
|
|
} else if (this.action == "spawn") {
|
|
this.playSet("spawn_cycle");
|
|
}
|
|
if (this.action_elapsed >= this.action_duration) {
|
|
this.is_acting = false;
|
|
|
|
this.last_action = this.action;
|
|
|
|
this.action = '';
|
|
this.action_elapsed = 0;
|
|
this.action_duration = 0;
|
|
this.is_climbing = false;
|
|
|
|
if (this.next_action != '') {
|
|
this.action = this.next_action;
|
|
this.action_duration = this.next_action_duration;
|
|
this.next_action = '';
|
|
this.is_acting = true;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
this.Move = function(x, y) {
|
|
var x_collision = false;
|
|
var y_collision = false;
|
|
var move_return = this.MOVE_FAILURE;
|
|
var collision_check = {collision: false};
|
|
if ( (this.x+x > this.world.x && this.x+x+this.width < this.world.x+this.world.width) && (this.y+y > this.world.y && this.y+y+this.height < this.world.y+this.world.height) ) {
|
|
for (var i=0;i < this.surroundings.length;i++) {
|
|
if (this.surroundings[i].id != this.world_name) {
|
|
var collision_check = this.checkCollision(this.x+x, this.y+y, this.surroundings[i]);
|
|
if (collision_check.collision == true) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (!collision_check.collision) {
|
|
this.x += x;
|
|
this.y += y;
|
|
move_return = this.MOVE_SUCCESS;
|
|
} else {
|
|
if (collision_check.y < 0 && collision_check.y > -this.height/2) {
|
|
this.Move(x, y+(collision_check.y));
|
|
} else if (collision_check.y < 0 && collision_check.y > -(this.leg_strength+this.arm_strength)*this.height*2) {
|
|
var push_weight = 0;
|
|
// Climb!
|
|
push_weight += (this.width/(this.surroundings[i].width*16)) + (this.height/(this.surroundings[i].height*16));
|
|
var rand = Math.random();
|
|
if (rand > push_weight) { // climb
|
|
this.action_duration = (Math.abs(collision_check.y)/ (this.leg_strength/2 + this.arm_strength) )*200;
|
|
if (collision_check.x > -6) {
|
|
this.action = "climb_right";
|
|
this.next_action = "walk_right"
|
|
this.next_action_duration = 1000;
|
|
} else {
|
|
this.action = "climb_left";
|
|
this.next_action = "walk_left"
|
|
this.next_action_duration = 1000;
|
|
}
|
|
this.is_climbing = true;
|
|
} else { // push
|
|
this.action_duration = 1500;
|
|
if (collision_check.x > -6) {
|
|
this.action = "push_right";
|
|
} else {
|
|
this.action = "push_left";
|
|
}
|
|
}
|
|
|
|
} else {
|
|
this.action_duration = 0;
|
|
}
|
|
}
|
|
} else {
|
|
this.action_duration = 0;
|
|
}
|
|
return move_return;
|
|
};
|
|
this.Push = function(x, y) {
|
|
var x_collision = false;
|
|
var y_collision = false;
|
|
var move_return = this.MOVE_FAILURE;
|
|
if ( (this.x+x > this.world.x && this.x+x+this.width < this.world.x+this.world.width) && (this.y+y > this.world.y && this.y+y+this.height < this.world.y+this.world.height) ) {
|
|
for (var i=0;i < this.surroundings.length;i++) {
|
|
if (this.surroundings[i].id != this.world_name) {
|
|
var collision_check = this.checkCollision(this.x+x, this.y+y, this.surroundings[i]);
|
|
if (collision_check.collision == true) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (collision_check.collision) {
|
|
if (collision_check.x > -6) {
|
|
this.pushSurrounding(i, x, 0);
|
|
this.Move(x-1, 0);
|
|
} else {
|
|
this.pushSurrounding(i, x, 0);
|
|
this.Move(x-1, 0);
|
|
}
|
|
}
|
|
} else {
|
|
this.action_duration = 0;
|
|
}
|
|
return move_return;
|
|
};
|
|
this.pushSurrounding = function(id, x, y) {
|
|
this.surroundings[id].x += x;
|
|
this.surroundings[id].y += y;
|
|
this.surroundings[id].element.style.left = this.surroundings[id].x+"px";
|
|
//this.surroundings[id].element.style.left = parseInt(this.surroundings[id].element.style.left)+x+"px";
|
|
this.surroundings[id].element.style.top = this.surroundings[id].y+"px";
|
|
//this.surroundings[id].element.style.top = parseInt(this.surroundings[id].element.style.top)+y+"px";
|
|
};
|
|
|
|
|
|
this.doGravity = function() {
|
|
//this.push_y += 2;
|
|
if (this.Move(0, 3) == this.MOVE_SUCCESS) {
|
|
this.is_falling = true;
|
|
if (!this.is_climbing) {
|
|
// this.action = "falling";
|
|
// this.action_duration += 250;
|
|
}
|
|
} else {
|
|
this.is_falling = false;
|
|
if (this.action == "falling") {
|
|
this.action = '';
|
|
this.action_duration = '';
|
|
}
|
|
}
|
|
};
|
|
this.checkCollision = function(new_x, new_y, target) {
|
|
var collision_x = 0;
|
|
var collision_y = 0;
|
|
var collision = false;
|
|
var is_collision_x = false;
|
|
var is_collision_y = false;
|
|
if ((new_x+this.width) > target.x && new_x < target.x+target.width) {
|
|
is_collision_x = true;
|
|
}
|
|
collision_x = target.x - (new_x+this.width);
|
|
/*if ((new_x+this.width) <= target.x) {
|
|
collision_x = target.x - (new_x-this.width);
|
|
//} else if (new_x >= target.x+target.width) {
|
|
} else {
|
|
collision_x = (target.x+target.width) - new_x;
|
|
}*/
|
|
if (new_y+this.height > target.y && new_y < target.y+target.height) {
|
|
is_collision_y = true;
|
|
}
|
|
collision_y = target.y - (new_y+this.height);
|
|
|
|
/*if (new_y+this.height <= target.y) {
|
|
collision_y = target.y - (new_y+this.height);
|
|
//} else if (new_y >= target.y+target.height) {
|
|
} else {
|
|
collision_y = (target.y+target.height) - new_y;
|
|
}*/
|
|
//console.log(collision_x+"_"+collision_y);
|
|
if (is_collision_x && is_collision_y) {
|
|
collision = true;
|
|
}
|
|
return {collision: collision, collision_x: collision_x, collision_y: collision_y, x: collision_x, y: collision_y};
|
|
};
|
|
|
|
this.thinkBored = function() {
|
|
var duration = Math.round(Math.random() * (1000 - 4000) + 4000);
|
|
this.action = "bored";
|
|
this.action_duration = duration;
|
|
this.is_acting = true;
|
|
/*
|
|
if (this.last_set == "walk_left_cycle") {
|
|
if (this.last_frame == ktk.walker_data[this.last_set].length-1) {
|
|
this.playSet("walk_left_cycle", 1);
|
|
} else {
|
|
this.playSet("walk_left_cycle", 0);
|
|
}
|
|
} else {
|
|
this.playSet("walk_left_cycle");
|
|
}*/
|
|
};
|
|
|
|
this.buildSurroundings = function(target_div) {
|
|
target_div = (typeof target_div !== 'undefined' ? this.world_element : document.body);
|
|
|
|
this.elements_list = target_div.getElementsByTagName('*');
|
|
for (var i=0; i < this.elements_list.length; i++) {
|
|
if (this.elements_list[i].id !== this.world_name && this.elements_list[i].id !== this.element.id) {
|
|
var new_surrounding = ktk.newSurrounding(this.elements_list[i]);
|
|
if (new_surrounding != 1) {
|
|
this.surroundings.push(new_surrounding);
|
|
}
|
|
}
|
|
}
|
|
console.log(this.surroundings);
|
|
};
|
|
|
|
this.playSet = function(set, order) {
|
|
set = (typeof set !== 'undefined' ? set : this.set);
|
|
order = (typeof order !== 'undefined' ? order : this.order);
|
|
|
|
if (this.last_set == set) {
|
|
if (this.last_frame == ktk.walker_data[this.last_set].length-1) {
|
|
order = 1;
|
|
} else {
|
|
order = 0;
|
|
}
|
|
}
|
|
|
|
if (this.set != set) {
|
|
this.set = set;
|
|
this.frame = 0;
|
|
this.order = order;
|
|
this.is_playing = true;
|
|
} else {
|
|
if (order == 0) {
|
|
if (this.frame < ktk.walker_data[this.set].length-1) {
|
|
this.frame++;
|
|
this.setFrame(this.set, this.frame);
|
|
} else {
|
|
this.last_set = this.set;
|
|
this.last_frame = this.frame;
|
|
this.is_playing = false;
|
|
}
|
|
} else if (order == 1) {
|
|
if (this.frame > 0) {
|
|
this.frame--;
|
|
this.setFrame(this.set, this.frame);
|
|
} else {
|
|
this.last_set = this.set;
|
|
this.last_frame = this.frame;
|
|
this.is_playing = false;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
this.setFrame = function(set, number) {
|
|
if(ktk.walker_data[set]) {
|
|
if (ktk.walker_data[set][number]) {
|
|
this.set = set;
|
|
this.frame = number;
|
|
this.element.innerHTML = ktk.walker_data[set][number][0] +
|
|
'<br>' + ktk.walker_data[set][number][1] +
|
|
'<br>' + ktk.walker_data[set][number][2];
|
|
}
|
|
}
|
|
};
|
|
this.buildSurroundings(this.world_name);
|
|
this.setFrame("stand_cycle", 0);
|
|
this.Tick();
|
|
}
|