1
1
JSGL . ExampleHTML . Render ( {
2
2
backgroundColor : '#0F0F0F'
3
- } ) ; // render with default settings
4
- // JSGL.ExampleHTML.Render({
5
- // backgroundColor: 'red'
6
- // }); // override default settings (sets the background color of body to red)
3
+ } ) ;
7
4
8
- // Create Game Instance
9
5
let game = new JSGL . Game ( {
10
6
canvas : document . getElementById ( "gameCanvas" ) ,
11
- grid : new JSGL . Vector2 ( 8 , 6 ) ,
12
- autoResize : true ,
13
- refreshWhenUnfocused : true
7
+ grid : new JSGL . Vector2 ( 8 , 6 )
14
8
} ) ;
15
- // Add resource to load
9
+
16
10
game . LoadResource ( 'image' , 'points' , './resources/images/point.png' ) ;
17
- // game.LoadResource('image', 'player', './player.png');
18
- // game.LoadResource('image', 'enemy', './enemy.png');
19
11
20
12
game . RescaleCanvasToParentElement ( 0.95 ) ;
21
- // game.RescaleCanvasToParentElement(percentage);
22
13
23
- // Creating own JSGL Sprite GameObject
24
- class Enemy extends JSGL . Sprite {
14
+ class Enemy extends JSGL . Sprite {
25
15
move = true ;
26
16
27
- OnStart ( event ) {
17
+ OnStart ( event ) {
28
18
this . texture = event . game . GetImage ( 'points' ) ;
29
19
this . showHitbox = true ;
20
+ this . transform . rotate ( 360 * Math . random ( ) ) ;
30
21
}
31
- Update ( event ) {
32
- this . transform . rotate ( 30 * event . deltaTime ) ;
33
- if ( this . move )
22
+ Update ( event ) {
23
+ // this.transform.rotate(30 * event.deltaTime);
24
+ if ( this . move )
34
25
this . transform . move ( new JSGL . Vector2 ( 1 * event . deltaTime , 1 * event . deltaTime ) ) ;
26
+ this . transform . ifOnEdgeBounce ( event . game . grid ) ;
35
27
event . game . Update ( ) ;
36
28
}
37
- OnMouseClick ( event ) {
38
- console . log ( "Clicked! @" , event ) ;
29
+ OnMouseClick ( event ) {
30
+ console . log ( this ) ;
39
31
return true ;
40
32
}
41
33
}
42
34
43
- // Start loading and wait to load all resources.
44
- // game.on('loadAllResources', () => {
45
- // game.Start();
46
- // });
47
- // game.LoadAllResources();
48
35
console . log ( "Waiting for load.." ) ;
49
36
game . LoadGameAndStart ( ) . then ( ( ) => {
50
37
console . log ( "Loaded" ) ;
38
+ // game.on('draw', (event) => {
39
+ // game.renderer.fillFrame({
40
+ // color: '#F0F0F0'
41
+ // });
42
+ // game.renderer.drawRectangle(0, 0, 1, 1, {
43
+ // shadow: {
44
+ // color: 'black',
45
+ // offsetX: 0.05,
46
+ // offsetY: 0.05,
47
+ // blur: 0.4
48
+ // }
49
+ // });
50
+ // // game.renderer.drawTriangle(2, 0, 1, 1, {
51
+ // // color: 'blue'
52
+ // // });
53
+ // //
54
+ // game.renderer.drawRectangle(4.9, 0, 1.2, 3.1, {
55
+ // alpha: 0.2
56
+ // });
57
+ // game.renderer.drawCircle(5, 0, 1, {
58
+ // color: 'green',
59
+ // border: true,
60
+ // fill: true,
61
+ // alpha: 0.1
62
+ // });
63
+ // game.renderer.drawCircle(5, 1, 1, {
64
+ // color: 'yellow',
65
+ // border: true,
66
+ // fill: true,
67
+ // alpha: 0.1
68
+ // });
69
+ // game.renderer.drawCircle(5, 2, 1, {
70
+ // color: 'red',
71
+ // border: true,
72
+ // fill: true
73
+ // });
74
+ // //
75
+ // game.renderer.drawRectangle(1, 2, 1, 1, {
76
+ // color: 'magenta',
77
+ // angle: 45,
78
+ // border: true,
79
+ // borderColor: 'red',
80
+ // alpha: 0.1,
81
+ // shadow: {
82
+ // color: 'red',
83
+ // offsetX: 0.1,
84
+ // offsetY: 0.1,
85
+ // blur: 1
86
+ // }
87
+ // });
88
+ // });
89
+ // game.on('mouseUp', (event) => {
90
+ // console.log('Mouse up!');
91
+ // })
92
+ // game.on('mouseDown', (event) => {
93
+ // console.log('Mouse down!');
94
+ // })
95
+ // game.on('mouseClick', (event) => {
96
+ // console.log(event.mousePos, event.mouseClientPos);
97
+ // });
51
98
game . on ( 'draw' , ( event ) => {
52
99
game . renderer . fillFrame ( {
53
100
color : '#F0F0F0'
54
101
} ) ;
55
- game . renderer . drawRectangle ( 0 , 0 , 1 , 1 , {
56
- shadow : {
57
- color : 'black' ,
58
- offsetX : 0.05 ,
59
- offsetY : 0.05 ,
60
- blur : 0.4
61
- }
62
- } ) ;
63
- // game.renderer.drawTriangle(2, 0, 1, 1, {
64
- // color: 'blue'
65
- // });
66
- //
67
- game . renderer . drawRectangle ( 4.9 , 0 , 1.2 , 3.1 , {
68
- alpha : 0.2
69
- } ) ;
70
- game . renderer . drawCircle ( 5 , 0 , 1 , {
71
- color : 'green' ,
72
- border : true ,
73
- fill : true ,
74
- alpha : 0.1
75
- } ) ;
76
- game . renderer . drawCircle ( 5 , 1 , 1 , {
77
- color : 'yellow' ,
78
- border : true ,
79
- fill : true ,
80
- alpha : 0.1
81
- } ) ;
82
- game . renderer . drawCircle ( 5 , 2 , 1 , {
83
- color : 'red' ,
84
- border : true ,
85
- fill : true
86
- } ) ;
87
- //
88
- game . renderer . drawRectangle ( 1 , 2 , 1 , 1 , {
89
- color : 'magenta' ,
90
- angle : 45 ,
91
- border : true ,
92
- borderColor : 'red' ,
93
- alpha : 0.1 ,
94
- shadow : {
95
- color : 'red' ,
96
- offsetX : 0.1 ,
97
- offsetY : 0.1 ,
98
- blur : 1
99
- }
100
- } ) ;
101
- } ) ;
102
- game . on ( 'mouseUp' , ( event ) => {
103
- console . log ( 'Mouse up!' ) ;
104
- } )
105
- game . on ( 'mouseDown' , ( event ) => {
106
- console . log ( 'Mouse down!' ) ;
107
- } )
108
- game . on ( 'mouseClick' , ( event ) => {
109
- console . log ( event . mousePos , event . mouseClientPos ) ;
110
102
} ) ;
111
103
let enemy = new Enemy ( ) ;
112
104
enemy . transform . addX ( 3 ) . addY ( 1 ) ;
@@ -115,4 +107,10 @@ game.LoadGameAndStart().then(() => {
115
107
game . AddGameObject ( new Enemy ( ) ) . showHitbox = false ;
116
108
game . AddGameObject ( new Enemy ( ) ) . transform . add ( new JSGL . Vector2 ( 3.5 , 2.5 ) ) ;
117
109
game . AddGameObject ( new Enemy ( ) ) . transform . add ( new JSGL . Vector2 ( 0 , 3 ) ) ;
110
+
111
+ let shape = new JSGL . Shape ( ) ;
112
+ shape . properties . color = 'red' ;
113
+ shape . type = JSGL . ShapeType . Cube ;
114
+ shape . transform . goTo ( game . GetRandomPosition ( ) ) ;
115
+ game . AddGameObject ( shape ) ;
118
116
} ) ;
0 commit comments