html5 掉落游戏,HTML5 圆球掉落填充圆孔面板小游戏

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);