Skip to content

Commit 742df13

Browse files
Benur21Benur21
committed
create Board class & increase game size (Monopoly)
1 parent bd161e8 commit 742df13

4 files changed

Lines changed: 76 additions & 48 deletions

File tree

‎Monopoly.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
</style>
4242
</head>
4343
<body>
44-
<canvas id="canvas" width="1000" height="1000">O teu browser não suporta a tag canvas do HTML5.</canvas>
44+
<canvas id="canvas" width="1600" height="1000">O teu browser não suporta a tag canvas do HTML5.</canvas>
4545
<div id="toolBar">
4646
<button id="backToIndex">Voltar</button>
4747
<button id="reloadButton">Recarregar</button>

‎src/Monopoly/Classes.ts‎

Lines changed: 72 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
import { Rectangle } from "../JSTools";
1+
import { Control, Rectangle } from "../JSTools";
2+
3+
const canvas = (window as any).globals.canvas as HTMLCanvasElement;
4+
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
25

36
class Place extends Rectangle {
47
type: string;
@@ -10,4 +13,71 @@ class Place extends Rectangle {
1013
}
1114
}
1215

13-
export { Place };
16+
class Board extends Control {
17+
width: number;
18+
height: number;
19+
places: Place[];
20+
constructor(x: number, y: number) {
21+
super(x, y);
22+
this.width = 980;
23+
this.height = 980;
24+
this.places = [];
25+
26+
// Width of the board path
27+
var pathWidth = 195*canvas.height/1000;
28+
// Width of normal places
29+
var normalPlacesWidth = (this.width-pathWidth*2)/5;
30+
31+
for (let i = 0; i < 24; i++) { //Creating and Moving Places
32+
switch (true) { //Places are 100x195
33+
//Corner Places
34+
case (i==0):
35+
this.places[i] = new Place(this.width - pathWidth, this.height - pathWidth, pathWidth, pathWidth, "start");
36+
this.places[i].color = "#FF793F";
37+
break;
38+
case (i==6):
39+
this.places[i] = new Place(0, this.height - pathWidth, pathWidth, pathWidth, "prison_visit");
40+
this.places[i].color = "#FF793F";
41+
break;
42+
case (i==12):
43+
this.places[i] = new Place(0, 0, pathWidth, pathWidth, "free_parking");
44+
this.places[i].color = "#FF793F";
45+
break;
46+
case (i==18):
47+
this.places[i] = new Place(this.width - pathWidth, 0, pathWidth, pathWidth, "police");
48+
this.places[i].color = "#FF793F";
49+
break;
50+
//Normal Places
51+
case (i>=1&&i<=5):
52+
this.places[i] = new Place(this.width - pathWidth-normalPlacesWidth*(i%6), this.height - pathWidth, normalPlacesWidth, pathWidth, "normalA"+(i%6));
53+
this.places[i].color = "#95CCF9";
54+
break;
55+
case (i>=7&&i<=11):
56+
this.places[i] = new Place(0, this.height - pathWidth-normalPlacesWidth*(i%6), pathWidth, normalPlacesWidth, "normalB"+(i%6));
57+
this.places[i].color = "#95CCF9";
58+
break;
59+
case (i>=13&&i<=17):
60+
this.places[i] = new Place(pathWidth+normalPlacesWidth*((i%6)-1), 0, normalPlacesWidth, pathWidth, "normalC"+(i%6));
61+
this.places[i].color = "#95CCF9";
62+
break;
63+
case (i>=19&&i<=23):
64+
this.places[i] = new Place(this.width - pathWidth, pathWidth+normalPlacesWidth*((i%6)-1), pathWidth, normalPlacesWidth, "normalD"+(i%6));
65+
this.places[i].color = "#95CCF9";
66+
break;
67+
}
68+
this.places[i].showIndex = 50;
69+
this.places[i].outlinePosition = "center";
70+
}
71+
}
72+
73+
draw(): void {
74+
ctx.save();
75+
ctx.translate(this.x, this.y);
76+
for (let i = 0; i < this.places.length; i++) {
77+
this.places[i].draw();
78+
}
79+
ctx.restore();
80+
}
81+
}
82+
83+
export { Place, Board };

‎src/Monopoly/Initialization.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,5 +43,5 @@ if (ctx == null) {
4343
const canvasPadding = 10;
4444
resizeCanvas();
4545

46-
export { canvasPadding, places };
46+
export { canvasPadding };
4747

‎src/Monopoly/Main.ts‎

Lines changed: 2 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { canvasPadding } from './Initialization';
2-
import { Place } from './Classes';
2+
import { Board } from './Classes';
33
import { AnimationLOOP, GameState, JSWindow, TextButton } from '../JSTools';
44

55
const canvas = (window as any).globals.canvas;
@@ -29,50 +29,8 @@ startWindow.container.closeButton.onclick = () => {
2929
startWindow.hide();
3030
}
3131

32-
var pathWidth = 195*canvas.width/1000;
33-
var normalPlacesStep = (game.width-pathWidth*2)/5;
34-
35-
for (let i = 0; i < 24; i++) { //Creating and Moving Places
36-
switch (true) { //Places are 100x195
37-
//Corner Places
38-
case (i==0):
39-
game.container[i] = new Place(game.width-pathWidth, game.height-pathWidth, pathWidth, pathWidth, "cornerA");
40-
game.container[i].color = "#FF793F";
41-
break;
42-
case (i==6):
43-
game.container[i] = new Place(0, game.height-pathWidth, pathWidth, pathWidth, "cornerB");
44-
game.container[i].color = "#FF793F";
45-
break;
46-
case (i==12):
47-
game.container[i] = new Place(0, 0, pathWidth, pathWidth, "cornerC");
48-
game.container[i].color = "#FF793F";
49-
break;
50-
case (i==18):
51-
game.container[i] = new Place(game.width-pathWidth, 0, pathWidth, pathWidth, "cornerD");
52-
game.container[i].color = "#FF793F";
53-
break;
54-
//Normal Places
55-
case (i>=1&&i<=5):
56-
game.container[i] = new Place(game.width-pathWidth-normalPlacesStep*(i%6), game.height-pathWidth, normalPlacesStep, pathWidth, "normalA"+(i%6));
57-
game.container[i].color = "#95CCF9";
58-
break;
59-
case (i>=7&&i<=11):
60-
game.container[i] = new Place(0, game.height-pathWidth-normalPlacesStep*(i%6), pathWidth, normalPlacesStep, "normalB"+(i%6));
61-
game.container[i].color = "#95CCF9";
62-
break;
63-
case (i>=13&&i<=17):
64-
game.container[i] = new Place(pathWidth+normalPlacesStep*((i%6)-1), 0, normalPlacesStep, pathWidth, "normalC"+(i%6));
65-
game.container[i].color = "#95CCF9";
66-
break;
67-
case (i>=19&&i<=23):
68-
game.container[i] = new Place(game.width-pathWidth, pathWidth+normalPlacesStep*((i%6)-1), pathWidth, normalPlacesStep, "normalD"+(i%6));
69-
game.container[i].color = "#95CCF9";
70-
break;
71-
}
72-
game.container[i].showIndex = 50;
73-
game.container[i].outlinePosition = "center";
74-
}
7532

33+
game.container.board = new Board(0, 0);
7634
AnimationLOOP(function(){
7735
game.draw();
7836
});

0 commit comments

Comments
 (0)