Skip to content

Commit 9876154

Browse files
sundarcodessundarcodes
committed
minion vs monster game
1 parent 6ef1216 commit 9876154

File tree

12 files changed

+30666
-0
lines changed

12 files changed

+30666
-0
lines changed

‎Animation/images/monster-426993_640.jpg‎

83.8 KB
Loading

‎AnimationExtended/animate.css‎

Lines changed: 2744 additions & 0 deletions
Large diffs are not rendered by default.

‎AnimationExtended/app.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
#playarea {
2+
width: 70vw;
3+
height: 75vh;
4+
position: relative;
5+
border-color: #d35400;
6+
border-width: 2px;
7+
border-style: solid;
8+
left: 50%;
9+
transform: translateX(-50%);
10+
}
11+
#car {
12+
width: 50px;
13+
height: 50px;
14+
position: absolute;
15+
background-image: url(./images/minion.jpg);
16+
background-size: cover;
17+
top:100px;
18+
left:10px;
19+
}
20+
.monster {
21+
width: 50px;
22+
height: 50px;
23+
position: absolute;
24+
background-image: url(./images/monster2.jpg);
25+
background-size: cover;
26+
top:50%;
27+
left:50%;
28+
/*transform: rotateZ(0.75turn);*/
29+
}
30+
#ControlSystem{
31+
width: 70vw;
32+
height: 10vh;
33+
position: relative;
34+
border-color: #3498db;
35+
border-width: 1px;
36+
border-style: solid;
37+
left: 50%;
38+
transform: translateX(-50%);
39+
text-align: center;
40+
}
41+
/*#road{
42+
width:inherit;
43+
border-width: 1px;
44+
border-bottom: thick dotted black;
45+
top:140px;
46+
position:absolute;
47+
}*/

‎AnimationExtended/app.js‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
$(document).ready(function(){
2+
new WOW().init();
3+
var game = {
4+
init: function(vehicle){
5+
this.vehicle=vehicle;
6+
this.setIntervalIdList=[];
7+
this.monsterList=[];
8+
this.monsterIdTracker=0;
9+
this.monsterMoveIntervalIds={};
10+
this.monsterHeight=50;
11+
this.monsterWidth=50;
12+
this.minionHeight=50;
13+
this.minionWidth=50;
14+
//$(this.vehicle).css('left','20px');
15+
//$(this.vehicle).css('top','20px');
16+
this.args = {
17+
right: {angle: "360deg", position: "left", increment: true},
18+
down: {angle: "90deg", position: "top", increment: true},
19+
left: {angle: "360deg", position: "left", increment: false},
20+
up: {angle: "90deg", position: "top", increment: false}
21+
};
22+
23+
},
24+
move: function(direction) {
25+
var thisArgs = this.args[direction];
26+
this.carStop();
27+
// $(this.vehicle).css('transform','rotateZ(' + thisArgs.angle + ')');
28+
this.vehicleSetIntervalId= setInterval(frame,10);
29+
this.setIntervalIdList.push(this.vehicleSetIntervalId);
30+
var pos = parseInt($(this.vehicle).css(thisArgs.position));
31+
var vehicle = this.vehicle;
32+
function frame(){
33+
if (thisArgs.increment){
34+
pos++;
35+
}else{
36+
pos--;
37+
}
38+
// Check if the object has hit the monsters or the border
39+
$('.monster').each(function()){
40+
monster=$(this);
41+
42+
43+
}
44+
$(vehicle).css(thisArgs.position,pos + 'px');
45+
}
46+
},
47+
carStop: function(){
48+
if (this.vehicleSetIntervalId){
49+
clearInterval(this.vehicleSetIntervalId);
50+
}
51+
},
52+
right: function(){this.move("right")},
53+
left: function(){this.move("left")},
54+
up: function(){this.move("up")},
55+
down: function(){this.move("down")},
56+
stop: function(){
57+
this.setIntervalIdList.forEach(function(id){
58+
clearInterval(id);
59+
});
60+
},
61+
startMonsterCreation: function(){
62+
dropMonsterFunctionId=setInterval(dropMonster,5000);
63+
this.setIntervalIdList.push(dropMonsterFunctionId);
64+
//this.monsterIdTracker++;
65+
var gameObj=this;
66+
function dropMonster(){
67+
console.log('monster is going to come now');
68+
// Create a monster
69+
var monster=$("<div/>");
70+
monster.addClass('monster wow tada');
71+
gameObj.monsterIdTracker++;
72+
var monsterId='monster'+gameObj.monsterIdTracker;
73+
monster.attr('id',monsterId)
74+
monster.appendTo($('#playarea'));
75+
gameObj.monsterList.push(monster);
76+
77+
monsterMovementSetIntervalId=setInterval(makeMonsterMove,1000);
78+
gameObj.setIntervalIdList.push(monsterMovementSetIntervalId);
79+
//var gameObj=this;
80+
function makeMonsterMove(){
81+
// Make it move randomly
82+
randomDirection=Math.ceil(Math.random()*4);
83+
switch(randomDirection){
84+
case 1:
85+
gameObj.moveMonster("right",monster);
86+
break;
87+
case 2:
88+
gameObj.moveMonster("left",monster);
89+
break;
90+
case 3:
91+
gameObj.moveMonster("up",monster);
92+
break;
93+
case 4:
94+
gameObj.moveMonster("down",monster);
95+
break;
96+
97+
}
98+
}
99+
}
100+
},
101+
moveMonster: function(direction,monster){
102+
var thisArgs = this.args[direction];
103+
monsterId=monster.attr('id');
104+
this.monsterStop(monsterId);
105+
// monster.css('transform','rotateZ(' + thisArgs.angle + ')');
106+
this.monsterMoveIntervalIds[monsterId]=setInterval(frame,10)
107+
this.setIntervalIdList.push(this.monsterMoveIntervalIds[monsterId]);
108+
var pos = parseInt(monster.css(thisArgs.position));
109+
function frame(){
110+
if (thisArgs.increment){
111+
pos++;
112+
}else{
113+
pos--;
114+
}
115+
monster.css(thisArgs.position,pos + 'px');
116+
}
117+
118+
},
119+
monsterStop: function(monsterId){
120+
if (this.monsterMoveIntervalIds[monsterId]){
121+
clearInterval(this.monsterMoveIntervalIds[monsterId]);
122+
}
123+
},
124+
start: function(){
125+
this.startMonsterCreation();
126+
this.checkBorderClash();
127+
},
128+
pause: function(){
129+
130+
},
131+
checkBorderClash:function(){
132+
// Check if any of the monster has touched the border every 10 ms
133+
this.checkBorderClashIntervalId=setInterval(monsterCheck,10);
134+
this.setIntervalIdList.push(this.checkBorderClashIntervalId);
135+
var gameObj=this;
136+
// Grab all monsters
137+
function monsterCheck(){
138+
if ($('.monster').length == 0){
139+
return;
140+
}
141+
$('.monster').each(function(){
142+
// Get the top position of monster
143+
monster=$(this);
144+
positionTop=parseInt(monster.css('top'));
145+
positionLeft=parseInt(monster.css('left'));
146+
playAreaHeight=parseInt($('#playarea').css('height'));
147+
playAreaWidth=parseInt($('#playarea').css('width'));
148+
if (positionTop<=0 || positionLeft<=0 || positionLeft >= playAreaWidth
149+
|| (positionTop+50)>=playAreaHeight){
150+
gameObj.monsterStop(monster.attr('id'));
151+
monster.addClass('shake');
152+
monster.attr("wow-duration","1s");
153+
monster.fadeIn(1200);
154+
monster.remove();
155+
}
156+
});
157+
}
158+
}
159+
};
160+
161+
162+
var car = $('#car');
163+
game.init(car);
164+
// Register mouse clicks
165+
$('#start').click(function(){
166+
game.start();
167+
});
168+
$('#stop').click(function(){
169+
game.stop();
170+
});
171+
// Handle Key press event
172+
$(document).keydown(function(e){
173+
switch(e.keyCode){
174+
// Left arrow
175+
case 37:
176+
game.left();
177+
e.preventDefault();
178+
break;
179+
// Up Arrow
180+
case 38:
181+
game.up();
182+
e.preventDefault();
183+
break;
184+
// Right Arrow
185+
case 39:
186+
game.right();
187+
e.preventDefault();
188+
break;
189+
// Down Arrow
190+
case 40: game.down();
191+
e.preventDefault();
192+
break;
193+
case 13:
194+
game.stop();
195+
e.preventDefault();
196+
break;
197+
}
198+
});
199+
200+
});

‎AnimationExtended/images/car.JPG‎

427 KB
Loading

‎AnimationExtended/images/minion.jpg‎

191 KB
Loading

‎AnimationExtended/images/monster.jpg‎

83.8 KB
Loading

‎AnimationExtended/images/monster2.jpg‎

137 KB
Loading

‎AnimationExtended/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>car game</title>
5+
<link rel="stylesheet" href="animate.css">
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
7+
<link rel="stylesheet" href="app.css">
8+
<script type="text/javascript" src="wow.js"></script>
9+
<script type="text/javascript" src="jquery.js"></script>
10+
<script type="text/javascript" src="app.js"></script>
11+
</head>
12+
<body>
13+
<div id="playarea">
14+
<div id="car"></div>
15+
</div>
16+
<!-- <button id="right">Right</button>
17+
<button id="down">Down</button>
18+
<button id="left">Left</button>
19+
<button id="up">Up</button>
20+
<button id="stop">Stop</button>
21+
-->
22+
<div id="ControlSystem">
23+
<button id="start" class="fa fa-play"></button>
24+
<button id="stop" class="fa fa-stop"></button>
25+
<button id="pause" class="fa fa-pause"></button>
26+
</div>
27+
28+
</body>
29+
</html>

0 commit comments

Comments
 (0)