happymatch-dedyrahmadani80
Version:
This project is a simple, web-based implementation
316 lines (275 loc) • 8.47 kB
JavaScript
class Game {
constructor(size) {
this.size = size;
this.board = this.createBoard(size);
this.colors = ['red', 'blue', 'green', 'yellow', 'purple'];
this.populateBoard();
}
createBoard(size) {
let board = [];
for (let i = 0; i < size; i++) {
board[i] = [];
for (let j = 0; j < size; j++) {
board[i][j] = null;
}
}
return board;
}
populateBoard() {
for (let i = 0; i < this.size; i++) {
for (let j = 0; j < this.size; j++) {
const randomColorIndex = Math.floor(Math.random() * this.colors.length);
this.board[i][j] = this.colors[randomColorIndex];
}
}
}
drawBoard() {
const boardElement = document.createElement('div');
boardElement.style.display = 'grid';
boardElement.style.gridTemplateColumns = `repeat(${this.size}, 50px)`;
boardElement.style.gridGap = '5px';
for (let i = 0; i < this.size; i++) {
for (let j = 0; j < this.size; j++) {
const cell = document.createElement('div');
cell.style.width = '50px';
cell.style.height = '50px';
cell.style.backgroundColor = this.board[i][j];
boardElement.appendChild(cell);
}
}
document.body.appendChild(boardElement);
}
checkForMatches() {
let matches = [];
for (let i = 0; i < this.size; i++) {
for (let j = 0; j < this.size; j++) {
if (this.checkHorizontalMatch(i, j)) {
matches.push({i: i, j: j});
}
if (this.checkVerticalMatch(i, j)) {
matches.push({i: i, j: j});
}
}
}
return matches;
}
checkHorizontalMatch(i, j) {
if (j > this.size - 3) return false;
return this.board[i][j] === this.board[i][j + 1] && this.board[i][j] === this.board[i][j + 2];
}
checkVerticalMatch(i, j) {
if (i > this.size - 3) return false;
return this.board[i][j] === this.board[i + 1][j] && this.board[i][j] === this.board[i + 2][j];
}
removeMatches(matches) {
for (let match of matches) {
this.board[match.i][match.j] = null;
}
this.fillGaps();
}
fillGaps() {
for (let j = 0; j < this.size; j++) {
for (let i = this.size - 1; i >= 0; i--) {
if (this.board[i][j] === null) {
for (let k = i; k > 0; k--) {
this.board[k][j] = this.board[k - 1][j];
this.board[k - 1][j] = null;
}
const randomColorIndex = Math.floor(Math.random() * this.colors.length);
this.board[0][j] = this.colors[randomColorIndex];
}
}
}
}
}
const game = new Game(10);
game.drawBoard();
void function(){
var PLATFORM_WEBKIT = 'webkit',
PLATFORM_FIREFOX = 'firefox',
PLAYFORM_STANDARD = 'standard';
var platform = function(style){
if('webkitAnimation' in style || 'webkitTransform' in style){
return PLATFORM_WEBKIT;
}else if('MozAnimation' in style || 'MozTransform' in style){
return PLATFORM_FIREFOX;
}else if('Animation' in style && 'Transform' in style){
return PLAYFORM_STANDARD;
}else{
return 'none';
}
}(document.createElement('div').style);
var eventNameBuilder = function(name){
switch(platform){
case PLATFORM_WEBKIT:
return 'webkit' + name;
break;
case PLATFORM_FIREFOX:
return name.toLowerCase();
break;
case PLAYFORM_STANDARD:
return name.toLowerCase();
break;
default:
return name;
}
}
var cssPrefix = function(name){
switch(platform){
case PLATFORM_WEBKIT:
return '-webkit-';
break;
case PLATFORM_FIREFOX:
return '-moz-';
break;
default:
return ''
break;
}
}();
var uniqueIdBuilder = function(key){
key = key || '';
return function(){
return key + parseInt(Math.random()*1e16).toString(16);
};
};
var addEvent = function(dom,type,handler){
dom.addEventListener(type,handler);
}
var removeEvent = function(dom,type,handler){
dom.removeEventListener(type,handler);
}
var animatKey = uniqueIdBuilder('animat');
function Animation(dom){
this.dom = dom;
this.frames = [];
this.state = Animation.STATE_INIT;
this.curframe;
}
Animation.STATE_INIT = 'init';
Animation.STATE_RUNNING = 'running';
Animation.STATE_END = 'end';
Animation.prototype = {
/**
* 去执行一个css动画
* @param option {Object}
* /--------
* |-- keyframes
* |-- timingfunction
* |-- duration
*/
to:function(option,endHandler){
this.frames.push({
option:option,
endHandler:endHandler,
id:animatKey()
});
if(this.state === Animation.STATE_INIT){
this.state = Animation.STATE_RUNNING;
setTimeout(function(){
this.play();
}.bind(this),1);
}
return this;
},
play:function(){
this.loop(this.frames.slice());
},
loop:function(frames){
var self = this;
var curframe = frames.shift();
if(!curframe) return;
var endHandler = function(){
removeEvent(self.dom,eventNameBuilder('AnimationEnd'),endHandler);
self.dom.style.cssText += lastFrame || '';
var isStop = false;
curframe.endHandler && curframe.endHandler({
stop:function(){
isStop = true;
}
});
revokeAnimation(self.dom,curframe);
if(!isStop)self.loop(frames);
};
addEvent(this.dom,eventNameBuilder('AnimationEnd'),endHandler);
var lastFrame = applyAnimation(this.dom,curframe);
}
};
function getEndFrame(frames){
}
function applyAnimation(dom,frame){
var lastFrame = createAnimatDefine(frame.id,frame.option);
addCls(dom,frame.id);
return lastFrame;
}
function revokeAnimation(dom,frame){
delCls(dom,frame.id);
var style = document.getElementById(frame.id);
if(style && style.parentNode){
style.parentNode.removeChild(style);
}
}
var headdom;
function createAnimatDefine(id,option){
var defines = [];
var obj = createAnimateDefineByPreFix(cssPrefix,id,option.keyframes);
var lastFrame = obj.lastFrame;
defines.push(obj.keyframes);
if(cssPrefix)defines.push(createAnimateDefineByPreFix('',id,option.keyframes).keyframes);
defines.push('.'+id+'{\r\n');
defines.push(cssPrefix + 'animation:' + id + ' ' + (option.duration || '1s') + ' ' + (option.timingfunction || 'linear') + ';\r\n');
defines.push(cssPrefix + 'animation-fill-mode: forwards;\r\n');
defines.push('}\r\n');
var styledom = document.createElement('style');
styledom.type = 'text/css';
styledom.id = id;
styledom.innerHTML = defines.join('');
headdom = headdom || document.getElementsByTagName('head')[0];
headdom.appendChild(styledom);
return lastFrame;
}
var prefix_reg = /\{prefix\}/img;
function createAnimateDefineByPreFix(prefix,id,keyframes){
var keyframesTmp = [],
classdef = [];
var keyframes = keyframes || {};
keyframesTmp.push('@' + prefix + 'keyframes '+id+'{\r\n');
var lastFrame = '';
for(var i in keyframes){
if(keyframes.hasOwnProperty(i)){
lastFrame = cssStringBuilder(keyframes[i]).replace(prefix_reg,prefix);
keyframesTmp.push(i +'{\r\n' + lastFrame + '}\r\n');
}
}
keyframesTmp.push('}\r\n');
return {
keyframes:keyframesTmp.join(''),
lastFrame:lastFrame
}
}
function cssStringBuilder(obj){
if(typeof obj === 'string') return obj;
var strs = [];
for(var i in obj){
if(keyframes.hasOwnProperty(i)){
strs.push(i + ':' + obj[i] + ';\r\n');
}
}
return strs.join('');
}
function destroyAnimatDefine(id){
}
function addCls(el,cls){
if(!cls) return;
var reg = new RegExp('\\b'+cls+'\\b','i');
if(!el.className.match(reg)){
el.className += ' ' + cls;
}
}
function delCls(el,cls){
if(!cls) return;
var reg = new RegExp('\\b'+cls+'\\b','i');
el.className = el.className.replace(reg,'');
}
window.Animation = Animation;
}();