Fully playable prototype of “Plus+Plus” built in JavaScript using only jQuery
Talking about Plus+Plus game, Game development and Javascript.
Do you like my tutorials?
Then consider supporting me on Ko-fi.

body{
margin: 0;
padding: 5px;
background-color: #2c3e50;
color: #ecf0f1;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#tilecontainer{
width:360px;
margin: 0px auto;
}
.tile{
width: 60px;
height: 60px;
border: 1px solid #7f8c8d;
margin: 5px;
cursor: pointer;
text-align: center;
font: bold 32px arial;
line-height: 60px;
}
#nextTile1{
width: 60px;
height: 60px;
border: 1px solid #16a085;
margin: 5px;
cursor: pointer;
text-align: center;
font: bold 32px arial;
color: #16a085;
line-height: 60px;
}
.smallTile{
width:30px;
height: 30px;
border: 1px solid #7f8c8d;
margin: 34px 5px 5px 5px;
float: left;
color: #7f8c8d;
text-align: center;
font: bold 16px arial;
line-height: 30px;
}
#allowedNumbers{
margin: 5px;
font: normal 16px arial;
}
#score{
margin: 5px;
font: normal 24px arial;
text-align: right;
}
.greenTile{
color: #16a085;
border-color: #16a085;
}
.redTile{
color: #e74c3c;
border-color: #e74c3c;
}
$(document).ready(function(){
var maxNumber = 6;
var score = 0;
drawBoard();
updateGUI(maxNumber, score);
drawNumbers(maxNumber, true);
$('.tile').click(function(){
var legalMove = false;
var row = $(this).data('row');
var col = $(this).data('col');
if($(this).html() == ''){
$(this).html($('#nextTile1').html()).addClass('greenTile');
legalMove = true;
}
else{
if($(this).hasClass('greenTile')){
$(this).html(parseInt($(this).html()) + parseInt($('#nextTile1').html())).removeClass('greenTile').addClass('redTile');
legalMove = true;
}
}
if(legalMove){
score += parseInt($('#nextTile1').html());
score += removeTiles(row, col);
maxNumber = updateGUI(maxNumber, score);
$('#nextTile1').html($('#nextTile2').html());
$('#nextTile2').html($('#nextTile3').html());
drawNumbers(maxNumber, false);
}
})
})
function removeTiles(row, col){
var score = 0;
if(removeRow(row)){
for(i = 0; i < 5; i++){
score += parseInt($('.tile[data-row = "' + row + '"][data-col = "' + i + '"]').html());
$('.tile[data-row = "' + row + '"][data-col = "' + i + '"]').html("").removeClass('greenTile').removeClass('redTile');
}
}
if(removeCol(col)){
for(i = 0; i < 5; i++){
score += parseInt($('.tile[data-row = "' + i + '"][data-col = "' + col + '"]').html());
$('.tile[data-row = "' + i + '"][data-col = "' + col + '"]').html("").removeClass('greenTile').removeClass('redTile');
}
}
return score;
}
function removeRow(row){
var value = $('.tile[data-row = "' + row + '"][data-col = "' + 0 + '"]').html();
if(value == ""){
return false
}
for(var i = 1; i < 5; i++){
if($('.tile[data-row = "' + row + '"][data-col = "' + i + '"]').html() != value){
return false;
}
}
return true;
}
function removeCol(col){
var value = $('.tile[data-row = "' + 0 + '"][data-col = "' + col + '"]').html();
if(value == ""){
return false;
}
for(var i = 1; i < 5; i++){
if($('.tile[data-row = "' + i + '"][data-col = "' + col + '"]').html() != value){
return false;
}
}
return true;
}
function updateGUI(n, s){
if(s > n * (n - 1) * (n - 2)){
n ++;
}
var html = "";
for(var i = 1; i <= n; i++){
html += " " + i;
}
$('#allowedNumbers').html(html);
$('#score').html(s);
return n;
}
function drawBoard(){
var tableHTML = '<table cellspacing = "0" cellpadding = "0" border = "0">';
for(var i = -2; i < 6; i++){
tableHTML += '<tr>';
for(var j = 0; j < 5; j++){
switch(i){
case -2:
switch(j){
case 0:
case 1:
tableHTML += '<td></td>';
break;
case 2:
tableHTML += '<td><div id = "nextTile1"></div></td>';
break;
case 3:
tableHTML += '<td colspan = "2"><div class = "smallTile" id = "nextTile2"></div><div class = "smallTile" id = "nextTile3"></div><div style = "clear:both"></div></td>';
break;
}
break;
case -1:
if(j == 1){
tableHTML += '<td colspan = "5"><div id = "allowedNumbers"></div></td>';
}
break;
case 5:
if(j == 1){
tableHTML += '<td colspan = "5"><div id = "score"></div></td>';
}
break;
default:
tableHTML += '<td><div class = "tile" data-row = "' + i + '" data-col = "' + j + '"></div></td>';
}
}
tableHTML += '</tr>';
}
tableHTML += '</table>';
$("#tilecontainer").html(tableHTML);
}
function drawNumbers(max, firstRun){
var n = Math.floor(Math.random() * max) + 1;
$('#nextTile3').html(n);
if(firstRun){
n = Math.floor(Math.random() * max) + 1;
$('#nextTile2').html(n);
n = Math.floor(Math.random() * max) + 1;
$('#nextTile1').html(n);
}
}
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.