Talking about Dungeon Raid game, Game development, Html and Javascript.
This is another example using my Draw and Match TypeScript class with no dependencies. I already showed you a Phaser example, now we’ll see another example using jQuery and interact.js.
To turn a TypeScript class into a JavaScript script, you need to run
tsc -t es5 drawAndMatch.ts
And you’ll get a file called drawAndMatch.js
Look at the result with just 100 lines of code:
Draw to select at least 3 symbols with the same color. You can move horizontally, vertically and diagonally, and you can also backtrack.
And now, let’s see how it works:
index.html
The web page, where we import all JavaScript libraries.
<html>
<head>
<link rel = 'stylesheet' href = 'style.css'>
<script>var exports = {};</script>
<script src = 'drawAndMatch.js'></script>
<script src = 'jquery.js'></script>
<script src = 'interact.js'></script>
<script src = 'game.js'></script>
</head>
<body>
<div id = 'title'>JQuery Draw and Match game</div>
<div id = 'thegame'></div>
</body>
</html>
Look at line 12 the element where to play the game.
style.css
The style sheet which defines game board and item and arrow elements.
body {
padding : 0;
margin : 10px 0;
}
#title {
font : normal 16px arial;
text-align : center;
}
.item {
width : 100px;
height : 100px;
background : url('items.png');
position : absolute;
}
.arrow {
width : 300px;
height : 300px;
background : url('arrows.png');
position : absolute;
z-index : 1
}
#thegame {
margin : 20px auto;
width : 800px;
height : 600px;
background-color : black;
position : relative;
overflow : hidden;
}
Look how thegame element has relative position and hidden overflow to hide everything which is not inside the div, while item ad arrow class have absolute positioning.
game.js
The game itself, written with jQuery in mind and using interact.js to handle user input on thegame element.
$(document).ready(function() {
let canDraw = true;
let drawAndMatch = new DrawAndMatch();
let gameY = $('#thegame').offset().top;
let gameX = $('#thegame').offset().left;
drawAndMatch.items.forEach (item => {
$('#thegame').append('<div class = "item"></div>');
$('#thegame').append('<div class = "arrow"></div>');
let addedItem = $('#thegame .item').last();
let addedArrow = $('#thegame .arrow').last();
item.setData([addedItem, addedArrow]);
setItemCss(item, true);
});
interact('#thegame').draggable({
listeners : {
start : function(event) {
if (canDraw) {
let chainStarted = drawAndMatch.startChain(event.clientX0 - gameX, event.clientY0 - gameY);
if (chainStarted) {
setItemCss(chainStarted, false);
}
}
},
move : function(event) {
if (canDraw) {
drawAndMatch.handleInputMovement(event.client.x - gameX, event.client.y - gameY).forEach (item => setItemCss(item, true));
}
},
end : function(event) {
if (canDraw) {
canDraw = false;
drawAndMatch.removeItems().forEach (item => {
$(item.data[1]).css({
'display' : 'none'
});
if (item.toBeRemoved) {
$(item.data[0]).addClass('fade');
}
});
let removed = $('.fade').length;
if (removed > 0) {
$('.fade').fadeTo(250, 0, function() {
$('.fade').removeClass('fade');
let itemsToMove = 0;
drawAndMatch.arrangeBoard().forEach (item => {
itemsToMove ++;
item.data[0].css({
'top' : item.movement.startY,
'left' : item.movement.startX,
'background-position' : item.value * 100
});
$(item.data[1]).css({
'display' : 'none'
});
item.data[0].fadeTo(0, 1);
$(item.data[0]).animate({
'top' : item.movement.endY,
},{
duration : 150 * item.movement.deltaRow,
complete : function() {
itemsToMove --;
if (itemsToMove == 0) {
canDraw = true;
}
}
})
});
});
}
else {
canDraw = true;
}
}
}
}
});
function setItemCss(item, setArrow) {
$(item.data[0]).css({
'top' : item.posY,
'left' : item.posX,
'background-position' : item.value * 100
});
if (setArrow) {
$(item.data[1]).css({
'top' : item.posY - 100,
'left' : item.posX - 100,
'display' : item.arrowVisible ? 'block' : 'none',
'rotate' : arrowLookUpTable[item.arrowDirection].rotate,
'background-position' : arrowLookUpTable[item.arrowDirection].position
});
}
}
});
const arrowLookUpTable = [];
arrowLookUpTable[DrawAndMatchDirection.NONE] = {
position : 0,
rotate : '90deg'
}
arrowLookUpTable[DrawAndMatchDirection.UP] = {
position : 0,
rotate : '270deg'
}
arrowLookUpTable[DrawAndMatchDirection.UP + DrawAndMatchDirection.RIGHT] = {
position : 300,
rotate : '270deg'
}
arrowLookUpTable[DrawAndMatchDirection.RIGHT] = {
position : 0,
rotate : '0deg'
}
arrowLookUpTable[DrawAndMatchDirection.RIGHT + DrawAndMatchDirection.DOWN] = {
position : 300,
rotate : '0deg'
}
arrowLookUpTable[DrawAndMatchDirection.DOWN] = {
position : 0,
rotate : '90deg'
}
arrowLookUpTable[DrawAndMatchDirection.DOWN + DrawAndMatchDirection.LEFT] = {
position : 300,
rotate : '90deg'
}
arrowLookUpTable[DrawAndMatchDirection.LEFT] = {
position : 0,
rotate : '180deg'
}
arrowLookUpTable[DrawAndMatchDirection.LEFT + DrawAndMatchDirection.UP] = {
position : 300,
rotate : '180deg'
}
Apart from the lookup table used to store arrow rotation and background position, the Draw and Match game built with jQuery is less than 100 lines, thanks to DrawAndMatch class. You can download the original TypeScript class from this link, and the source code of this project here.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.