arozwalak
7/29/2015 - 10:59 AM
Javascript: puzzle
Javascript: puzzle
var Game = function (){
this.goodMove = 0;
this.breakpoint = null;
this.base = {
'desktop': [320, 82],
'tablet': [210, 82],
'mobile': [60, 129]
};
this.direction = null;
this.tabletDesktop = 320 - 210;
this.mobileTabletX = 210 - 60;
this.mobileTabletY = 129 - 82;
this.mobileTabletWidth = 142 - 110;
this.mobileTabletHeight = 141 - 110;
this.canvasBase = null;
this.size = {
'desktop': [142, 141],
'tablet': [142, 141],
'mobile': [110, 110]
}
this.boxSize = null;
this.boxCenter = null;
this.boxes = {
1: [0, 0],
2: [1, 0],
3: [2, 0],
4: [3, 0],
5: [0, 1],
6: [1, 1],
7: [2, 1],
8: [3, 1],
9: [0, 2],
10: [1, 2],
11: [2, 2],
12: [3, 2]
};
};
Game.prototype.setBreakpoint = function () {
var windowWidth = $(window).innerWidth(),
oldBreakpoint = this.breakpoint;
if (windowWidth < 960) {
this.breakpoint = 'mobile';
} else if (windowWidth >= 960 && windowWidth < 1200) {
this.breakpoint = 'tablet';
} else {
this.breakpoint = 'desktop';
}
if ((oldBreakpoint === 'desktop' && this.breakpoint === 'tablet') ||
(oldBreakpoint === 'tablet' && this.breakpoint === 'mobile')) {
this.direction = 'shrink';
}
if ((oldBreakpoint === 'mobile' && this.breakpoint === 'tablet') ||
(oldBreakpoint === 'tablet' && this.breakpoint === 'desktop')) {
this.direction = 'enlarge';
}
if (oldBreakpoint !== this.breakpoint) {
this.updatePuzzles();
this.setBoxSize();
this.setCanvasBase();
this.load();
}
};
Game.prototype.updatePuzzles = function () {
var self = this;
$('.game__puzzles li.set').each(function () {
var $this = $(this);
var left = $this.position().left;
var top = $this.position().top;
var box = $this.data('box') - 1;
var width = (box % 4) * self.mobileTabletWidth;
var height = parseInt(box / 4) * self.mobileTabletHeight;
if (self.breakpoint === 'desktop') {
$this.css('left', left + self.tabletDesktop);
}
if (self.breakpoint === 'tablet') {
if (self.direction == 'shrink') {
$this.css('left', left - self.tabletDesktop);
} else {
$this.css('left', left + self.mobileTabletX + width);
$this.css('top', top - self.mobileTabletY + height);
}
}
if (self.breakpoint === 'mobile') {
$this.css('left', left - self.mobileTabletX - width);
$this.css('top', top + self.mobileTabletY - height);
}
});
};
Game.prototype.setBoxSize = function () {
this.boxSize = this.size[this.breakpoint];
this.boxCenter = [this.boxSize[0] / 2, this.boxSize[1] / 2];
};
Game.prototype.setCanvasBase = function () {
this.canvasBase = this.base[this.breakpoint];
};
Game.prototype.init = function () {
var self = this;
// set breakpoint on start
if (this.breakpoint === null) {
this.setBreakpoint();
}
$(window).on('resize', function () {
self.setBreakpoint();
});
$('.js-scrollToGame').on('click', function (e) {
e.preventDefault();
$('html,body').animate({
scrollTop: $('.game').offset().top
});
});
};
Game.prototype.load = function () {
var self = this;
var puzzles = $('.game__puzzles li');
puzzles.draggable({
snap: ".game__canvas div",
snapMode: "inner",
start: function (event, ui) {
$(ui.helper).css('z-index', 100);
},
stop: function (event, ui) {
var x = parseInt((ui.position.left - self.canvasBase[0] + self.boxCenter[0]) / self.boxSize[0]),
y = parseInt((ui.position.top - self.canvasBase[1] + self.boxCenter[1]) / self.boxSize[1]),
box = ui.helper.data('box'),
$uiHelper = $(ui.helper);
$uiHelper.css('z-index', '');
// check if puzzle is in right place
if (self.boxes[box][0] === x && self.boxes[box][1] === y) {
var $canvasBox = $($('.game__canvas div')[box - 1]);
// add when puzzle is on right place
self.goodMove += 1;
$uiHelper
.addClass('set')
.draggable('disable')
.css({ // snap to canvasBox
top: $canvasBox.position().top + self.canvasBase[1],
left: $canvasBox.position().left + self.canvasBase[0]
});
if (self.goodMove === 12) {
var popup = '#puzzles-arranged';
$(popup).on('close', function () {
var $contestForm = $('.contest-sen__form');
$contestForm.fadeIn();
$('html,body').animate({
scrollTop: $contestForm.offset().top
});
});
$(popup).lightbox_me().find('.close-btn').on('click', function (e) {
e.preventDefault();
$(popup).trigger('close');
});
}
} else {
// reset puzzle position to original
$uiHelper.css({
left: '',
top: ''
});
}
}
});
};
var game = new Game();
game.init();.game {
&__container {
position: relative;
}
&__board {
position: absolute;
left: 214px;
top: 6px;
background: url('#{$img-path}/game_bg.png') 50% 50% no-repeat;
width: 750px;
height: 570px;
}
&__canvas {
position: absolute;
top: 72px;
left: 106px;
width: 568px;
height: 423px;
div {
width: 142px;
height: 141px;
float: left;
content: " "
}
}
&__puzzles {
position: relative;
min-height: 500px;
margin-top: 142px;
margin-bottom: 164px;
li {
position: absolute;
list-style: none;
}
#puzzle1 {
top: 346px;
left: 1044px;
}
#puzzle2 {
top: 242px;
left: 48px;
}
#puzzle3 {
top: 332px;
left: 109px;
}
#puzzle4 {
top: 269px;
left: 1000px;
}
#puzzle5 {
top: 94px;
left: 970px;
}
#puzzle6 {
top: 372px;
left: 950px;
}
#puzzle7 {
top: 175px;
left: 118px;
}
#puzzle8 {
top: 364px;
left: 22px;
}
#puzzle9 {
top: 70px;
left: 27px;
}
#puzzle10 {
top: 195px;
left: 927px;
}
#puzzle11 {
top: 161px;
left: 1040px;
}
#puzzle12 {
top: 91px;
left: 82px;
}
}
@include media(medium) {
&__board {
left: 104px;
}
&__puzzles {
margin-bottom: 460px;
#puzzle1 {
top: 616px;
left: 74px;
}
#puzzle2 {
top: 711px;
left: 182px;
}
#puzzle3 {
top: 682px;
left: 109px;
}
#puzzle4 {
top: 679px;
left: 650px;
}
#puzzle5 {
top: 624px;
left: 560px;
}
#puzzle6 {
top: 662px;
left: 500px;
}
#puzzle7 {
top: 615px;
left: 298px;
}
#puzzle8 {
top: 714px;
left: 392px;
}
#puzzle9 {
top: 600px;
left: 407px;
}
#puzzle10 {
top: 645px;
left: 237px;
}
#puzzle11 {
top: 591px;
left: 690px;
}
#puzzle12 {
top: 701px;
left: 592px;
}
}
}
@include media(small) {
&__canvas {
top: 119px;
left: 59px;
width: 440px;
height: 330px;
div {
width: 110px;
height: 110px;
}
}
&__puzzles {
margin-top: 0px;
li {
width: 110px;
height: 110px;
img {
width: 100%;
}
}
#puzzle1 {
top: 566px;
left: 34px;
}
#puzzle2 {
top: 561px;
left: 132px;
}
#puzzle3 {
top: 622px;
left: 59px;
}
#puzzle4 {
top: 619px;
left: 390px;
}
#puzzle5 {
top: 624px;
left: 290px;
}
#puzzle6 {
top: 632px;
left: 230px;
}
#puzzle7 {
top: 595px;
left: 98px;
}
#puzzle8 {
top: 644px;
left: 152px;
}
#puzzle9 {
top: 620px;
left: 187px;
}
#puzzle10 {
top: 545px;
left: 237px;
}
#puzzle11 {
top: 551px;
left: 414px;
}
#puzzle12 {
top: 581px;
left: 362px;
}
}
&__board {
width: 558px;
left: 0;
background-image: url(#{$img-path}/game_bg-mobile.png);
}
}
}
<div class="contest-sen__game game">
<div class="contest-sen__header">Zapraszamy do zabawy!</div>
<div class="contest-sen__text">Ułóż obrazek i odkryj pytanie konkursowe. Klikając w klocek przeniesiesz go na
wolne pole.
</div>
<div class="game__container">
<div class="game__board">
<div class="game__canvas">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="game__puzzles">
<ul>
<li id="puzzle1" data-box="12"><img src="/themes/bebiklub2014/src/images/contest/sen/puzzle0.png"
alt=""></li>
<li id="puzzle2" data-box="10"><img src="/themes/bebiklub2014/src/images/contest/sen/puzzle1.png"
alt=""></li>
<li id="puzzle3" data-box="9"><img src="/themes/bebiklub2014/src/images/contest/sen/puzzle2.png"
alt=""></li>
<li id="puzzle4" data-box="8"><img src="/themes/bebiklub2014/src/images/contest/sen/puzzle3.png"
alt=""></li>
<li id="puzzle5" data-box="7"><img src="/themes/bebiklub2014/src/images/contest/sen/puzzle4.png"
alt=""></li>
<li id="puzzle6" data-box="11"><img src="/themes/bebiklub2014/src/images/contest/sen/puzzle5.png"
alt=""></li>
<li id="puzzle7" data-box="6"><img src="/themes/bebiklub2014/src/images/contest/sen/puzzle6.png"
alt=""></li>
<li id="puzzle8" data-box="5"><img src="/themes/bebiklub2014/src/images/contest/sen/puzzle7.png"
alt=""></li>
<li id="puzzle9" data-box="4"><img src="/themes/bebiklub2014/src/images/contest/sen/puzzle8.png"
alt=""></li>
<li id="puzzle10" data-box="3"><img src="/themes/bebiklub2014/src/images/contest/sen/puzzle9.png"
alt=""></li>
<li id="puzzle11" data-box="2"><img src="/themes/bebiklub2014/src/images/contest/sen/puzzle10.png"
alt=""></li>
<li id="puzzle12" data-box="1"><img src="/themes/bebiklub2014/src/images/contest/sen/puzzle11.png"
alt=""></li>
</ul>
</div>
</div>
</div>