JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.1.0.min.js"
integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
crossorigin="anonymous">
</script>
<body id="game">
</body>
JavaScript
// A 10x10 grid implemented with Javascript Array
var rows=7;
var cols = 6;
var grid = [];
var validFigures=0;
var levelGoal = 0;
// game object
function jewel(r,c,obj,src)
{
return {
r: r,
c: c,
src:src,
locked:false,
isInCombo:false,
o:obj
}
}
// Jewels used in Solar System JSaga
var jewelsType=[];
jewelsType[0]="https://upload.wikimedia.org/wikipedia/commons/d/d8/OpenEmulator.png";
jewelsType[1]="http://beachfrontreach.com/wp-content/uploads/2015/08/html5-icon.png";
jewelsType[2]="https://upload.wikimedia.org/wikipedia/commons/8/8d/DVD_video_icon.png";
jewelsType[3]="https://upload.wikimedia.org/wikipedia/commons/1/16/Glossy_3d_blue_plussign.png";
jewelsType[4]="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Tumblr-2.svg/256px-Tumblr-2.svg.png";
jewelsType[5]="https://upload.wikimedia.org/wikipedia/en/thumb/f/f0/Information_orange.svg/256px-Information_orange.svg.png";
jewelsType[6]="https://upload.wikimedia.org/wikipedia/commons/d/d7/The_KMPlayer_icon_%28since_v3.2%29.png";
// this function returs a random jewel.
function pickRandomJewel()
{
var pickInt = Math.floor((Math.random()*7));
//console.log("Picked " + pickInt);
return jewelsType[pickInt];
}
function _initGame() {
// prepare grid - Simply and fun!
for (var r = 0; r < rows; r++)
{
grid[r]=[];
for (var c =0; c< cols; c++) {
grid[r][c]=new jewel(r,c,null,pickRandomJewel());
}
}
_applyRectangleConstraint(1,1,1,1);
// initial coordinates
var width = $('body').width();
var height = $(document).height();
console.log("Game width: " + width);
console.log("Game height: " + height);
...