ABEgame.github.io/MenuView.ts at master · ABEgame/ABEgame.github.io · GitHub

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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
/// <reference path="Resources.ts" />
module Game{
	export class MenuView{
		resources;
		menu_background1;
		menu_background2;
		blueBackground;
		balloon;
		slime;
		orangeBackground;
		arrow;
		stand;
		kids;
		noCatSel;
		context;
		width;
		height;
		gameMode
		menuOptions:string[];
		balloonAnimation;
		youCanClick;
		animationOne;
		animationTwo:boolean;
		animationThree:boolean;
		balloonDirection;
		buttons;
		buttons2;

		balloonHeight;


		constructor(resources,context,width,height,gameMode){
			this.resources = resources;
			this.buttons = this.resources.buttons;
			this.buttons2 = this.resources.buttons2;
			this.orangeBackground = this.resources.orangeBackground;
			this.balloon = this.resources.balloon;
			this.stand = this.resources.stand;
			this.blueBackground = this.resources.blueBackground;
			this.slime = this.resources.slime;
			this.menu_background1 = this.resources.menu_background1;
			this.kids = this.resources.kids;
			this.menu_background2 = this.resources.menu_background2;
			this.arrow = this.resources.leftArrowPressed;
			this.noCatSel = this.resources.noCatSel;
			this.context = context;
			this.width = width;
			var self = this;
			this.height = height;
			this.gameMode = gameMode;
			this.menuOptions = ["Play Game", "Categories", "Mode", "Help"];
			this.animationTwo = false;
			this.animationThree = false;
			this.youCanClick = false;
			this.balloonHeight = this.height*200/667;
			this.balloonDirection = false;
		}
		renderNotEnoughCategories(height,velocity,friction){
			clearTimeout(this.balloonAnimation);
			if(friction == 3){
				this.youCanClick = true;
			}
			else{
				var gravity = 0.2;
				var bounceFactor = 0.5;
				this.clearCanvas();
				this.drawBackGround();
				this.context.drawImage(this.balloon,this.width - this.width*230/375,this.balloonHeight,this.width*280/375,this.height*320/667);
				this.drawButtons();
				this.context.drawImage(this.noCatSel, this.width/5, height, this.width/1.5, this.height/3);
				height += velocity;
				velocity += gravity;
				if(height + this.height/6 > this.height/2) {
					height = this.height/2 - this.height/6;
					velocity *= -bounceFactor;
					++friction;
				}
				var self = this;
				var f = function(){self.renderNotEnoughCategories(height,velocity, friction)};
				this.animationOne = setTimeout(f, 1000/60);
			}
		}
		clearCanvas(){
			this.context.clearRect(0, 0, this.width, this.height);
		}
		drawBackGround(){
			this.context.drawImage(this.menu_background1, 0, 0, this.width, this.height);
		}
		drawButtons(){
			if(this.gameMode == 1){
				this.context.drawImage(this.buttons,0,this.height/2.5,this.width/2,this.height/2.4);

			}else{
				this.context.drawImage(this.buttons2,0,this.height/2.5,this.width/2,this.height/2.4);
			}
		}

		render(gameMode){
			if(this.balloonAnimation){
				clearTimeout(this.balloonAnimation);
			}

			this.context.drawImage(this.menu_background1, 0, 0, this.width, this.height);

			var targetHeightTop = this.height*180/667;
			var targetHeightBottom = this.height*250/667;
			this.balloonAnimation1(this.balloonHeight,targetHeightTop, targetHeightBottom,this.balloonDirection);

		}
		balloonAnimation1(height,top,bottom,direction){
			if(height>=bottom){
				direction = true;
			}else if(height <= top){
				direction = false;
			}
			if(direction){
				this.clearCanvas();
				this.drawBackGround();
				this.context.drawImage(this.balloon,this.width - this.width*230/375,height,this.width*280/375,this.height*320/667);
				this.drawButtons();
				height-=.1;
				this.balloonHeight = height;
				this.balloonDirection = direction
				var self = this;
				var f = function(){self.balloonAnimation1(height,top,bottom,direction)};
				this.balloonAnimation = setTimeout(f, 1000/600);
			}else{
				this.clearCanvas();
				this.drawBackGround();
				this.context.drawImage(this.balloon,this.width - this.width*230/375,height,this.width*280/375,this.height*320/667);
				this.drawButtons();
				height+=.1;
				this.balloonHeight = height;
				this.balloonDirection = direction;
				var self = this;
				var f = function(){self.balloonAnimation1(height,top,bottom,direction)};
				this.balloonAnimation = setTimeout(f, 1000/600);
			}

		}


	}
}