JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
(function() {
var App,
bind = function(fn, me) {
return function() {
return fn.apply(me, arguments);
};
};
App = (function() {
App.prototype.checkers = [];
App.prototype.targetColumn = 0;
App.prototype.columnValue = [0, 0, 0, 0, 0, 0, 0];
App.prototype.currentColor = "red";
App.prototype.resizing = false;
function App() {
this.render = bind(this.render, this);
this.onResize = bind(this.onResize, this);
this.dropChecker = bind(this.dropChecker, this);
this.onColumnClick = bind(this.onColumnClick, this);
this.onColumnOver = bind(this.onColumnOver, this);
this.onReset = bind(this.onReset, this);
this.getElements();
this.addListeners();
this.render();
this.makeChecker(this.currentColor);
}
App.prototype.getElements = function() {
this.board = document.querySelector(".board");
this.columns = this.board.getElementsByClassName("column");
this.checkerHolder = document.querySelector(".checkers");
return this.resetButton = document.querySelector(".reset");
};
App.prototype.addListeners = function() {
var column, i, j, len, ref;
window.addEventListener("resize", this.onResize);
this.resetButton.addEventListener("click", this.onReset);
i = 0;
ref = this.columns;
for (j = 0, len = ref.length; j < len; j++) {
column = ref[j];
column.setAttribute("data-num", i);
column.addEventListener("mousemove", this.onColumnOver);
column.addEventListener("click", this.onColumnClick);
i++;
}
return this.onResize();
};
App.prototype.onReset = function() {
var checker, j, len, ref;
console.log("resetting");
if (this.currentColor === "red") {
this.currentColor = "black";
} else {
this.currentColor = "red";
}
ref = this.checkers;
for (j = 0, len = ref.length; j < len; j++) {
checker = ref[j];
checker.parentNode.removeChild(checker);
}
this.checkers = [];
this.columnValue = [0, 0, 0, 0, 0, 0, 0];
return this.makeChecker(this.currentColor);
};
App.prototype.onColumnOver = function(e) {
return this.targetColumn = parseInt(e.target.getAttribute("data-num"));
};
App.prototype.onColumnClick = function(e) {
this.targetColumn = parseInt(e.target.getAttribute("data-num"));
return this.dropChecker();
};
App.prototype.dropChecker = function() {
var checker, j, len, ref, results;
ref = this.checkers;
results = [];
for (j = 0, len = ref.length; j < len; j++) {
checker = ref[j];
if (checker.state.active === true && this.columnValue[this.targetColumn] < 6) {
checker.state.x = this.bounds.width / 7 * checker.state.column;
checker.state.row = 5 - this.columnValue[this.targetColumn];
this.columnValue[this.targetColumn] ++;
checker.state.active = false;
if (this.currentColor === "red") {
this.currentColor = "black";
} else {
this.currentColor = "red";
}
results.push(this.makeChecker(this.currentColor));
} else {
results.push(void 0);
}
}
return results;
};
App.prototype.onResize = function() {
var s, style;
this.bounds = this.board.getBoundingClientRect();
s = this.bounds;
style = "top: " + s.top + "px; left:" + s.left + "px; width: " + s.width + "px; height: " + s.height + "px;";
this.resizing = true;
clearTimeout(this.resizeDebounce);
this.resizeDebounce = setTimeout((function(_this) {
return function() {
return _this.resizing = false;
};
})(this), 60);
return this.checkerHolder.setAttribute("style", style);
};
App.prototype.makeChecker = function(color) {
var checker;
checker = document.createElement("div");
checker.setAttribute("class", "checker " + color);
checker.state = {
initialized: false,
active: true,
row: -1.5,
column: 0,
x: 0,
y: 0
};
this.checkerHolder.appendChild(checker);
return this.checkers.push(checker);
};
App.prototype.render = function() {
requestAnimationFrame(this.render);
return this.updateCheckers();
};
App.prototype.updateCheckers = function() {
var checker, j, len, ref, results, targetX, targetY, u;
ref = this.checkers;
results = [];
for (j = 0, len = ref.length; j < len; j++) {
checker = ref[j];
if (checker.state.active === true) {
checker.state.column = this.targetColumn;
}
u = this.bounds.width / 7;
targetX = u * checker.state.column;
targetY = u * checker.state.row;
if (checker.state.initialized === true && this.resizing === false) {
checker.state.x = this.ease(checker.state.x, targetX);
if (Math.abs(checker.state.x - targetX) < u * 0.2) {
checker.state.y = this.ease(checker.state.y, targetY);
}
} else {
checker.state.initialized = true;
checker.state.x = targetX;
checker.state.y = targetY;
}
results.push(this.transform(checker, checker.state.x, checker.state.y));
}
return results;
};
App.prototype.ease = function(current, target) {
var diff;
diff = current - target;
if (Math.abs(diff) > 0.1) {
return current -= diff * 0.2;
} else {
return current = target;
}
};
App.prototype.transform = function(element, x, y) {
var j, len, prefix, prefixes, results;
prefixes = ["webkitTransform", "transform"];
results = [];
for (j = 0, len = prefixes.length; j < len; j++) {
prefix = prefixes[j];
results.push(element.style[prefix] = "translate( " + x + "px , " + y + "px)");
}
return results;
};
return App;
})();
window.game = new App();
}).call(this);