Pair Game

Developer
Alexandre Masy
Size
5,662 Kb
Views
28,336
  1. Pair Game Previews
  2. Pair Game HTML Codes
  3. Pair Game CSS Codes
  4. Pair Game JS Codes

How do I make an pair game?

Simple game where you have to find the pairs. This is the base for a multiplayer game (2x2) where you have to beat the other one. . What is a pair game? How do you make a pair game? This script and codes were developed by Alexandre Masy on 01 October 2022, Saturday.

Pair Game Previews
IQ Test

Pair Game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pair Game</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<article id="game"> <nav id="debug"> <ul> <li> <a href="#" data-level="0">1</a></li> <li> <a href="#" data-level="1">2</a></li> <li> <a href="#" data-level="2">3</a></li> <li> <a href="#" data-level="3">4</a></li> <li> <a href="#" data-level="4">5</a></li> </ul> </nav> <div class="board" id="board"></div>
</article> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pair Game - Script Codes CSS Codes

#debug { display: none;
}
#debug ul { list-style: none; padding: 0px;
}
#debug ul li { display: inline-block;
}
#debug ul li a { color: white; text-decoration: none; padding: 0px 15px;
}
html, body { background: #2F3040;
}
#game { display: block; max-width: 375px; height: 100%; margin: 30px auto; padding: 10px; border: 1px solid #292A39;
}
#game .board { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
#game .board .board__item { position: relative; background: #292A39; margin: 1px 1px; border-radius: 5px; cursor: pointer;
}
#game .board .board__item:after { content: ""; display: block; width: 60%; height: 60%; margin: auto; border-radius: 100%; position: absolute; top: 20%; left: 20%; z-index: 1; background: currentColor; -webkit-transition: width .3s, height .3s, top .3s, left .3s, opacity .3s; transition: width .3s, height .3s, top .3s, left .3s, opacity .3s;
}
#game .board .board__item:hover:after { width: 64%; height: 64%; top: 18%; left: 18%;
}
#game .board .board__item.board__item--disabled { opacity: .2; pointer-events: none;
}
#game .board.board--two .board__item { width: calc(50% - 2px); padding-top: calc(50% - 2px);
}
#game .board.board--three .board__item { width: calc(33.33333% - 2px); padding-top: calc(33.33333% - 2px);
}
#game .board.board--four .board__item { width: calc(25% - 2px); padding-top: calc(25% - 2px);
}
#game .board.board--five .board__item { width: calc(20% - 2px); padding-top: calc(20% - 2px);
}
#game .board.board--six .board__item { width: calc(16.66667% - 2px); padding-top: calc(16.66667% - 2px);
}
#game .board.board--seven .board__item { width: calc(14.28571% - 2px); padding-top: calc(14.28571% - 2px);
}
#game .board .board__item--red { color: #E61111;
}
#game .board .board__item--red.board__item--active { background: #5e0000;
}
#game .board .board__item--green { color: #52E612;
}
#game .board .board__item--green.board__item--active { background: #1d5f00;
}
#game .board .board__item--yellow { color: #E6D811;
}
#game .board .board__item--yellow.board__item--active { background: #5e5800;
}
#game .board .board__item--blue { color: #11C6E6;
}
#game .board .board__item--blue.board__item--active { background: #00505e;
}
#game .board .board__item--purple { color: #A811E6;
}
#game .board .board__item--purple.board__item--active { background: #43005e;
}
#game .board .board__item--pink { color: #E6118D;
}
#game .board .board__item--pink.board__item--active { background: #5e0037;
}

Pair Game - Script Codes JS Codes

window.lobby = {};
///////////////////////////////////////////////////////////
/** * BoardItem * Create a board item to play with **/
(function(window)
{ /** * A board item **/ function BoardItem() { this.view = ''; this.init(); } var p = BoardItem.prototype; /** * Init the board item **/ p.init = function() { this.container = jQuery('#board'); this.view = jQuery(this.getDom()).appendTo(this.container); }; /** * Define the current color * * @param value String **/ p.setColor = function (value) { if (this.color == value) return; this.color = value; this.view.addClass( 'board__item\-\-'+this.color.className ); } /** * Toggle the board item **/ p.toggle = function() { if (this.active) this.deactivate(); else this.activate(); }; /** * Activate the board item **/ p.activate = function() { if (this.active) return; this.active = true; this.view.addClass('board__item--active'); }; /** * Deactivate the board item **/ p.deactivate = function() { if (!this.active) return; this.active = false; this.view.removeClass('board__item--active'); }; /** * Disable the item **/ p.disable = function() { this.view.removeClass('board__item--active'); this.view.addClass('board__item--disabled'); } /** * Create the dom for the class **/ p.getDom = function() { return '<div class="board__item"></div>'; }; window.lobby.BoardItem = BoardItem;
})(window);
///////////////////////////////////////////////////////////
(function(window)
{ function Color( className, key ) { this.className = className; this.key = key; } Color.blue = new Color('blue'); Color.green = new Color('green'); Color.pink = new Color('pink'); Color.purple = new Color('purple'); Color.red = new Color('red'); Color.yellow = new Color('yellow'); Color.all = [Color.blue, Color.green, Color.pink, Color.purple, Color.red, Color.yellow ]; /** * Return a random color * * @return Color **/ Color.random = function() { return Color.all[ Math.random()*Color.all.length |0 ]; } window.lobby.Color = Color;
})(window);
///////////////////////////////////////////////////////////
/** * Level * Contains the level definitions **/
(function(window)
{ function Level( className, cols, rows ) { this.className = className; this.cols = cols; this.rows = rows; } Level.first = new Level('board--two', 2, 2); Level.second = new Level('board--three', 3, 2); Level.third = new Level('board--four', 4, 4); Level.fourth = new Level('board--six', 6, 6); Level.five = new Level('board--seven', 7, 8); Level.all = [Level.first, Level.second, Level.third, Level.fourth, Level.five]; Level.getClasses = function() { var ret = ''; Level.all.forEach( function(e, i) { ret += e.className + ' '; }); return ret; } /** * Return a level based on it's index * * @param index int * @return Level **/ Level.getByIndex = function (index) { return Level.all[index]; } window.lobby.Level = Level;
})(window);
///////////////////////////////////////////////////////////
/** * Board * Manage the board **/
(function()
{ /** * Board **/ function Board() { this.view = jQuery("#board"); this.init(); } /** * Prototype **/ var p = Board.prototype; /** * Init the board **/ p.init = function() { this.levels = window.lobby.Level.all; this.view.on('click', onBoardClick.bind(this)); this.setCurrentLevel( this.levels[0] ); }; /** * Toggle an element * * @param item BoardItem **/ p.toggle = function( item ) { var index = this.children.indexOf( item ); item.toggle(); this.activated.push( item ); if ( this.activated.length >= 2 ) { var c = this.activated[0].color; var valid = this.activated.every( function(e, i){ return e.color == c; } ); if ( valid ) this.activated.forEach( function(e, i){ e.disable(); this.disabled.push(e) }, this ); else this.activated.forEach( function(e, i){ e.deactivate() }, this ); this.activated = []; if ( this.disabled.length >= this.children.length ) this.nextLevel(); } } /** * Define the current level * * @parm value Number **/ p.setCurrentLevel = function( value ) { if (value == this.level) return; this.level = value; var qty = this.level.cols * this.level.rows; // reset & empty the container this.view.removeClass( window.lobby.Level.getClasses() ); this.view.empty(); this.children = []; this.disabled = []; this.activated = []; // set the view with the proper level this.view.addClass( this.level.className ); // determine the pairs this.matrix = this.getNewMatrix( this.level ); this.matrix.forEach( function(e, i) { var child = new lobby.BoardItem(); child.setColor( e ); this.children.push( child ); }.bind(this)); }; /** * Display the next level **/ p.nextLevel = function() { var i = this.levels.indexOf( this.level ); var n = i + 1 < this.levels.length ? i+1 : 0; var l = this.levels[n]; this.setCurrentLevel(l); } /** * Generate a new color matrix for the given level * * @param level Level * @return Array **/ p.getNewMatrix = function( level ) { var ret = []; var cols = level.cols; var rows = level.rows; var qty = (cols*rows); var i = 0; while (i++ < (qty>>1)) { color = lobby.Color.random(); ret.push( color, color ); } return shuffleArray(ret); } /** * Find the baord item associated with a dom element * * @param el * @return BoardItem **/ p.getBoardItemByDomElement = function( el ) { var ret = null; this.children.forEach(function(e, i) { if ( e.view[0] == el[0] ) { ret = e; } }); return ret; } /** * Randomize array element order in-place. * Using Durstenfeld shuffle algorithm. */ function shuffleArray(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } return array; } /** * Click on the board * * @param event MouseEvent **/ function onBoardClick(event) { var el = jQuery(event.target); if (!el.hasClass('board__item')) return; this.toggle( this.getBoardItemByDomElement(el) ); } window.lobby.Board = Board;
})(window);
var board = new lobby.Board();
jQuery('#debug a').on('click', function(event)
{ var t = jQuery(event.currentTarget); var i = t.attr('data-level'); board.setCurrentLevel( lobby.Level.getByIndex(i) );
});
Pair Game - Script Codes
Pair Game - Script Codes
Home Page Home
Developer Alexandre Masy
Username alexandremasy
Uploaded October 01, 2022
Rating 3
Size 5,662 Kb
Views 28,336
Do you need developer help for Pair Game?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alexandre Masy (alexandremasy) Script Codes
Name
A Pen by Alexandre Masy
Direction-icon
Conditional Library Loading
A Type Scale
Tiles - Triangles
Yp-loader
Blink
Ideation-icon
Activate Button
Bullet Loader
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!