BEJEWELED GAME ADDED

Games/Bejeweled/README.md

@@ -0,0 +1,30 @@
+# **Game_Name**
+
+## Bejeweled
+
+<br>
+
+## **Description 📃**
+
+<!-- add your game description here  -->
+
+- Bejeweled is a puzzle game where the player's objective is to swap adjacent gems in a grid to create matches of three or more identical gems. When a match is made, those gems are removed from the grid, and new gems fall from the top to fill the empty spaces.
+
+## **functionalities 🎮**
+
+<!-- add functionalities over here -->
+
+- At the beginning of the game, the grid is checked for any existing matches. If there are any matches, those gems are removed, and new gems fall from the top to fill the empty spaces.
+  <br>
+
+## **How to play? 🕹️**
+
+<!-- add the steps how to play games -->
+
+- The player can select two adjacent gems to swap their positions. The selected gems are checked for a valid move, meaning the swap would result in a match. If it's a valid move, the gems are swapped, and the grid is checked for matches.
+  The grid is scanned for matches after every valid move. Matches can be horizontal or vertical. If a match is found, the matched gems are removed from the grid, and new gems fall to fill the empty spaces.
+  Points are awarded to the player based on the number of gems cleared in each match. Bonus points can be given for creating special combinations or making consecutive matches.
+
+<br>
+
+<br>

Games/Bejeweled/css/game.css

@@ -0,0 +1,130 @@
+@charset "UTF-8";
+
+#game_content{
+	width: 750px;
+	height: 520px;
+	margin: auto;
+	background-color: rgba(51, 51, 85, 0.4);
+	border: 3px solid rgba(34, 34, 238, 0.4);
+	border-top: 15px solid rgba(34, 34, 238, 0.4);
+	border-radius: 5px;
+}
+
+#grid{
+	position: relative;
+	width: 525px;
+	height: 525px;
+	background: url('../images/grid.png') rgba(32, 32, 32, 0.4);
+	background-repeat: no-repeat;
+}
+
+#player_info{
+	position: relative;
+	float: right;
+	top: 60px;
+	width: 230px;
+	text-align: center;
+}
+
+#player_info p, #game_level{
+	font-size: 18px;
+	margin-left: 30px;
+	color: #226622;
+}
+
+#total_score, #level{
+	padding: 70px 0 20px 0;
+	margin-left: 30px;
+	margin-top: -70px;
+	font-size: 20px;
+	height: 130px;
+	font-weight: bold;
+	color: #FFF;
+	background-image: url('../images/rose.png');
+	background-repeat: no-repeat;
+	background-position: top center;
+}
+
+#total_score{
+	padding-top: 52px;
+}
+
+#goal_score{
+	font-size: 14px;
+}
+
+#level{
+	margin-bottom: -60px;
+}
+
+#level_text{
+	margin-top: 80px;
+}
+
+#time_gauge{
+	position: absolute;
+	border-radius: 20px;
+	left: 30px;
+	top: -10px;
+	width: 15px;
+	height: 400px;
+	background-color: #666;
+}
+
+#current_gauge{
+	position: absolute;
+	border-radius: 20px;
+	bottom: 0px;
+	left: 2px;
+	width: 11px;
+	height: 100%;
+	background-color: #00F000;
+}
+
+.score_gain{
+	position: absolute;
+	left: 112px;
+	font-size: 15px;
+	font-weight: bold;
+	color: #222;
+}
+
+.gem, .bomb{
+	position: absolute;
+	width: 60px;
+	height: 60px;
+	background-position: center center;
+	background-repeat: no-repeat;
+}
+
+#content button{
+	cursor:pointer;
+	height: 30px;
+	margin: 0px -5px 15px 0px;
+	padding: 0 9px 0 9px;
+}
+
+#content button:hover{
+	border-color: #999;
+	-o-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
+	-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
+	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+#content button:active{
+	border-color: #444;
+}
+
+#player_info button{
+	cursor: pointer;
+	margin-left: 10px;
+	border-radius: 2px;
+	-moz-border-radius: 2px;
+	-webkit-border-radius: 2px;
+	border: 3px solid rgba(68 ,68, 68, 1);
+	background-color: rgba(238, 34, 34, 0.6);
+	font-size: 10pt;
+	font-family: 'Electrolize', 'Segoe UI', Helvetica, Arial, 'Trebuchet MS', sans-serif;
+	color: #FFF;
+}

Games/Bejeweled/css/screen.css

@@ -0,0 +1,72 @@
+@charset "UTF-8";
+
+html {
+	position: relative;
+	height: 100%;
+}
+
+body{
+	position: relative;
+	margin: 0;
+	padding: 0;
+	height: 100%;
+	background: #000000;
+	font-family: 'Electrolize', 'Segoe UI', Helvetica, Arial, 'Trebuchet MS', sans-serif;
+	font-size: 14px;
+	text-align: justify;
+}
+
+#content{
+	position: relative;
+	width: 1000px;
+	min-height: 700px;
+	margin: auto;
+	background-image: url('../images/background_hover.png'), url('../images/background1.jpg');
+	background-repeat: no-repeat;
+	color: #FFFFFF;
+}
+
+#site_content, #rules_content{
+	padding: 50px;
+	font-size: 16px;
+	color: #DEDEDE;
+}
+a {
+	text-decoration: none;
+	color: #000000;
+}
+
+header{
+	padding-bottom: 30px;
+	position: relative;
+	z-index: 30;
+	background-color: #000000;
+}
+
+nav{
+	background-color: #111122;
+	border-width: 0px 2px 2px 2px;
+	border-color: #CCCCCC;
+	border-style: solid;
+	border-radius: 20px;
+}
+
+nav a{
+	display: inline-block;
+	padding: 10px 20px 15px 20px;
+	color: #FFFFFF;
+	font-weight: bold;
+}
+
+nav a.current_menu{
+	background-color: rgba(200, 200, 200, 0.4);
+}
+
+nav a:first-child{
+	border-top-left-radius: 20px;
+	-webkit-border-top-left-radius: 20px;
+	-moz-border-radius-topleft: 20px;
+	border-bottom-left-radius: 20px;
+	-webkit-border-bottom-left-radius: 20px;
+	-moz-border-radius-bottomleft: 20px;
+}

Games/Bejeweled/index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8" />
+
+
+	<link rel="icon" type="image/x-icon" href="images/favicon.ico" />
+	<link rel="stylesheet" type="text/css" href="css/screen.css" />
+	<link rel="stylesheet" type="text/css" href="css/game.css" />
+	<link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
+</head>
+<body>
+	<div id="content">
+		<header>
+			<nav>
+				<a href="index.html">Home</a>
+			</nav>
+		</header>
+		<div id="game_content">
+			<div id="player_info">
+				<div id="time_gauge"><div id="current_gauge"></div></div>
+				<p id="level_text">Level</p><div id="level">1</div>
+				<p>Score</p><div id="total_score"><span id="current_score">0</span><br/>/<span id="goal_score">5000</span></div>
+				<button id="restart_bt">Restart</button>
+				<button id="pause_bt">Pause</button>
+			</div>
+			<div id="grid"></div>
+		</div>
+	</div>
+
+
+	<script type="text/javascript" src="js/util.js"></script>
+	<script type="text/javascript" src="js/game/capabilities/item.js"></script>
+	<script type="text/javascript" src="js/game/init.js"></script>
+	<script type="text/javascript" src="js/game/timer.js"></script>
+	<script type="text/javascript" src="js/game/level.js"></script>
+	<script type="text/javascript" src="js/game/hint.js"></script>
+	<script type="text/javascript" src="js/game/score.js"></script>
+	<script type="text/javascript" src="js/game/streak.js"></script>
+	<script type="text/javascript" src="js/game/bonus.js"></script>
+	<script type="text/javascript" src="js/game/classes/Gem.js"></script>
+	<script type="text/javascript" src="js/game/classes/Bomb.js"></script>
+	<script type="text/javascript" src="js/game/classes/Popup.js"></script>
+	<script type="text/javascript" src="js/game/main.js"></script>
+</body>
+</html>

Games/Bejeweled/js/game/bonus.js

@@ -0,0 +1,30 @@
+// Bonus related functions
+
+/**
+ * Adds a bonus item : the bomb
+ */
+Game.winBomb = function() {
+	if (Game.bonus.bomb) {
+		return;
+	}
+	// We randomly place a bomb
+	var bomb = new Game.Bomb(),
+		x = 0,
+		y = 0,
+		itemToReplace;
+
+	Game.bonus.bomb = bomb;
+	do {
+		x = parseInt(Math.random() * Game.GRID_SIZE);
+		y = parseInt(Math.random() * Game.GRID_SIZE);
+	}while (get('#tile' + y + '_' + x) == null || get('#tile' + y + '_' + x).timer != undefined);
+	Game.winBomb(x+1, y+1);
+	bomb.style.left = ((60 * x) + (5 * (x + 1))) + 'px';
+	bomb.style.top = ((60 * y) + (5 * (y + 1))) + 'px';
+	bomb.id = 'tile' + y + '_' + x;
+	itemToReplace = get('#tile' + y + '_' + x);
+	if (itemToReplace != null && itemToReplace.parentNode) {	
+		get('#grid').removeChild(itemToReplace);
+	}
+	get('#grid').appendChild(bomb);
+};