Skip to content

Commit 05d89d2

Browse files
itsdoroshitsdorosh
committed
fixes from lesson
1 parent bff9b56 commit 05d89d2

File tree

5 files changed

+65
-62
lines changed

5 files changed

+65
-62
lines changed

‎index.html‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -28,49 +28,53 @@ <h1 id="gameOverCaption" class="hide">GAME OVER</h1>
2828
<script src="./src/engine.js"></script>
2929

3030
<script>
31+
// containers
3132
const canvasContainer = document.getElementById('canvasContainer');
33+
const inGameButtons = document.getElementById('inGameButtons');
34+
const gameButtons = document.getElementById('gameButtons');
3235

33-
const viewer = new Viewer(canvasContainer);
36+
// buttons
37+
const playButton = document.getElementById('playButton');
38+
const pauseButton = document.getElementById('pauseButton');
39+
const restartButton = document.getElementById('restartButton');
3440

35-
const controls = new Controls();
36-
controls.setRootObjectForSubscriptions(canvasContainer);
37-
controls.init();
41+
// captions
42+
const greetingCaption = document.getElementById('greetingCaption');
43+
const gameOverCaption = document.getElementById('gameOverCaption');
3844

45+
const viewer = new Viewer(canvasContainer);
46+
const controls = new Controls(canvasContainer);
3947
const raycaster = new Raycaster(viewer.camera);
40-
4148
const engine = new Engine(viewer, controls, raycaster);
4249

4350
engine.onPointCountUpdate((count) => {
4451
document.getElementById('pointsCount').innerText = `Count: ${count}`;
4552
});
4653

4754
engine.onGameOver(() => {
48-
document.getElementById('gameButtons').classList.remove('hide');
49-
document.getElementById('greetingCaption').classList.add('hide');
50-
document.getElementById('gameOverCaption').classList.remove('hide');
51-
document.getElementById('playButton').classList.add('hide');
52-
document.getElementById('restartButton').classList.remove('hide');
55+
gameButtons.classList.remove('hide');
56+
greetingCaption.classList.add('hide');
57+
gameOverCaption.classList.remove('hide');
58+
playButton.classList.add('hide');
59+
restartButton.classList.remove('hide');
5360
});
5461

55-
const playButton = document.getElementById('playButton');
5662
playButton.addEventListener('click', () => {
57-
document.getElementById('gameButtons').classList.add('hide');
58-
document.getElementById('inGameButtons').classList.remove('hide');
63+
gameButtons.classList.add('hide');
64+
inGameButtons.classList.remove('hide');
5965
engine.play();
6066
});
6167

62-
const pauseButton = document.getElementById('pauseButton');
6368
pauseButton.addEventListener('click', () => {
64-
document.getElementById('gameButtons').classList.remove('hide');
65-
document.getElementById('restartButton').classList.remove('hide');
69+
gameButtons.classList.remove('hide');
70+
restartButton.classList.remove('hide');
6671
engine.pause();
6772
});
6873

69-
const restartButton = document.getElementById('restartButton');
7074
restartButton.addEventListener('click', () => {
71-
document.getElementById('greetingCaption').classList.add('hide');
72-
document.getElementById('gameOverCaption').classList.remove('hide');
73-
document.getElementById('gameButtons').classList.add('hide');
75+
greetingCaption.classList.add('hide');
76+
gameOverCaption.classList.remove('hide');
77+
gameButtons.classList.add('hide');
7478
engine.restart();
7579
});
7680
</script>

‎src/constants.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,5 @@ const GENERATE_ENEMIES_INTERVAL_TIME = 350;
1212
const DEADLINE = 10;
1313

1414
const RANGE_X = 10;
15+
16+
const RANGE_Y = 2;

‎src/controls.js‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,10 @@
66
class Controls {
77
rootObject;
88

9-
constructor() {
9+
constructor(rootObject = document.body) {
1010
this.eventStorage = {};
11-
}
12-
13-
/**
14-
* @method setRootObjectForSubscriptions
15-
* @description this method allows you set container, from witch we should be notified about user interactions
16-
* @param rootObject - an HTMLElement for subscriptions
17-
*/
18-
setRootObjectForSubscriptions(rootObject = document.body) {
1911
this.rootObject = rootObject;
12+
this.init();
2013
}
2114

2215
/**

‎src/engine.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ class Engine {
100100
this.play();
101101
}
102102

103-
destroyEnemy(enemyId) {
103+
destroyEnemy(enemyId) {
104104
const reward = this.existingEnemies.find(({ id }) => id === enemyId).value;
105105
this.updatePointCount(this._pointCount += reward);
106106
this.existingEnemies = this.existingEnemies.filter(({ id }) => id !== enemyId);

‎src/viewer.js‎

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ class Viewer {
1515
const { offsetWidth, offsetHeight } = this.HTMLContainer;
1616
this.scene = new THREE.Scene();
1717
this.camera = new THREE.PerspectiveCamera(70, offsetWidth / offsetHeight, 0.1, 1000);
18-
this.camera.position.set(0, 1, DEADLINE + 2);
18+
this.camera.position.set(0, 1, DEADLINE + 5);
1919
this.camera.lookAt(0, 2.5, 0);
2020
this.renderer = new THREE.WebGLRenderer({ antialias: true });
2121
this.renderer.setSize(offsetWidth, offsetHeight);
@@ -65,49 +65,49 @@ class Viewer {
6565

6666
/**
6767
* @method drawObject
68-
* @param obj - {object with params like: type: 'text', content: 'text', }
68+
* @param config - {object with params like: type: 'text', content: 'text', }
6969
*/
70-
drawObject(obj) {
71-
const enemy = this._makeEmojiSprite(obj.look, .3);
70+
drawObject(config) {
71+
const obj = this._makeEmojiSprite(config.look);
7272

73-
enemy.position.set(this.getRandomIntInclusive(-RANGE_X, RANGE_X), 0.5, -DEADLINE);
74-
this._objContainer.add(enemy);
73+
obj.position.set(
74+
this.getRandomInt(-RANGE_X, RANGE_X),
75+
this.getRandomFloat(0, RANGE_Y),
76+
-DEADLINE
77+
);
78+
79+
this._objContainer.add(obj);
7580

76-
return enemy.uuid;
81+
return obj.uuid;
7782
}
7883

79-
_makeEmojiSprite(message, emojiSize = 2.5) {
80-
let url = window.location.search.substring(1);
81-
let emojiwidth = new URLSearchParams(url).get("emojiWidth")
82-
? new URLSearchParams(url).get("emojiWidth")
83-
: 80;
84-
let fontface = "Arial";
85-
let fontsize = emojiwidth * 0.75;
86-
87-
let canvas = document.createElement("canvas");
88-
canvas.width = emojiwidth;
89-
canvas.height = emojiwidth;
90-
let context = canvas.getContext("2d");
91-
context.font = `Bold ${fontsize}px ${fontface}`;
92-
context.font = `Bold ${fontsize}px ${fontface}`;
84+
_makeEmojiSprite(look, emojiTextureSize = 100) {
85+
const emojiCanvas = document.createElement('canvas');
86+
87+
emojiCanvas.width = emojiTextureSize;
88+
emojiCanvas.height = emojiTextureSize;
89+
90+
const fontFace = 'Arial';
91+
const fontSize = emojiTextureSize * 0.75;
92+
93+
const context = emojiCanvas.getContext("2d");
94+
context.font = `Bold ${fontSize}px ${fontFace}`;
9395
context.lineWidth = 1;
94-
context.fillText(message, -2, fontsize - 3);
96+
context.fillText(look, -2, fontSize - 3);
9597

96-
let texture = new THREE.Texture(canvas);
97-
texture.needsUpdate = true;
98+
const emojiTexture = new THREE.Texture(emojiCanvas);
99+
emojiTexture.needsUpdate = true;
98100

99-
let spriteMaterial = new THREE.SpriteMaterial({
100-
map: texture,
101+
const spriteMaterial = new THREE.SpriteMaterial({
102+
map: emojiTexture,
101103
transparent: false,
102104
alphaTest: 0.5
103105
});
104106

105107
let sprite = new THREE.Sprite(spriteMaterial);
106-
sprite.scale.set(
107-
emojiSize * 0.5 * fontsize,
108-
emojiSize * 0.45 * fontsize,
109-
0.25 * fontsize
110-
);
108+
109+
sprite.scale.set(3, 3, 3);
110+
111111
return sprite;
112112
}
113113

@@ -122,9 +122,13 @@ class Viewer {
122122
}
123123
}
124124

125-
getRandomIntInclusive(min, max) {
125+
getRandomInt(min, max) {
126126
min = Math.ceil(min);
127127
max = Math.floor(max);
128128
return Math.floor(Math.random() * (max - min + 1) + min);
129129
}
130+
131+
getRandomFloat(min, max) {
132+
return Math.random() * (max - min) + min;
133+
}
130134
}

0 commit comments

Comments
 (0)