-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
129 lines (102 loc) · 3.1 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
//Global variables
var finish1 = 0;
var finish2 = 0;
var draw = false;
var play1Win = false;
var play2Win = false;
//Wait for document to be ready
$(document).ready(function() {
console.log('You can code NOW!')
//popup window with instructions for the game
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.9);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
//The player part
var moveBox = 1;
var moveBox2 = 73;
//This function moves player 1 and player2 when
//"Right Arrow" or "Z" have been pressed respectively
$(document).keydown(function(press) {
if (press.keyCode === 77) {
console.log('right arrow has been pressed');
moveBox += 1;
moveTroll1(moveBox);
console.log(moveBox);
} else if (press.keyCode === 90) {
console.log('right arrow has been pressed');
moveBox2 += 1;
moveTroll2(moveBox2);
console.log(moveBox2);
} else {
return;
}
});
//This function moves "player1" from left to right
function moveTroll1(moveBox) {
if (moveBox !== 21) {
$('#box' + moveBox).css("background-image","url(images/troll1.png)");
$('#box' + (moveBox - 1)).css("background-image", "none");
console.log("box number " + moveBox + " " + "has been ocupied");
} else {
finish1 = moveBox;
compareWinner();
//alert("Game is over");
console.log("can't move any more");
return;
}
};
//This function moves the "player2" from left to right
function moveTroll2(moveBox2) {
if (moveBox2 !== 94) {
$('#box' + moveBox2).css("background-image", "url(images/trumenium.png)");
$('#box' + (moveBox2 - 1)).css("background-image", "none");
console.log("box number " + moveBox2 + " " + "has been ocupied");
} else {
finish2 = moveBox2;
compareWinner();
console.log("can't move any more");
return;
}
};
//This function compares who the winner of the game is
function compareWinner() {
if (finish1 === 21 && finish2 === 94) {
console.log("It's a draw");
$('.spacer').html("IT'S A DRAW!").addClass("animated rotateIn");
} else if (finish1 === 21) {
console.log("Player 1 has won!");
$('.spacer').html("CYCLOPIUM WINS!").addClass("animated rotateIn");
} else if (finish2 === 94) {
console.log("Player 2 has won!");
$('.spacer').html("TRYMENIUM WINS!").addClass("animated rotateIn");
} else {
return;
}
};