Block Puzzle Game
How do I make an block puzzle game?
This is a 25 level block puzzle game.Rules: 1. This is a game of matching colors. When three match up they will go away and you will get points. Only three will clear if more than three of the same color touch.. What is a block puzzle game? How do you make a block puzzle game? This script and codes were developed by Charlie Volpe on 08 November 2022, Tuesday.
Block Puzzle Game Previews
Block Puzzle Game - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Block Puzzle Game</title> <meta name="viewport" content="width=device-width"> <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> <div class="info"> <div class="points hide">Points: 0</div> <div class="level hide">Level: 0</div> <div class="clicks hide">Clicks: 0</div>
</div>
<div class="container"> <div class="col"> <div class="start">Start</div> </div>
</div>
<div id="restart" class="restart hide">Restart Level</div>
<div class="rules"> <h2>Rules</h2> <ol> <li> This is a game of matching colors. When three match up they will go away and you will get points. Only three will clear if more than three of the same color touch. </li> <li> Click on a row and the entire row will move to the top of the column. </li> <li> When the blocks are cleared the blocks on the right will move left in their own row. </li> <li> The fewer the clicks made the more points you will gain. </li> </ol> <p> There are a total of 25 levels to play! Have fun! </p>
</div>
<!-- Color Pallette "Flat" by darqfaux via colourlovers.com ... found at this link: http://www.colourlovers.com/palette/101556/Flat with the addition of beccapurple #663399
--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Block Puzzle Game - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
* { box-sizing: border-box;
}
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
html { font-size: 8px;
}
body { background: #f7f7f7; font-family: 'Open Sans', sans-serif; cursor: default;
}
a { color: #2c82c9; text-decoration: none;
}
a:hover { color: #38a5ff;
}
.col { margin: 0 auto;
}
.block { float: left; width: 5rem; height: 5rem; margin: 0 auto; border: .25rem solid rgba(0,0,0,.2); border-radius: .4rem; cursor: pointer;
}
.purple { background: #663399;
}
.blue { background: #2c82c9;
}
.blue:before { content:""; position: absolute; margin: .625rem; width: 1rem; height: 3rem; border: .2rem solid rgba(0,0,0,.2); border-radius: .5rem;
}
.blue:after { content:""; position: absolute; margin: .625rem; margin-left: 2.625rem; width: 1rem; height: 3rem; border: .2rem solid rgba(0,0,0,.2); border-radius: .5rem;
}
.green { background: #2cc990;
}
.green:after { content:""; position: absolute; margin: .625rem; width: 3rem; height: 3rem; border: .2rem solid rgba(0,0,0,.2); border-radius: 50%;
}
.yellow { position: relative; background: #eee657;
}
.yellow:before { content:""; position: absolute; margin: .625rem; width: 1.5rem; height: 1.5rem; border: .2rem solid rgba(0,0,0,.2); border-radius: 50%;
}
.yellow:after { content:""; position: absolute; bottom: 0; right: 0; margin: .625rem; width: 1.5rem; height: 1.5rem; border: .2rem solid rgba(0,0,0,.2); border-radius: 50%;
}
.orange { background: #fcb941;
}
.orange:after { content:""; position: absolute; margin: .625rem; width: 3rem; height: 3rem; border: .2rem solid rgba(0,0,0,.2); border-radius: .5rem;
}
.red { background: #fc6042;
}
.red:before { content:""; position: absolute; margin: .625rem; width: 3rem; height: 1rem; border: .2rem solid rgba(0,0,0,.2); border-radius: .5rem;
}
.red:after { content:""; position: absolute; margin: .625rem; margin-top: 2.625rem; width: 3rem; height: 1rem; border: .2rem solid rgba(0,0,0,.2); border-radius: .5rem;
}
.level { position: fixed; left: 0; top: 0; padding: .5rem;
}
.points { position: fixed; right: 0; top: 0; padding: .5rem;
}
.clicks { position: fixed; top: 0; left: 25%; width: 50%; padding: .5rem; text-align: center;
}
.start { background: #2c82c9; color: #f7f7f7; font-size: 2rem; text-align: center; width: 50%; height: 5rem; line-height: 5rem; border-radius: .5rem; margin: 2rem auto; cursor: pointer;
}
.start:hover { background: #2267a0;
}
.info { position: relative; top: 0; height: 3rem;
}
.hide { display: none;
}
.restart { background: #777; color: #f7f7f7; margin: 1rem auto; width: 8rem; height: 3rem; line-height: 3rem; text-align: center; border-radius: .5rem; cursor: pointer;
}
.restart:hover { background: #373737;
}
.rules { padding: 1.5rem; font-size: 1.5rem;
}
.rules ol li { padding-bottom: 1rem;
}
.win { font-size: 6rem; text-align: center; padding: 1rem;
}
.win-score { font-size: 3rem; text-align: center;
}
.win-text { font-size: 2rem; text-align: left;
}
@media screen and (min-width: 320px) { html { font-size: 10px; }
}
@media screen and (min-width: 575px) { html { font-size: 12px; }
}
@media screen and (min-width: 845px) { html { font-size: 14px; }
}
@media screen and (min-width: 1024px) { html { font-size: 16px; }
}Block Puzzle Game - Script Codes JS Codes
var column = [];
var points = 0;
var oldPoints = 0;
var clicks = 0;
var level = 0;
var last = false;
var clickable = true;
$(function() { $(document).on('click', '.block', function() { if( clickable ) { var row = $(this).parent(); var id = row.attr('id'); var rowArray = []; for( var i = 0; i < row.children().length; i++) { var selector = '#' + id + ' div:nth-of-type(' + (i + 1) + ')'; rowArray.push($(selector).attr('class').substring(6)); } column.splice(id.substring(1),1); column.unshift(rowArray); clicks++; $('.clicks').text('Clicks: ' + clicks); clickable = false; BuildColumn(); } }); $(document).on('click', '.start', function() { LoadNextLevel(); $('.info div').removeClass('hide'); $('.restart').removeClass('hide'); $('.rules').addClass('hide'); }); $(document).on('click', '#restart', function() { Restart(); });
});
function Restart() { points = oldPoints; clicks = 0; $('.points').text('Points: ' + points); $('.clicks').text('Clicks: ' + clicks); window[ 'Level' + level.toString() ]();
}
function MakeHTML() { var str = ''; var maxWidth = 0; var colWidth = ''; for( i=0; i<column.length; i++ ) { str = str.concat('<div id="r' + i + '" class="row clearfix">'); for( var j = 0; j < column[i].length; j++) { str = str.concat('<div class="block"></div>'); } str = str.concat('</div>'); if( column[i].length > maxWidth ){ colWidth = (5 * column[i].length).toString() + 'rem'; maxWidth = column[i].length; } } $('.col').css('width', colWidth); $('.col').text(""); $('.col').append(str);
}
function BuildColumn() { $('.points').text('Points: ' + points); $('.level').text('Level: ' + level); ClearColumn(); MakeHTML(); if(column.length > 0) { for(var i = 0; i < column.length; i++) { var row = column[i]; for(var j = 0; j < row.length; j++) { var selector = '#r' + i.toString() + ' div:nth-of-type(' + (j + 1) + ')'; if( row[j] == 'red') { $(selector).addClass('red'); } if( row[j] == 'orange') { $(selector).addClass('orange'); } if( row[j] == 'yellow') { $(selector).addClass('yellow'); } if( row[j] == 'green') { $(selector).addClass('green'); } if( row[j] == 'blue') { $(selector).addClass('blue'); } if( row[j] == 'purple') { $(selector).addClass('purple'); } } } setTimeout( function() { CheckMatch(); }, 500); } else { LoadNextLevel(); }
}
function ClearColumn() { RemoveRow(); for(var i = 0; i < column.length; i++) { $('#r' + i.toString()).children().removeClass('red'); $('#r' + i.toString()).children().removeClass('orange'); $('#r' + i.toString()).children().removeClass('yellow'); $('#r' + i.toString()).children().removeClass('green'); $('#r' + i.toString()).children().removeClass('blue'); $('#r' + i.toString()).children().removeClass('purple'); }
}
function RemoveRow() { for( var i = 0; i < column.length; i++ ) { if( column[i].length == 0 ) { column.splice(i,1); RemoveRow(); return; } }
}
function CheckMatch() { for(var i = 0; i < column.length; i++) { for(var j = 0; j < column[i].length; j++) { var check = column[i][j]; if( column.length == 1 ) { if( check == column[i][j + 1] && check == column[i][j - 1] ) { column[i].splice(j-1,3); points += 100; BuildColumn(); return; } } else { if( i == 0) { if( j == 0 ) { if( check == column[i + 1][j] && check == column[i][j + 1] ) { column[i].splice(j,2); column[i+1].splice(j,1); points += 100; BuildColumn(); return; } } else { if( j == column[i].length - 1 ) { if( check == column[i + 1][j] && check == column[i][j - 1] ) { column[i].splice(j-1,2); column[i+1].splice(j,1); points += 100; BuildColumn(); return; } } else { if( check == column[i + 1][j] && check == column[i][j + 1] ) { column[i].splice(j,2); column[i+1].splice(j,1); points += 100; BuildColumn(); return; } if( check == column[i + 1][j] && check == column[i][j - 1] ) { column[i].splice(j-1,2); column[i+1].splice(j,1); points += 100; BuildColumn(); return; } if( check == column[i][j + 1] && check == column[i][j - 1] ) { column[i].splice(j-1,3); points += 100; BuildColumn(); return; } } } } else { if( i == column.length - 1 ) { if( j == 0 ) { if( check == column[i][j + 1] && check == column[i - 1][j] ) { column[i].splice(j,2); column[i-1].splice(j,1); points += 100; BuildColumn(); return; } } else { if( j == column[i].length - 1 ) { if( check == column[i - 1][j] && check == column[i][j - 1] ) { column[i].splice(j-1,2); column[i-1].splice(j,1); points += 100; BuildColumn(); return; } } else { if( check == column[i][j + 1] && check == column[i - 1][j] ) { column[i].splice(j,2); column[i-1].splice(j,1); points += 100; BuildColumn(); return; } if( check == column[i][j - 1] && check == column[i - 1][j] ) { column[i].splice(j-1,2); column[i-1].splice(j,1); points += 100; BuildColumn(); return; } if( check == column[i][j + 1] && check == column[i][j - 1] ) { column[i].splice(j-1,3); points += 100; BuildColumn(); return; } } } } else { if( j == 0 ) { if( check == column[i + 1][j] && check == column[i][j + 1] ) { column[i].splice(j,2); column[i+1].splice(j,1); points += 100; BuildColumn(); return; } if( check == column[i - 1][j] && check == column[i][j + 1] ) { column[i].splice(j,2); column[i-1].splice(j,1); points += 100; BuildColumn(); return; } if( check == column[i + 1][j] && check == column[i - 1][j] ) { column[i-1].splice(j,1); column[i].splice(j,1); column[i+1].splice(j,1); points += 100; BuildColumn(); return; } } else { if( j == column[i].length - 1 ) { if( check == column[i + 1][j] && check == column[i][j - 1] ) { column[i].splice(j-1,2); column[i+1].splice(j,1); points += 100; BuildColumn(); return; } if( check == column[i - 1][j] && check == column[i][j - 1] ) { column[i].splice(j-1,2); column[i-1].splice(j,1); points += 100; BuildColumn(); return; } if( check == column[i + 1][j] && check == column[i - 1][j] ) { column[i-1].splice(j,1); column[i].splice(j,1); column[i+1].splice(j,1); points += 100; BuildColumn(); return; } } else { if( check == column[i + 1][j] && check == column[i][j + 1] ) { column[i].splice(j,2); column[i+1].splice(j,1); points += 100; BuildColumn(); return; } if( check == column[i + 1][j] && check == column[i][j - 1] ) { column[i].splice(j-1,2); column[i+1].splice(j,1); points += 100; BuildColumn(); return; } if( check == column[i - 1][j] && check == column[i][j + 1] ) { column[i].splice(j,2); column[i-1].splice(j,1); points += 100; BuildColumn(); return; } if( check == column[i - 1][j] && check == column[i][j - 1] ) { column[i].splice(j-1,2); column[i-1].splice(j,1); points += 100; BuildColumn(); return; } if( check == column[i][j + 1] && check == column[i][j - 1] ) { column[i].splice(j-1,3); points += 100; BuildColumn(); return; } if( check == column[i + 1][j] && check == column[i - 1][j] ) { column[i-1].splice(j,1); column[i].splice(j,1); column[i+1].splice(j,1); points += 100; BuildColumn(); return; } } } } } } } } clickable = true;
}
function LoadNextLevel() { if( !last ) { if(level > 0) { points += Math.floor(1000 / clicks); $('.points').text('Points: ' + points); } clicks = 0; $('.clicks').text('Clicks: ' + clicks); oldPoints = points; window[ 'Level' + (level + 1 ).toString() ](); } else { Win(); }
}
function Level1() { level = 1; column = []; column.unshift(['orange']); column.unshift(['orange']); column.unshift(['green']); column.unshift(['green']); column.unshift(['orange']); column.unshift(['green']); BuildColumn();
}
function Level2() { level = 2; column = []; column.unshift(['orange']); column.unshift(['green']); column.unshift(['orange']); column.unshift(['green']); column.unshift(['orange']); column.unshift(['green']); BuildColumn();
}
function Level3() { level = 3; column = []; column.unshift(['orange']); column.unshift(['green']); column.unshift(['green']); column.unshift(['red']); column.unshift(['orange']); column.unshift(['green']); column.unshift(['red']); column.unshift(['orange']); column.unshift(['red']); BuildColumn();
}
function Level4() { level = 4; column = []; column.unshift(['orange', 'blue']); column.unshift(['orange', 'blue']); column.unshift(['green', 'red']); column.unshift(['green', 'red']); column.unshift(['orange', 'blue']); column.unshift(['green', 'red']); BuildColumn();
}
function Level5() { level = 5; column = []; column.unshift(['green', 'red']); column.unshift(['orange', 'blue']); column.unshift(['red', 'red']); column.unshift(['orange', 'blue']); column.unshift(['orange', 'blue']); column.unshift(['green', 'green']); BuildColumn();
}
function Level6() { level = 6; column = []; column.unshift(['blue', 'orange']); column.unshift(['red', 'green']); column.unshift(['orange', 'orange']); column.unshift(['blue', 'red']); column.unshift(['blue', 'red']); column.unshift(['green', 'green']); BuildColumn();
}
function Level7() { level = 7; column = []; column.unshift(['green', 'blue', 'purple']); column.unshift(['yellow', 'orange', 'red']); column.unshift(['yellow', 'blue', 'purple']); column.unshift(['green', 'orange', 'red']); column.unshift(['yellow', 'orange', 'red']); column.unshift(['green', 'blue', 'purple']); BuildColumn();
}
function Level8() { level = 8; column = []; column.unshift(['green', 'blue', 'purple']); column.unshift(['green', 'orange', 'orange']); column.unshift(['yellow', 'red', 'yellow']); column.unshift(['blue', 'orange', 'red']); column.unshift(['blue', 'yellow', 'red']); column.unshift(['green', 'purple', 'purple']); BuildColumn();
}
function Level9() { level = 9; column = []; column.unshift(['purple', 'purple', 'red']); column.unshift(['orange', 'green', 'green']); column.unshift(['orange', 'purple', 'yellow']); column.unshift(['green', 'green', 'yellow']); column.unshift(['orange', 'red', 'red']); column.unshift(['green', 'green', 'yellow']); BuildColumn();
}
function Level10() { level = 10; column = []; column.unshift(['red', 'red', 'blue']); column.unshift(['blue', 'blue', 'red']); column.unshift(['purple', 'green', 'green']); column.unshift(['purple', 'yellow', 'yellow']); column.unshift(['blue', 'red', 'red']); column.unshift(['red', 'blue', 'blue']); column.unshift(['blue', 'green', 'yellow']); column.unshift(['orange', 'blue', 'blue']); column.unshift(['purple', 'orange', 'orange']); BuildColumn();
}
function Level11() { level = 11; column = []; column.unshift(['red', 'blue', 'blue', 'red']); column.unshift(['yellow', 'purple', 'yellow', 'yellow']); column.unshift(['green', 'green', 'orange', 'blue']); column.unshift(['red', 'blue', 'red', 'green']); column.unshift(['red', 'purple', 'red', 'blue']); column.unshift(['blue', 'purple', 'orange', 'orange']); BuildColumn();
}
function Level12() { level = 12; column = []; column.unshift(['blue', 'red', 'blue', 'blue']); column.unshift(['red', 'orange', 'red', 'yellow']); column.unshift(['purple', 'orange', 'purple', 'purple']); column.unshift(['red', 'green', 'yellow', 'yellow']); column.unshift(['blue', 'orange', 'green', 'blue']); column.unshift(['red', 'red', 'green', 'blue']); BuildColumn();
}
function Level13() { level = 13; column = []; column.unshift(['green', 'green', 'red', 'yellow']); column.unshift(['orange', 'purple', 'yellow', 'purple']); column.unshift(['green', 'green', 'yellow', 'purple']); column.unshift(['blue', 'blue', 'red', 'blue']); column.unshift(['purple', 'purple', 'red', 'purple']); column.unshift(['green', 'green', 'orange', 'orange']); BuildColumn();
}
function Level14() { level = 14; column = []; column.unshift(['blue', 'blue', 'yellow', 'blue']); column.unshift(['yellow', 'purple', 'green', 'green']); column.unshift(['green', 'green', 'purple', 'purple']); column.unshift(['orange', 'yellow', 'blue', 'blue']); column.unshift(['green', 'red', 'green', 'red']); column.unshift(['orange', 'orange', 'purple', 'red']); column.unshift(['blue', 'yellow', 'purple', 'yellow']); column.unshift(['blue', 'yellow', 'red', 'purple']); column.unshift(['red', 'red', 'blue', 'blue']); BuildColumn();
}
function Level15() { level = 15; column = []; column.unshift(['purple', 'purple', 'yellow', 'yellow']); column.unshift(['yellow', 'yellow', 'green', 'green']); column.unshift(['green', 'green', 'purple', 'purple']); column.unshift(['purple', 'purple', 'blue', 'blue']); column.unshift(['green', 'green', 'red', 'red']); column.unshift(['blue', 'blue', 'orange', 'orange']); column.unshift(['red', 'red', 'yellow', 'yellow']); column.unshift(['orange', 'orange', 'blue', 'blue']); column.unshift(['red', 'red', 'orange', 'orange']); BuildColumn();
}
function Level16() { level = 16; column = []; column.unshift(['red', 'green', 'orange', 'orange']); column.unshift(['red', 'green', 'purple', 'purple']); column.unshift(['yellow', 'orange', 'yellow', 'yellow']); column.unshift(['red', 'red', 'green', 'purple']); column.unshift(['purple', 'blue', 'red', 'red']); column.unshift(['blue', 'green', 'purple', 'blue']); column.unshift(['blue', 'green', 'purple', 'orange']); column.unshift(['green', 'orange', 'orange', 'yellow']); column.unshift(['blue', 'yellow', 'yellow', 'blue']); BuildColumn();
}
function Level17() { level = 17; column = []; column.unshift(['green', 'green', 'red', 'orange']); column.unshift(['red', 'orange', 'red', 'orange']); column.unshift(['red', 'orange', 'yellow', 'blue']); column.unshift(['purple', 'yellow', 'green', 'yellow']); column.unshift(['purple', 'yellow', 'green', 'yellow']); column.unshift(['green', 'purple', 'blue', 'purple']); column.unshift(['blue', 'blue', 'red', 'orange']); column.unshift(['red', 'orange', 'green', 'yellow']); column.unshift(['blue', 'purple', 'purple', 'blue']); BuildColumn();
}
function Level18() { level = 18; column = []; column.unshift(['green', 'green', 'red', 'green', 'blue']); column.unshift(['blue', 'orange', 'red', 'orange', 'orange']); column.unshift(['green', 'green', 'blue', 'blue', 'green']); column.unshift(['blue', 'yellow', 'red', 'yellow', 'purple']); column.unshift(['yellow', 'purple', 'blue', 'red', 'blue']); column.unshift(['purple', 'red', 'blue', 'red', 'blue']); BuildColumn();
}
function Level19() { level = 19; column = []; column.unshift(['blue', 'green', 'red', 'green', 'blue']); column.unshift(['blue', 'orange', 'blue', 'red', 'red']); column.unshift(['green', 'green', 'blue', 'green', 'green']); column.unshift(['blue', 'yellow', 'red', 'purple', 'purple']); column.unshift(['yellow', 'purple', 'blue', 'red', 'blue']); column.unshift(['yellow', 'red', 'blue', 'orange', 'orange']); BuildColumn();
}
function Level20() { level = 20; column = []; column.unshift(['blue', 'blue', 'red', 'purple', 'purple']); column.unshift(['green', 'purple', 'yellow', 'red', 'red']); column.unshift(['orange', 'green', 'green', 'blue', 'blue']); column.unshift(['green', 'blue', 'yellow', 'yellow', 'orange']); column.unshift(['red', 'purple', 'green', 'red', 'orange']); column.unshift(['blue', 'red', 'green', 'purple', 'purple']); BuildColumn();
}
function Level21() { level = 21; column = []; column.unshift(['green', 'blue', 'purple', 'red', 'purple']); column.unshift(['green', 'blue', 'yellow', 'yellow', 'purple']); column.unshift(['orange', 'red', 'purple', 'blue', 'blue']); column.unshift(['green', 'blue', 'blue', 'yellow', 'orange']); column.unshift(['orange', 'red', 'purple', 'red', 'orange']); column.unshift(['orange', 'red', 'orange', 'red', 'purple']); BuildColumn();
}
function Level22() { level = 22; column = []; column.unshift(['blue', 'blue', 'red', 'red', 'blue']); column.unshift(['green', 'green', 'orange', 'orange', 'green']); column.unshift(['orange', 'orange', 'purple', 'purple', 'orange']); column.unshift(['yellow', 'blue', 'blue', 'yellow', 'yellow']); column.unshift(['purple', 'green', 'orange', 'red', 'red']); column.unshift(['purple', 'green', 'orange', 'purple', 'purple']); column.unshift(['green', 'blue', 'blue', 'green', 'green']); column.unshift(['green', 'yellow', 'orange', 'red', 'yellow']); column.unshift(['blue', 'blue', 'orange', 'red', 'yellow']); BuildColumn();
}
function Level23() { level = 23; column = []; column.unshift(['red', 'blue', 'blue', 'green', 'blue']); column.unshift(['yellow', 'green', 'orange', 'red', 'green']); column.unshift(['yellow', 'blue', 'blue', 'red', 'blue']); column.unshift(['red', 'green', 'orange', 'green', 'green']); column.unshift(['yellow', 'blue', 'blue', 'red', 'blue']); column.unshift(['yellow', 'green', 'orange', 'red', 'green']); column.unshift(['red', 'blue', 'blue', 'green', 'blue']); column.unshift(['yellow', 'green', 'green', 'red', 'green']); column.unshift(['yellow', 'blue', 'blue', 'red', 'blue']); BuildColumn();
}
function Level24() { level = 24; column = []; column.unshift(['red', 'green', 'green', 'blue', 'blue', 'purple']); column.unshift(['yellow', 'yellow', 'orange', 'red', 'red', 'purple']); column.unshift(['red', 'orange', 'blue', 'yellow', 'yellow', 'red']); column.unshift(['red', 'green', 'orange', 'green', 'orange','purple']); column.unshift(['purple', 'purple', 'blue', 'purple', 'blue', 'yellow']); column.unshift(['green', 'green', 'orange', 'orange', 'blue', 'yellow']); BuildColumn();
}
function Level25() { level = 25; last = true; column = []; column.unshift(['green', 'orange', 'blue', 'orange', 'red', 'blue']); column.unshift(['green', 'yellow', 'yellow', 'orange', 'red', 'blue']); column.unshift(['blue', 'orange', 'blue', 'blue', 'yellow', 'orange']); column.unshift(['green', 'orange', 'yellow', 'yellow', 'red','yellow']); column.unshift(['purple', 'purple', 'blue', 'purple', 'blue', 'blue']); column.unshift(['red', 'red', 'yellow', 'red', 'yellow', 'yellow']); BuildColumn();
}
function Win() { $('body').text(''); $('body').append('<div class="win">You Win!<div class="win-score">Your final score was:<br/>' + points +'</div><div class="win-text">Congratulations for completing the game! Thanks for taking the time to play through. I hope you enjoyed playing! Feel free to play again and try for a higher score!<br/><br/>Feel free to check out more of my <a href="https://codepen.io/charlie-volpe/">CodePens</a> as well as <a href="http://charlievolpe.com">my website</a>. Post your highscore in the comments if you like!</div></div>');
}
| Developer | Charlie Volpe |
| Username | charlie-volpe |
| Uploaded | November 08, 2022 |
| Rating | 4 |
| Size | 5,895 Kb |
| Views | 14,168 |
Do you need developer help for Block Puzzle 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!
Charlie Volpe (charlie-volpe) Script Codes
| Name | Size |
| Responsive Flat Sublime Text Visualization | 2,734 Kb |
| Galaxy S3 CSS Template | 2,704 Kb |
| NES Contoller | 3,410 Kb |
| Layout Resolutions | 1,860 Kb |
| Draggable Node Based VPL Test | 3,187 Kb |
| Simple Blackjack Game | 4,463 Kb |
| Draggable Window | 2,717 Kb |
| Bouncing Ball | 1,840 Kb |
| List Maker | 2,535 Kb |
| Simple Battle Game | 2,817 Kb |
Create amazing blog posts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
| A Pen by Jess | Jessamyne | 5,100 Kb |
| CSS Link Icons with jQuery Titles | Nicwinn | 2,312 Kb |
| A Pen by Kenny Mark | Kennymark | 5,574 Kb |
| JS Countdown Timer | Ayoungh | 2,435 Kb |
| Hc first draft | Stepfray | 5,104 Kb |
| Realistic Buttons | Stoypenny | 2,248 Kb |
| No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
| Flat design iframe | Damienpm | 1,819 Kb |
| A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!