Skip to content

Commit eba0314

Browse files
committed
Extendeding the Minion Monster Game using OOPs
1 parent 6f5e928 commit eba0314

File tree

5 files changed

+132
-16
lines changed

5 files changed

+132
-16
lines changed

AnimationExtended/app.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
left: 50%;
99
transform: translateX(-50%);
1010
}
11-
#car {
11+
#minion {
1212
width: 50px;
1313
height: 50px;
1414
position: absolute;

AnimationExtended/app.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ $(document).ready(function(){
2323
},
2424
move: function(direction) {
2525
var thisArgs = this.args[direction];
26-
this.carStop();
26+
this.minionStop();
2727
// $(this.minion).css('transform','rotateZ(' + thisArgs.angle + ')');
2828
this.minionSetIntervalId= setInterval(frame,10);
2929
this.setIntervalIdList.push(this.minionSetIntervalId);
@@ -76,7 +76,7 @@ $(document).ready(function(){
7676
$(minion).css(thisArgs.position,pos + 'px');
7777
}
7878
},
79-
carStop: function(){
79+
minionStop: function(){
8080
if (this.minionSetIntervalId){
8181
clearInterval(this.minionSetIntervalId);
8282
}
@@ -191,8 +191,8 @@ $(document).ready(function(){
191191
};
192192

193193

194-
var car = $('#car');
195-
game.init(car);
194+
var minion = $('#minion');
195+
game.init(minion);
196196
// Register mouse clicks
197197
$('#start').click(function(){
198198
game.start();

AnimationExtended/app_OOPs.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
'use strict';
2+
3+
class MovingObject{
4+
constructor(movingObj){
5+
this.movingObject=movingObj;
6+
// The followig is for deducing the direction change parameters
7+
this.directionMapper={
8+
"left":{newDirection:"left",increment:false},
9+
"right":{newDirection:"left",increment:true},
10+
"up":{newDirection:"top",increment:false},
11+
"down":{newDirection:"top",increment:true}
12+
};
13+
this.currentSpeed=1; // You start with 1st gear and can move up till 5
14+
}
15+
move(){
16+
this.setIntervalId=setIntervalId(keepMoving,5);
17+
var currentMovingObject=this;
18+
var posToChange=parseInt(this.movingObj.css(this.currentDirectionGuide.newDirection));
19+
function keepMoving(){
20+
if (currentMovingObject.increment){
21+
posToChange=posToChange+currentMovingObject.currentSpeed;
22+
}else{
23+
posToChange=posToChange-currentMovingObject.currentSpeed;
24+
}
25+
// Apply the new posistion to the moving object
26+
currentMovingObject.movingObj.css(currentMovingObject.currentDirectionGuide.newDirection,posToChange+'px');
27+
}
28+
}
29+
changeDirection(directionToChange){
30+
this.currentDirectionGuide=this.directionMapper[directionToChange];
31+
}
32+
stop(){
33+
if (this.setIntervalId){
34+
clearInterval(this.setIntervalId);
35+
}
36+
}
37+
increaseSpeed(){
38+
if(this.currentSpeed<=5)
39+
{
40+
this.currentSpeed++;
41+
}
42+
}
43+
decreaseSpeed(){
44+
if(this.currentSpeed>=1)
45+
{
46+
this.currentSpeed--;
47+
}
48+
}
49+
50+
}
51+
52+
class Minion extends MovingObject{
53+
constructor(minon){
54+
super(minion);
55+
}
56+
}
57+
58+
class Monster extends MovingObject{
59+
constructor(monster){
60+
super(monster);
61+
}
62+
}
63+
64+
class Candy{
65+
constructor(){
66+
67+
}
68+
}
69+
70+
class GameController{
71+
constructor(minionObj){
72+
this.minion=minionObj;
73+
}
74+
createMonster(){
75+
76+
}
77+
checkBorderDash(){
78+
79+
}
80+
turn(movingObject,direction){
81+
82+
}
83+
}
84+
85+
class GamePlayArea{
86+
constructor(width,height){
87+
this.width=width;
88+
this.height=height;
89+
}
90+
}
91+
92+
93+
$(document).ready(function(){
94+
// Create Objects
95+
// Get reference to minion DOM Element
96+
var minionDomElement=$('#minion');
97+
var minionObj=new Minion(minionDomElement);
98+
99+
});
100+

AnimationExtended/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</head>
1313
<body>
1414
<div id="playarea">
15-
<div id="car"></div>
15+
<div id="minion"></div>
1616
</div>
1717
<!-- <button id="right">Right</button>
1818
<button id="down">Down</button>

AnimationUsingOOP/app.js

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,30 @@
11
'use strict';
22

33
class Car{
4-
constructor(inputDomElement){
4+
constructor(inputDomElement,model){
55
this.domElement=inputDomElement;
66
this.domElement.css('left','10px');
77
this.domElement.css('top','10px');
88
this.newDirection='left';
99
this.increment=true;
10+
this.model=model;
11+
this.currentSpeed=1;
1012
}
1113
move(){
12-
this.setIntervalId=setInterval(moveCar,5);
13-
console.log(this.newDirection);
14-
console.log(this.increment);
14+
this.setIntervalId=setInterval(moveCar,5)
15+
console.log(this.currentSpeed);
16+
// console.log(this.newDirection);
17+
// console.log(this.increment);
1518
var currentPos = parseInt(this.domElement.css(this.newDirection));
16-
console.log(this.newDirection);
19+
// console.log(this.newDirection);
1720
var domElement=this.domElement;
1821
var carObj=this;
1922
function moveCar(){
2023
if (carObj.increment){
21-
currentPos++;
24+
currentPos=currentPos+carObj.currentSpeed;
2225
}else{
23-
currentPos--;
26+
currentPos=currentPos-carObj.currentSpeed;
27+
//currentPos--;
2428
}
2529
domElement.css(carObj.newDirection,currentPos+'px');
2630
}
@@ -53,7 +57,9 @@ class Car{
5357

5458
}
5559
increaseSpeed(){
56-
60+
if (this.currentSpeed<=5){
61+
this.currentSpeed++;
62+
}
5763
}
5864
}
5965

@@ -88,14 +94,20 @@ class ControlSystem{
8894
this.car.stop();
8995
}
9096
accelerate(){
91-
97+
//this.car.stop();
98+
this.car.increaseSpeed();
99+
//this.car.move();
92100
}
93101
}
94102

95103
$(document).ready(function(){
96104
var carDomElement=$('#car');
97-
var carObject = new Car(carDomElement);
105+
var carObject = new Car(carDomElement,"SUV");
106+
var car1Object=new Car(carDomElement,"Sedan");
107+
console.log(carObject);
108+
console.log(car1Object);
98109
var objControlSystem = new ControlSystem(carObject);
110+
console.log(objControlSystem);
99111

100112
$(document).keydown(function(key){
101113
console.log(key.keyCode);
@@ -114,6 +126,10 @@ $(document).ready(function(){
114126
break;
115127
case 32://When space, stop the car
116128
objControlSystem.stop();
129+
break;
130+
case 65: // accelerate when a is pressed
131+
objControlSystem.accelerate();
132+
break;
117133
}
118134

119135
});

0 commit comments

Comments
 (0)