diff --git a/index.html b/index.html index d49c4cb..594b754 100644 --- a/index.html +++ b/index.html @@ -6,15 +6,32 @@ Snake Game - TG Web App +
- +
+
+

Skin color

+
+
+
+

Mood

+
+
+
+
- +
+
+
+ +
+
+
diff --git a/index.js b/index.js index 883d3a6..4aae58a 100644 --- a/index.js +++ b/index.js @@ -1,9 +1,13 @@ // @name SnakeGame // @description A simple, fun game supports Web UI that allows user to play snake in real time and earn rewards. +// TODO: +// Define movements. +// Define collisions. // Real user data. class SnakeGame { players; + playerSettings; gameInProgress; winner; board; @@ -22,6 +26,12 @@ class SnakeGame { }; this.uiElements = { gameBoard: document.getElementById('gameBoard'), + gameHeroVariants: document.getElementById('gameBoardViews__HeroVariants'), + gameLevelVariants: document.getElementById('gameBoardViews__LevelVariants'), + }; + this.playerSettings = { + level: null, + player: null, }; this.initUI(); } @@ -30,6 +40,39 @@ class SnakeGame { if (this.uiControls.launchGame) { this.uiControls.launchGame.onclick = this.start.bind(this); } + + if (this.uiElements.gameHeroVariants) { + const heroSkins = SnakeGameCharacter.getSkins(); + const heroMoods = SnakeGameCharacter.getMoods(); + const gameLevels = SnakeGameBoard.getSkins(); + const heroSkinsContainer = document.querySelector('#gameBoardViews__HeroSkins .skinsContainer'); + const heroMoodsContainer = document.querySelector('#gameBoardViews__HeroMoods .moodsContainer'); + const levelVariants = document.querySelector('#gameBoardViews__LevelVariants .levelVariantsContainer'); + + Object.keys(heroSkins).map(skin => { + const skinElement = document.createElement('div'); + skinElement.id = `heroSkin_${heroSkins[skin]}`; + skinElement.className = "heroSkinAny"; + + heroSkinsContainer.appendChild(skinElement); + }); + + Object.keys(heroMoods).map(mood => { + const moodElement = document.createElement('div'); + moodElement.id = `heroMood_${heroMoods[mood]}`; + moodElement.className = "heroMoodAny"; + + heroMoodsContainer.appendChild(moodElement); + }); + + Object.keys(gameLevels).map(level => { + const levelElement = document.createElement('div'); + levelElement.id = `gameLevel_${gameLevels[level]}`; + levelElement.className = "gameLevelAny"; + + levelVariants.appendChild(levelElement); + }); + } } start(theme, maxСollisionsToLoose) { @@ -76,26 +119,55 @@ class SnakeGame { class SnakeGamePlayer { rewards; score; + levelTime; name; + speed; character; + uiControls; + uiElements; - constructor(name, existedRewards) { + constructor(name) { this.name = name; this.score = 0; - this.rewards = existedRewards || 0; + this.levelTime = 0; + this.speed = 10; this.character = null; + this.uiElements = { + player: null, + }; } - bindCharacter(skinColor, bodyLength, mood) { + initUI(gameView) { + const playerElement = document.createElement('div'); + playerElement.setAttribute('player-name', this.name); + playerElement.className = `gamePlayer gamePlayerSkin_${this.character.skinColor}`; + playerElement.style.width = this.character.bodyLength + 'px'; + this.uiElements.player = playerElement; + + gameView.appendChild(playerElement); + } + + bindCharacter(gameView, skinColor, bodyLength, mood) { this.character = new SnakeGameCharacter(skinColor, bodyLength, mood); + this.initUI(gameView, this.name); } unbindCharacter() { this.character = null; } - walk(distance, direction) { - console.log(`Snake crawls to distance ${distance} and direction ${direction}...`); + move(distanceInPixels, direction) { + console.log(`Snake crawls to distance ${distanceInPixels} and to ${direction}...`); + + this.uiElements.player.style[direction] = `${distanceInPixels}px`; + } + + increaseReward(add) { + this.rewards = this.rewards + add; + } + + increaseSpeed(add) { + this.speed = this.speed + add; } } @@ -136,17 +208,49 @@ class SnakeGameBoard { this.maxСollisionsToLoose = maxСollisionsToLoose || 10; this.uiElements = { mainView: null, + movePlayerControls: null, }; } - initUI(mainGameView) { - this.uiElements.mainView = document.createElement('div'); - this.uiElements.mainView.setAttribute('id', 'gameBoardViews__MainGame'); + initUI(mainGameView, heroName) { + mainGameView.innerHTML = + '
' + + '' + + '' + + '' + + '' + + '
' + + '
'; + this.uiElements.mainView = document.getElementById('gameBoardViews__MainGame'); + this.uiElements.movePlayerControls = document.getElementById('gameBoardViews__PlayerControls'); + + const player = new SnakeGamePlayer(); + player.bindCharacter(this.uiElements.mainView); + + ['left', 'right', 'top', 'bottom'].forEach(control => { + const controlElement = + document.getElementById(`control${control[0].toUpperCase()}${control.slice(1, control.length)}`); + + controlElement.addEventListener('click', e => { + e.preventDefault(); + + let reverseDirection; + + if (control === 'left') { + reverseDirection = 'right'; + } else if (control === 'right') { + reverseDirection = 'left'; + } else if (control === 'top') { + reverseDirection = 'bottom'; + } else if (control === 'bottom') { + reverseDirection = 'top'; + } + + const currentDistance = parseInt(player.uiElements.player.style[reverseDirection] || 0); - // TODO: Set skin color, etc. - - mainGameView.innerHTML = ''; - mainGameView.appendChild(this.uiElements.mainView); + player.move(currentDistance + 2, reverseDirection); + }); + }); } static getSkins() { diff --git a/style.css b/style.css index a651a64..b907f07 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,6 @@ #gameBoard { text-align: center; width: 100%; - padding: 10px; } #gameBoard button { @@ -11,10 +10,101 @@ #gameBoardViews__LaunchGame { padding: 10px; background-color: rgb(200, 252, 252); + min-height: 400px; +} + +#gameBoardViews__HeroVariants, #gameBoardViews__LevelVariants { + display: flex; + justify-content: center; + margin: auto; + width: 300px; +} + +#gameBoardViews__HeroSkins .skinsContainer, #gameBoardViews__HeroMoods .moodsContainer { + display: flex; + justify-content: center; + width: 100%; + position: relative; +} + +#gameBoardViews__HeroSkins .skinsContainer > div, #gameBoardViews__HeroMoods .moodsContainer > div { + width: 60px; + height: 40px; + margin: 1px; +} + +#gameBoardViews__LevelVariants .levelVariantsContainer { + display: flex; +} + +#gameBoardViews__LevelVariants .levelVariantsContainer, #gameBoardSection__Name { + margin-top: 10px; } #gameBoardViews__MainGame { width: 100%; - padding: 10px; background-color: rgb(215, 171, 255); + min-height: 400px; +} + +#gameBoardViews__PlayerControls { + max-width: 100px; + margin: auto; + padding: 40px 0; +} + +#gameBoardViews__PlayerControls #controlTop { + position: relative; + bottom: 20px; +} + +#gameBoardViews__PlayerControls #controlBottom { + position: relative; + top: 20px; + right: 40px; + width: 20px; +} + +div#heroSkin_punshRed { + background-color: red; +} + +div#heroSkin_punshGreen { + background-color: green; +} + +div.heroMoodAny { + background-color: gray; + cursor: pointer; +} + +div.heroSkinAny { + cursor: pointer; +} + +div.gameLevelAny { + cursor: pointer; + width: 60px; + height: 40px; + margin: 1px; + background-color: gray; +} + +div.heroMoodAny:hover, div.gameLevelAny:hover, .heroSkinAny:hover { + scale: 0.8; + transition: 0.5s scale; +} + +div.gamePlayer { + position: relative; + height: 24px; + border-radius: 12px; +} + +div.gamePlayer.gamePlayerSkin_punshGreen { + background-color: green; +} + +div.gamePlayer.gamePlayerSkin_punshRed { + background-color: brown; }