I am building Conway's Game of Life in JavaScript. The previous issue has been fixed.
........................................................................
Now it is saying: Cannot read property 'length' of undefined in 'for(var i =0; i< this.checkneighbours.length; i++)'. But i defined checkneighbours at the top as an array. do you know what the problem is here?
//object constructor
function cell(){
this.alive = Math.random() > 0.7;
this.neighbours = 0; //number of live neighbours
this.checkneighbours = [[-1,-1],[-1,0],[0,-1],[-1,1],[1,-1],[1,0],[0,1],[1,1]];
}
function GoL(size){
this.size = size;
this.grid = this.makeGrid(size);
};
GoL.prototype.makeGrid = function(size){
var grid = [];
for(var i=0; i<size; i++){
var row=[];
for(var j =0; j<size; j++){
row.push(new cell());
}
grid.push(row);
}
return grid;
};
GoL.prototype.drawGrid = function(){
for(var i=0;i<this.size;i++){
var row =this.grid[i];
var rowCell="";
for(var j=0;j<this.size;j++){
var cell = row[j];
if(cell.alive){
rowCell += "X|";
}else{
rowCell += " |";
}
}
console.log(rowCell);
}
};
GoL.prototype.underpopulation = function(ro,col){
var cell = this.grid[ro][col];
if(cell.neighbours <2){
return true;
}else{
return false;
}
};
GoL.prototype.overpopulation = function(ro,col){
var cell = this.grid[ro][col];
if(cell.neighbours >3){
return true;
}else{
return false;
}
};
GoL.prototype.backtolife = function(ro,col){
var cell = this.grid[ro][col];
if(cell.neighbours ===3 && !cell.alive){
return true;
}else{
return false;
}
};
GoL.prototype.update = function(ro,col){
var cell = this.grid[ro][col];
cell.num_of_neighbours = 0;
for(var i =0; i<this.checkneighbours.length; i++){
var checkneighbour = this.checkneighbours[i];
var neighbour1 = direction[0];
var neighbour2 = direction[1];
if(neighbour1>=0 && neighbour1 < this.size && neighbour2 >=0 && neighbour2 < this.size){
var currentneighbour = this.grid[ro + neighbour1][col+neighbour2];
if(currentneighbour.alive){
cell.num_of_neighbours++;
}
}
}
};
GoL.prototype.updateAll = function(){
for(var i=0; i<this.size;i++){
for(var j=0; j<this.size;j++){
this.update(i,j);
}
}
}
GoL.prototype.cellstatus = function(ro,col){
var cell = this.grid[ro][col];
if(this.underpopulation(ro,col) || this.overpopulation(ro,col)){
cell.alive = false;
}else if(this.backtolife(ro,col)){
cell.alive = true;
}
};
GoL.prototype.allcellstatus = function(ro,col){
for(var i=0; i<this.size;i++){
for(var j=0; j<this.size;j++){
this.cellstatus(i,j);
}
}
};
var gameoflife = new GoL(40);
var interval = setInterval(function(){
GoL.drawGrid();
GoL.updateAll();
GoL.allcellstatus();
},200);
I think what you mean to do is
var gameoflife = new GoL(40);
var interval = setInterval(function(){
gameoflife.drawGrid();
gameoflife.updateAll();
gameoflife.allcellstatus();
},200);
You should use the following syntax to call the functions:
var gameoflife = new GoL(40);
var interval = setInterval(function(){
gameoflife.drawGrid();
gameoflife.updateAll();
gameoflife.allcellstatus();
},200);
You're calling the method drawGrid on the class, rather than the instance gameoflife
You need to call those methods on your instance, rather than the class it's self:
var interval = setInterval(function(){
gameoflife.drawGrid();
gameoflife.updateAll();
gameoflife.allcellstatus();
},200);
Related
How do I modify the repeat loop function without it repeating the token variable in the function rowcount()?
function rowcount()
{
var token = getAccessToken();
var module = "sHistory";
var rows = 0;
var go = true;
var i = 1;
var data;
while (go) {
data = getRecordsByPage(i,200,token,module);
if (Number(data.info.count) < 200) {
go = false;
};
if ((i%10) == 0) {
go = false;
}
rows = Number(rows) + Number(data.info.count);
i++;
Logger.log(rows)
}
return rows
}
function repeatloop()
{
let counter = 0;
for(var i = 1; i <= 93; i++)
{
{
Utilities.sleep(10000);
Logger.log(i);
counter += rowcount();
Logger.log(counter);
}
}
return rowcount().rows;
}
What I am also trying to do is let the count continue because right now it goes in an increment of 2000, but I need it to continue like 200...400..600..800...1000...1200...1400...1600...1800...2000...2200. and it goes on until the loop stops.
You can make the token a global variable like this:
var token;
function rowcount()
{
var module = "sHistory";
var rows = 0;
var go = true;
var i = 1;
var data;
while (go) {
data = getRecordsByPage(i,200,token,module);
if (Number(data.info.count) < 200) {
go = false;
};
if ((i%10) == 0) {
go = false;
}
rows = Number(rows) + Number(data.info.count);
i++;
Logger.log(rows)
}
return rows
}
function repeatloop()
{
let counter = 0;
token = getAccessToken();
for(var i = 1; i <= 93; i++)
{
{
Utilities.sleep(10000);
Logger.log(i);
counter += rowcount();
Logger.log(counter);
}
}
return rowcount().rows;
}
Or did I understand you wrong?
I would pass the token as an optional parameter, insted to use GLOBAL variable:
function rowcount(_token = null)
{
let token;
if (_token) {token = _token;}
else {token = getAccessToken();}
var module = "sHistory";
var rows = 0;
var go = true;
var i = 1;
var data;
while (go) {
data = getRecordsByPage(i,200,token,module);
if (Number(data.info.count) < 200) {
go = false;
};
if ((i%10) == 0) {
go = false;
}
rows = Number(rows) + Number(data.info.count);
i++;
Logger.log(rows)
}
return rows
}
function repeatloop()
{
let token = getAccessToken();
let counter = 0;
for(var i = 1; i <= 93; i++)
{
{
Utilities.sleep(10000);
Logger.log(i);
counter += rowcount(token);
Logger.log(counter);
}
}
return rowcount(token).rows;
}
I am trying to find a specific class (profileCard) and then check if that class has a different class (followStatus) inside it. If it does have followStatus inside it, I want to click a button which is also inside the profileCard class. here is my code:
var profileCard = document.getElementsByClassName('ProfileCard');
var unfollowButtons = profileCard.getElementsByClassName('button-text');
var followStatus = profileCard.getElementsByClassName('FollowStatus');
for (var i = 0; i < profileCard.length; i++) {
if (followStatus[i] != null) {
unfollowButtons[i].click();
}
}
I want to use this function in Chrome simply pasting it into the console, but the code seemingly does nothing: the button is never clicked. Where is the error in my code and how can I fix that?
It's more convenient to use querySelector method here inside the loop over .profileCards elements:
var profileCards = document.querySelectorAll('.ProfileCard');
for (var i = 0; i < profileCards.length; i++) {
if (profileCards[i].querySelector('.FollowStatus')) {
var button = profileCards[i].querySelector('.button-text');
if (button) {
button.click();
}
}
}
Well i suggest programming some sort of Node selector or using http://jquery.com/.
Please note document.getElementsByClass name is not compatible in some browsers.
Here is a node selector i just programmed which solves that.
N$ = (function(){
if (!Array.prototype.indexOf)
{
Array.prototype.indexOf = function(elt /*, from*/)
{
var len = this.length >>> 0;
var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++)
{
if (from in this &&
this[from] === elt)
return from;
}
return -1;
};
}
if (!window.getComputedStyle) {//IE
window.getComputedStyle = function(el, pseudo) {
this.el = el;
this.getPropertyValue = function(prop) {
var re = /(\-([a-z]){1})/g;
if (prop == 'float') prop = 'styleFloat';
if (re.test(prop)) {
prop = prop.replace(re, function () {
return arguments[2].toUpperCase();
});
}
return el.currentStyle[prop] ? el.currentStyle[prop] : null;
}
return this;
}
}
var N$_CURRENT_EVENT_THIS = null;
var DOM_N$ = function(selector){
if(typeof selector == typeof ""){
this.selector = selector;
this.nodes = $prepare(this.selector);
this.win = window;
this.doc = document;
}else if(typeof selector == typeof {}){
this.selector = N$_CURRENT_EVENT_THIS.selector;
this.nodes = $prepare(this.selector);
this.win = window;
this.doc = document;
}
this.getSelector=function(){
return this.selector;
};
this.eachNode = function(func){
var that = this;
for (var i = 0; i < this.nodes.length; i++) {
N$_CURRENT_EVENT_THIS = that;
func(this.nodes[i]);
N$_CURRENT_EVENT_THIS = null;
};
};
this.css = function(attr, value){
N$_CURRENT_EVENT_THIS = this;
var attribute = "";
if(attr.indexOf('-') !== -1){
var split_attr = attr.split('-');
for (var i = 0; i < split_attr.length; i++) {
if(i != 0)
attribute += split_attr[i].charAt(0).toUpperCase() + split_attr[i].slice(1);
else
attribute += split_attr[i].charAt(0).toLowerCase() + split_attr[i].slice(1);
};
}else{
attribute = attr;
}
var properties = new Array();
for (var i = 0; i < this.nodes.length; i++) {
if(typeof value != 'undefined'){
this.nodes[i].style[attribute] = value;
}
properties.push(window.getComputedStyle(this.nodes[i], null).getPropertyValue(attr));
};
return properties;
};
this.addEvent = function(event_, func){
var that = this;
for (var i = 0; i < this.nodes.length; i++) {
var node = this.nodes[i];
var events = this.nodes[i].events || {};
if(node.addEventListener){
if((event_) in events){
node.removeEventListener(event_, events[event_], true);
var tmp___ = events[event_];
var tmp__ = function(){
this.bar = "hello";
N$_CURRENT_EVENT_THIS = that;
tmp___(node, event_);
func(node, event_);
N$_CURRENT_EVENT_THIS = null;
};
node.addEventListener(event_, tmp__, true);
events[event_] = tmp__;
}else{
var tmp__ = function(){
N$_CURRENT_EVENT_THIS = that;
func(node, event_);
N$_CURRENT_EVENT_THIS = null;
};
node.addEventListener(event_, tmp__, true);
events[event_] = tmp__;
}
}else if(node.attachEvent){
var ie_event = 'on' + event_;
if(event_ in events){
node.attachEvent(ie_event, function(){
N$_CURRENT_EVENT_THIS = that;
func(node, event_);
events[event_](node, event_);
N$_CURRENT_EVENT_THIS = null;
});
}else{
node.attachEvent(ie_event, function(){
N$_CURRENT_EVENT_THIS = that;
func(node, event_);
N$_CURRENT_EVENT_THIS = null;
});
}
events[event_] = func;
}
this.nodes[i].events = events;
}
};
this.removeEvent = function(event_){
N$_CURRENT_EVENT_THIS = this;
for (var i = 0; i < this.nodes.length; i++) {
var node = this.nodes[i];
var events = this.nodes[i].events || {};
if(node.removeEventListener){
if((event_) in events){
node.removeEventListener(event_, events[event_], true);
events[event_] = null;
}
}else if(node.detachEvent){
var ie_event = 'on' + event_;
if((event_) in events){
node.detachEvent(ie_event, events[event_]);
delete events[event_];
}
}
}
};
this.text = function(str){
N$_CURRENT_EVENT_THIS = this;
for (var i = 0; i < this.nodes.length; i++) {
var node = this.nodes[i];
node.innerHTML = '';
node.appendChild(document.createTextNode(str));
}
};
this.animate = function(func, from, to, speed){
var nodes = this.nodes;
var that = this;
for (var i = 0; i < this.nodes.length; i++) {
(function animate(func, from, to, speed, i){
if(from >= to){
N$_CURRENT_EVENT_THIS = that;
func(nodes[i], to);
N$_CURRENT_EVENT_THIS = null;
}else{
N$_CURRENT_EVENT_THIS = that;
func(nodes[i], from);
N$_CURRENT_EVENT_THIS = null;
setTimeout(
function(){
animate(func, from +1, to, speed, i);
}, speed
);
}
})(func, from, to, speed, i);
}
};
this.appendNode = function(tagname, innerHTML){
for (var i = 0; i < this.nodes.length; i++) {
var new_node = document.createElement(tagname);
new_node.innerHTML = innerHTML;
this.nodes[i].appendChild(new_node);
}
};
this.removeNode = function(){
for (var i = 0; i < this.nodes.length; i++) {
this.nodes[i].parentNode.removeChild(this.nodes[i]);
}
};
function $prepare(str){
str = str.replace(/(\s+>\s+)/g,'>');
str = str.replace(/(\s+)/g,' ');
var str_ = str;
var querys = str.split(/[\s\>]+/);
var querys_des = Array();
var ascender = new Array();
for (var i = 0; i < str_.length; i++) {
if(str_[i] == ">" || str_[i] == " "){
var tmp_ = (str_[i] == ">")? 'next_child' : 'ascended';
ascender.push( tmp_);
}
};
var recognizes = new Array();
for (var i = 0; i < querys.length; i++) {
var asc_child = null;
asc_child = ascender[i-1];
var tmp_ = {
"selector": querys[i],
"i":i
};
recognizes[i] = recognize(querys[i]);
if(i != 0){
tmp_["asc_child"] = asc_child;
}else{
tmp_["base_selector"] = true;
}
querys_des.push(tmp_);
};
return $select(querys_des, recognizes);
}
function $select(querys_des, recognizes, parent_){
var parents = parent_ || null;
for (var i = 0; i < querys_des.length; i++) {
if('base_selector' in querys_des[i]){
parents = recognizes[querys_des[i]['i']];
}else if('asc_child' in querys_des[i]){
var cur_children = recognizes[querys_des[i]['i']];
if(querys_des[i]['asc_child'] == 'next_child'){
var compatible = compatible_children(parents, cur_children, querys_des[i]['asc_child']);
parents = compatible;
}else if(querys_des[i]['asc_child'] == 'ascended'){
var compatible = compatible_children(parents, cur_children, querys_des[i]['asc_child']);
parents = compatible;
}
}
};
return parents;
}
function compatible_children(parents, children, type){
var ret = new Array();
for (var a = 0; a < parents.length; a++) {
for (var b = 0; b < children.length; b++) {
if(type == 'next_child'){
if(parents[a] == children[b].parentNode){
if(ret.indexOf(children[b]) == -1)
ret.push(children[b]);
}
}else if(type == 'ascended'){
if(isin(parents[a], children[b])){
if(ret.indexOf(children[b]) == -1)
ret.push(children[b]);
}
}
}
}
return ret;
}
function isin(parent, child){
var child_ = child;
var ret = new Array();
while((child_ = child_.parentNode) && child_ != document.body){
if(parent == child_){
return true;
}
}
return false;
}
function recognize(str){
var identifier = new Array();
var id_ = false;
var class_ = false;
var dom_ = false;
if(str.indexOf("#") >= 0){
id_ = true;
var tmp = str.split("#")[1];
if(str.indexOf(".") >= 0){
identifier['ID'] = tmp.split(".")[0];
}else{
identifier['ID'] = tmp;
}
}
if(str.indexOf(".") >= 0){
class_ = true;
var tmp = str.split(".")[1];
if(str.indexOf("#") >= 0){
identifier['CLASS'] = tmp.split("#")[0];
}else{
identifier['CLASS'] = tmp;
}
}
if(id_ && class_){
if(str.indexOf("#") < str.indexOf(".")){
var tmp = str.split("#")[0];
if(tmp.length > 0){
dom_ = true;
identifier['DOM'] = tmp;
}
}else{
var tmp = str.split(".")[0];
if(tmp.length > 0){
dom_ = true;
identifier['DOM'] = tmp;
}
}
}else if(id_){
var tmp = str.split("#")[0];
if(tmp.length > 0){
dom_ = true;
identifier['DOM'] = tmp;
}
}else if(class_){
var tmp = str.split(".")[0];
if(tmp.length > 0){
dom_ = true;
identifier['DOM'] = tmp;
}
}else{
if(str.length > 0){
dom_ = true;
identifier['DOM'] = str;
}
}
var x;
if(class_){
if(typeof document.getElementsByClassName !== 'function') {//Old browsers
x = document.body.getElementsByTagName("*");
}else{
x = document.getElementsByClassName(identifier['CLASS']);
}
}else if(dom_){
x = document.getElementsByTagName(identifier['DOM']);
}else if(id_){
x = document.body.getElementsByTagName("*");
for (var i = 0; i < x.length; i++) {
if(x[i].getAttribute("id") != identifier['ID']){
delete x[i];
}
};
}
var elements = new Array();
for (var i = 0; i < x.length; i++) {
if(id_ && class_){
if(x[i].getAttribute("id") == identifier["ID"] && x[i].getAttribute("class") == identifier["CLASS"]){
if(dom_){
if(x[i].tagName.toLowerCase() == identifier['DOM'].toLowerCase()){
elements.push(x[i]);
}
}else{
elements.push(x[i]);
}
}
}else if(id_){
if(x[i].getAttribute("id") == identifier["ID"]){
if(dom_){
if(x[i].tagName.toLowerCase() == identifier['DOM'].toLowerCase()){
elements.push(x[i]);
}
}else{
elements.push(x[i]);
}
}
}else if(class_){
if(x[i].getAttribute("class") == identifier["CLASS"]){
if(dom_){
if(x[i].tagName.toLowerCase() == identifier['DOM'].toLowerCase()){
elements.push(x[i]);
}
}else{
elements.push(x[i]);
}
}
}else{
if(dom_){
if(x[i].tagName.toLowerCase() == identifier['DOM'].toLowerCase()){
elements.push(x[i]);
}
}else{
elements.push(x[i]);
}
}
};
return elements;
}
}
var selectors = new Array();
return function(selector){
var N$_new = new DOM_N$(selector);
var N$_ = null;
if(selectors.length > 0){
for (var i = selectors.length - 1; i >= 0; i--) {
if(selectors[i].selector == selector){
var not_in = new Array();
for (var b = N$_new.nodes.length - 1; b >= 0; b--) {
if(selectors[i].nodes.indexOf(N$_new.nodes[b]) == -1){
not_in.push(N$_new.nodes[b]);
}
};
for (var a = not_in.length - 1; a >= 0; a--) {
if(selectors[i].nodes.indexOf(not_in[a]) == -1){
selectors[i].nodes.push(not_in[a]);
}
};
N$_ = selectors[i];
break;
}else{
N$_ = N$_new;
/*
if(N$_.nodes.length > 0){
selectors.push(N$_);
}*/
}
};
}else{
N$_ = N$_new;
if(N$_.nodes.length > 0){
selectors.push(N$_);
}
}
return N$_;
};
})();
use with:
N$('.ProfileCard .FollowStatus').addEvent('click', function(node_, event_){
//Do something.
//node_ is a native Node
});
Map.prototype.updateMap = function (vehicles) {
nextVehicle:
for (var i = 0; i < vehicles.length; i++) {
for (var j = 0; j < this.oldVehicles.length; j++) {
var vehicle = vehicles[i];
var oldVehicle = this.oldVehicles[j];
if (vehicle.registration == oldVehicle.registration) {
oldVehicle.getPosition(function(latLng) {
if (vehicle.latitude != oldVehicle.lat) {
var newPos = new plugin.google.maps.LatLng(vehicle.latitude, vehicle.longitude);
oldVehicle.setPosition(newPos);
}
continue nextVehicle;
});
}
}
}
};
The code above does not work. I have a feeling this is to do with scope, I can't reach the nextVehicle label from inside the oldVehicle.getPosition method. How can I get around this?
Separate the matching logic from the update logic.
Map.prototype.updateMap = function (vehicles) {
// Only need to look up array lengths once
var vehiclesLength = vehicles.length,
oldVehiclesLength = this.oldVehicles.length;
for (var i = 0; i < vehiclesLength; i++) {
var vehicle = vehicles[i];
var oldVehicle = null;
// Find oldVehicle
for (var j = 0; j < oldVehiclesLength; j++) {
if (vehicle.registration == oldVehicle[j].registration) {
oldVehicle = oldVehicles[j];
break;
}
}
// Check for update if found
if (oldVehicle){
// Create closure for async callbacks
(function(oldV, lat,lng){
oldV.getPosition(function(latLng) {
if (lat != oldV.lat) {
var newPos = new plugin.google.maps.LatLng(lat,lng);
oldV.setPosition(newPos);
}
});
})(oldVehicle, vehicle.latitude, vehicle.longitude);
}
}
};
Just move the continue nextVehicle; line from inside the callback to immediately following the call to oldVehicle.getPosition(...):
Map.prototype.updateMap = function (vehicles) {
nextVehicle:
for (var i = 0; i < vehicles.length; i++) {
for (var j = 0; j < this.oldVehicles.length; j++) {
var vehicle = vehicles[i];
var oldVehicle = this.oldVehicles[j];
if (vehicle.registration == oldVehicle.registration) {
oldVehicle.getPosition(function(latLng) {
if (vehicle.latitude != oldVehicle.lat) {
var newPos = new plugin.google.maps.LatLng(vehicle.latitude, vehicle.longitude);
oldVehicle.setPosition(newPos);
}
});
continue nextVehicle;
}
}
}
};
This assumes the call to getPosition is a synchronous operation.
Edit:
Now if getPosition is asynchronous, you will need to use an asynchronous loop:
Something along this line might do the trick:
Map.prototype.updateMap = function (vehicles) {
var i = 0, j = -1, self = this;
var updatePosition = function() {
j++;
if (j == self.oldVehicles.length) {
j = 0;
i++;
}
if (i === vehicles.length) {
return; // We're done
}
var vehicle = vehicles[i];
var oldVehicle = self.oldVehicles[j];
if (vehicle.registration !== oldVehicle.registration) {
updatePosition();
}
else {
oldVehicle.getPosition(function(latLng) {
if (vehicle.latitude != oldVehicle.lat) {
var newPos = new plugin.google.maps.LatLng(vehicle.latitude, vehicle.longitude);
oldVehicle.setPosition(newPos);
updatePosition();
}
});
}
};
updatePosition();
};
I have a create a list using javascript and at the end I have an iterator that goes through the list and displays the contents. Unfortunately my iterator goes into an infinite loop and I can't debug it.
This is the code -If you run the iterator your browser will crush - every other functions seems to work well.
function List(){
this.listSize = 0;
this.pos = 0;
this.dataStore = [];
this.clearList = clear;
this.find = find;
this.toString = toString;
this.insert = insert;
this.append = append;
this.remove = remove;
this.front = front;
this.end = end;
this.prev = prev;
this.next = next;
this.length = length;
this.currPos = currPos;
this.moveTo = moveTo;
this.getElement = getElement;
this.length = length;
this.contains = contains;
}
function append(element){
this.dataStore[this.listSize++]=element;
}
function find(element){
for(var i=0;i<this.dataStore.length; ++i){
if(this.dataStore[i]==element){
return i;
}
}
return -1;
}
function remove(element){
var foundAt = this.find(element);
if(foundAt > -1){
this.dataStore.splice(foundAt,1);
--this.listSize;
return true;
}
return false;
}
function length(){
return this.listSize;
}
function toString(){
return this.dataStore;
}
function insert(element, after){
var insertPos = this.find(after);
if(insertPos > -1){
this.dataStore.splice(insertPos+1,0,element);
++this.listSize;
return true;
}
return false;
}
function clear(){
delete this.dataStore;
this.dataStore = [];
this.listSize = this.pos = 0;
}
function contains(element){
for(var i = 0; i < this.dataStore.length; ++i){
if(this.dataStore[i] == elemen){
return true;
}
}
return false
}
function front(){
this.pos = 0;
}
function end(){
this.pos = this.listSize-1;
}
function prev(){
if(this.pos > 0){
--this.pos;
}
}
function next(){
if(this.pos < this.listSize -1){
++this.pos;
}
}
function currPos(){
return this.pos;
}
function moveTo(position){
this.pos = position;
}
function getElement(){
return this.dataStore[this.pos];
}
var names = new List();
names.append("Clayton");
names.append("Raymond");
names.append("Cynthia");
names.append("Jennifer");
names.append("Bryan");
names.append("Danny");
names.front();
console.log(names.getElement());
names.next();
console.log(names.getElement());
names.next();
names.next();
names.prev();
console.log(names.getElement());
//iterator starts here
for(names.front(); names.currPos() < names.length(); names.next()){
console.log(names.getElement());
}
The for loop terminates when pos >= listSize. But next() will not increment pos unless pos < listSize - 1. Once pos == listSize - 1, next() will not increment pos. So the maximum value of pos is listSize - 1. Therefore the loop will never terminate.
Checkout this demo/game i am building http://awebdeveloper.github.io/runners/
I wish to know when will all the players finish running. The Game class needs to know when all the player stop and who came first.
My question is is there a way to inform back the calling class when each of the animate finish after all the settimeout
Player Class
function Players(ele, ptimeout)
{
this.movePositions = [0, 40, 80, 120],
this.moveBy = 5
this.el = ele;
this.i = 0;
this.stop = 1;
this.timeout = ptimeout;
this.position = 0;
this.animate = function(){
/* Stop if stopped */
playerPosition = this.el.getBoundingClientRect();
if(this.stop || playerPosition.left > (racetrack.offsetWidth - 30)){
this.el.style.backgroundPosition = '120px 0px';
return ;
}
playerPosition = this.el.getBoundingClientRect();
if(this.stop || playerPosition.left > (racetrack.offsetWidth - 30)){
this.el.style.backgroundPosition = '120px 0px';
return ;
}
/* Prepare Next Move */
setTimeout(function(_this){
if(_this.i < _this.movePositions.length ){
_this.i ++;
}
else{
_this.i = 0;
}
_this.move();
_this.animate();
},this.timeout,this);
};
this.play = function(){
if(this.stop === 1){
this.stop = 0;
this.animate();
}
};
this.move = function(to,positionIndex){
this.position = to;
this.el.style.backgroundPosition = '-'+this.movePositions[positionIndex]+'px 0px';
this.el.style[getSupportedPropertyName('transform')] = 'translate('+to+'px)';
}
}
Game Class
function Game(noOfPlayers){
var track_tmpl = '<div class="track"><div id="player{{ x }}" class="runner"></div></div>';
this.noOfPlayers = noOfPlayers;
this.players = new Array();
for (var i = 0; i < this.noOfPlayers ; i++){
var timeout = 120 + getRandomInt(1, (this.noOfPlayers*2));
racetrack.appendChild(createNode(track_tmpl.replace('{{ x }}', i)));
this.players.push(new Players(document.getElementById('player' + i), timeout));
}
this.play = function(){
for (var i = 0; i < this.noOfPlayers; i++){
this.players[i].play();
}
};
}
on Player.play pass the this argument, to call from Person a function from Game.
So you will have a code like this
this.play = function(){
for (var i = 0; i < this.noOfPlayers; i++){
this.players[i].play(this);
}
};
then on Player modify the code like this
this.play = function(game){
if(this.stop === 1){
this.stop = 0;
this.animate(game);
}
};
after on method animate call the game.playerFinished(Player)
on Game class write a method
var i = 0;
this.playerFinished = function(player) {
console.log(player.name + " finished on position " + (i++));
}
where player.name a name you give on players class