diff --git a/README.md b/README.md index 317a3e58..056092d7 100644 --- a/README.md +++ b/README.md @@ -1,96 +1,114 @@ -# Project Name (Start editing here) - +# Project #1: Tempo Shot +Created by: [__Ming Yi Koh__](https://github.com/mingyikoh) +
-# ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) Project #1: The Game - -### Overview - -Let's start out with something fun - **a game!** - -Everyone will get a chance to **be creative**, and work through some really **tough programming challenges** – since you've already gotten your feet wet with Tic Tac Toe, it's up to you to come up with a fun and interesting game to build. - -**You will be working individually for this project**, but we'll be guiding you along the process and helping as you go. Show us what you've got! - - ---- - -### Technical Requirements - -Your app must: - -* **Render a game in the browser** -* **Any number of players** will be okay, switch turns will be great -* **Design logic for winning** & **visually display which player won** -* **Include separate HTML / CSS / JavaScript files** -* Stick with **KISS (Keep It Simple Stupid)** and **DRY (Don't Repeat Yourself)** principles -* Use **Javascript** for **DOM manipulation**, jQuery is not compulsory -* **Deploy your game online**, where the rest of the world can access it -* Use **semantic markup** for HTML and CSS (adhere to best practices) -* **No canvas** project will be accepted, only HTML5 + CSS3 + JS please - ---- - -### Necessary Deliverables - -* A **working game, built by you**, hosted somewhere on the internet -* A **link to your hosted working game** in the URL section of your GitHub repo -* A **git repository hosted on GitHub**, with a link to your hosted game, and frequent commits dating back to the very beginning of the project -* **A ``readme.md`` file** with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc. - ---- - -### Suggested Ways to Get Started - -* **Break the project down into different components** (data, presentation, views, style, DOM manipulation) and brainstorm each component individually. Use whiteboards! -* **Use your Development Tools** (console.log, inspector, alert statements, etc) to debug and solve problems -* Work through the lessons in class & ask questions when you need to! Think about adding relevant code to your game each night, instead of, you know... _procrastinating_. -* **Commit early, commit often.** Don’t be afraid to break something because you can always go back in time to a previous version. -* **Consult documentation resources** (MDN, jQuery, etc.) at home to better understand what you’ll be getting into. -* **Don’t be afraid to write code that you know you will have to remove later.** Create temporary elements (buttons, links, etc) that trigger events if real data is not available. For example, if you’re trying to figure out how to change some text when the game is over but you haven’t solved the win/lose game logic, you can create a button to simulate that until then. +[*Click here to play*!](https://mingyikoh.github.io/project-1/) +![gameScreen](./assets/img/gameScreen.png) --- +## Overview +*Tempo Shot* is a music based first-person-shooter game that tests your reflexes and judgement. Managing your inventory of ammo and grenades is key to winning. -### Potential Project Ideas - -##### Blackjack -Make a one player game where people down on their luck can lose all their money by guessing which card the computer will deal next! +*Please turn on your volume while playing.* -##### Self-scoring Trivia -Test your wits & knowledge with whatever-the-heck you know about (so you can actually win). Guess answers, have the computer tell you how right you are! +#### Objective +Survive for *two* minutes. Lose all health and you lose. ---- - -### Useful Resources +#### How to play +Use your mouse to aim and left click to shoot them. Shooting enemies will damage them, some enemies require more shots to kill. Failure to kill them before they disappear will reduce your health. +Right click to use *grenades* which damage all visible enemies. +Shooting *allies* cause you to lose a health. +Shoot *ammo boxes* or *med packs* to refill your supplies and health. -* **[MDN Javascript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript)** _(a great reference for all things Vanilla Javascript)_ -* **[jQuery Docs](http://api.jquery.com)** _(if you're using jQuery)_ -* **[GitHub Pages](https://pages.github.com)** _(for hosting your game)_ -* **[How to write readme - Markdown CheatSheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)** _(for editing this readme)_ -* **[How to write a good readme for github repo!](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2)** _(to make it better)_ +#### Controls +*Mouse Left Click*: **Shoot** (One damage to targeted enemy)
+*Mouse Right Click*: **Grenade** (Two damage to all enemies) --- - -### Project Feedback + Evaluation - -* __Project Workflow__: Did you complete the user stories, wireframes, task tracking, and/or ERDs, as specified above? Did you use source control as expected for the phase of the program you’re in (detailed above)? - -* __Technical Requirements__: Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex? - -* __Creativity__: Did you add a personal spin or creative element into your project submission? Did you deliver something of value to the end user (not just a login button and an index page)? - -* __Code Quality__: Did you follow code style guidance and best practices covered in class, such as spacing, modularity, and semantic naming? Did you comment your code as your instructors have in class? - -* __Deployment__: Did you deploy your application to a public url using GitHub Pages? - -* __Total__: Your instructors will give you a total score on your project between: - - Score | Expectations - ----- | ------------ - **0** | _Incomplete._ - **1** | _Does not meet expectations._ - **2** | _Meets expectations, good job!_ - **3** | _Exceeds expectations, you wonderful creature, you!_ - - This will serve as a helpful overall gauge of whether you met the project goals, but __the more important scores are the individual ones__ above, which can help you identify where to focus your efforts for the next project! +## Technical Documentation +* Game Logic Flow-Chart +* Coding Theory +* Future Possible Updates +* Coding Sequence +* User experience +* Acknowledgements + +#### Game Logic Flow-Chart + + +#### Coding Theory +This game has only one victory and one failure condition. +The spawns(enemies/utilities) are the main element of the game. Using an object constructor function allows storing of numerous keys and elements for each enemy. +It also allows for future addition of enemy types and effects. Spawns are pushed into an empty array for storage. +Example of object constructor: +``` +function Spawn(life, damageOnPlayerWhenExpire, timeTillExpire, effectOnPlayerHealthWhenShot, effectOnPlayerAmmoWhenShot, effectOnGrenadeWhenShot, idLink){ + this.life = life; + this.damageOnPlayerAtExpire = damageOnPlayerAtExpire; + this.timeTillExpire = timeTillExpire; + this.effectOnPlayerHealthWhenShot = effectOnPlayerHealthWhenShot; + this.effectOnPlayerAmmoWhenShot = effectOnPlayerAmmoWhenShot; + this.effectOnPlayerGrenadeWhenShot = effectOnPlayerGrenadeWhenShot; + this.idLink = idLink; +} +``` +On each spawn, a div will be created and appended. A counter is used to link the enemy div with the specific enemy array element. Each spawn is given a unique ID using the counter, and an idLink of the same value for the array element, afterwhich the counter increases for the next spawn. +Enemies/allies/tools spawn via a setInterval function. Different enemies have different spawn rates. + +On shooting spawns, function will iterate object key and value to determine effect on player stats. +Enemies deal damage to player on expiry. + +To add variety in the game, events are created that spawn i.e. 300 enemies at the same time, which forces players to use the grenade. Individual levels are created by matching spawn rate and events with the tempo of the background music of the specific level. + +#### Future Possible Updates +* Scoring function +* Combo function +* Pause button +* Text popups at game screen, 'Miss!' etc. +* Enemies zoom to player (transition effect) when they expire, like a bullet path +* Text notification on miss etc. + + + +#### Misc Issues +* No max health +* Using grenade on 5 allies and 1 healthpack will result in gameover.
Though 5 health - 5 + 1 = 1 health + +#### Coding Sequence + +1. Create basic html, game screen layout +1. Create win and lose condition +1. Create object constructor +1. Create spawn function for div creation and individual enemy types +1. Link spawn div and array object +1. Create timer and countdown function so win condition can be met +1. Create function so enemies deal damage to player on expiry +1. Create checkLoss function to check player health so loss condition can be met +1. Target this.div on click to derive key/value +1. Left and right click functions +1. Adjust CSS +1. Adjust setInterval to adjust game difficulty +1. Adjust spawn locations +1. Game overlay to cover game screen before play +1. Start button, Retry button +1. Add BGM, gunshot and grenade audio on click +1. Add easy and hard levels, new BG BGM Events + +#### User Experience +Easy stage introduces a gradual learning curve. Enemies spawn according to the beats of the song which gradually becomes faster. This helps players improve their reflexes and get used to the general mechanics of shooting and grenades. + +After reflexes comes judgement. Normal stage introduces this element to the game, namely the spawning of allies in game. Players have to avoid shooting allies and using grenades when they are on screen. This forces players to survey the stage and judge the best course of action within a limited time frame. + +Hard stage adds yet another element to the game, inventory management. Players have limited ammo and grenade in this stage and need to juggle between all three elements. Reflexes. Judgement. Inventory management. + +#### Acknowledgements +* **Alex Min** (TA) +
For the precious help and guidance rendered through individual consultations + +* **Hazel Toh** (WDI 12) +
For the much needed assistance in editing images used in the game + +* **Songs** +
[Escape the Fate - "One For The Money"](https://www.youtube.com/watch?v=szRDiLUduRA) +
[Tokyo Ghoul - "Unravel"](https://www.youtube.com/watch?v=Q0v3ajXh5S0) +
[Imagine Dragons - "Believer"](https://www.youtube.com/watch?v=7wtfhZwyrcc) diff --git a/assets/audio/bang.mp3 b/assets/audio/bang.mp3 new file mode 100644 index 00000000..b8654bcf Binary files /dev/null and b/assets/audio/bang.mp3 differ diff --git a/assets/audio/bgmBeliever.mp3 b/assets/audio/bgmBeliever.mp3 new file mode 100644 index 00000000..3262a95f Binary files /dev/null and b/assets/audio/bgmBeliever.mp3 differ diff --git a/assets/audio/bgmDeadpool.mp3 b/assets/audio/bgmDeadpool.mp3 new file mode 100644 index 00000000..7835c43c Binary files /dev/null and b/assets/audio/bgmDeadpool.mp3 differ diff --git a/assets/audio/bgmGhoul.mp3 b/assets/audio/bgmGhoul.mp3 new file mode 100644 index 00000000..25d305ab Binary files /dev/null and b/assets/audio/bgmGhoul.mp3 differ diff --git a/assets/audio/boom.mp3 b/assets/audio/boom.mp3 new file mode 100644 index 00000000..465d9508 Binary files /dev/null and b/assets/audio/boom.mp3 differ diff --git a/assets/audio/death.mp3 b/assets/audio/death.mp3 new file mode 100644 index 00000000..b0747599 Binary files /dev/null and b/assets/audio/death.mp3 differ diff --git a/assets/audio/gogoCS.mp3 b/assets/audio/gogoCS.mp3 new file mode 100644 index 00000000..3d769352 Binary files /dev/null and b/assets/audio/gogoCS.mp3 differ diff --git a/assets/audio/playerDamage.mp3 b/assets/audio/playerDamage.mp3 new file mode 100644 index 00000000..d06055bf Binary files /dev/null and b/assets/audio/playerDamage.mp3 differ diff --git a/assets/audio/scream.mp3 b/assets/audio/scream.mp3 new file mode 100644 index 00000000..46282862 Binary files /dev/null and b/assets/audio/scream.mp3 differ diff --git a/assets/audio/victory.mp3 b/assets/audio/victory.mp3 new file mode 100644 index 00000000..bfcfe1c8 Binary files /dev/null and b/assets/audio/victory.mp3 differ diff --git a/assets/css/stylesheet.css b/assets/css/stylesheet.css index e69de29b..48579830 100644 --- a/assets/css/stylesheet.css +++ b/assets/css/stylesheet.css @@ -0,0 +1,266 @@ +body { + background-color: black; +} + +.container { + color: white; + width: 99%; + height: 100%; + margin: 0 auto; + position: absolute; + display: block; +} + +h1 { + width: 100%; + font-size: 28px; + height: 5%; + text-align: center; + margin: 0 0 3px 0; +} + +.gameInstructions { + padding: 1% 1%; + margin: 0 2px; + font-size: 14px; + border-radius: 10px; + opacity: 0.8; + top: 6%; + left: 0%; + width: 14%; + height: 84%; + position: absolute; + display: inline; + background-color: grey; + border: 3px solid white; +} + +.icons { + height: 40px; + width: 40px; +} + +.gameOverlay { + top: 6%; + left: 17%; + width: 83%; + height: 89%; + position: absolute; + display: block; + background-image: url("../img/layOver.jpg"); + background-size: cover; + z-index: 1; +} + +.overlayText { + font-size: 28px; + border-radius: 5px; + opacity: 0.7; + color: black; + text-align: center; + border: 5px solid black; + padding: 6% 0 0 0; + width: 40%; + height: 30%; + top: 35%; + left: 5%; + position: absolute; + background-color: grey; + display: none; +} + +.hint { + border-radius: 10px; + opacity: 0.8; + font-size: 18px; + text-align: center; + border: 5px solid black; + padding: 3px 0 1% 0; + width: 40%; + height: 3%; + bottom: 5%; + left: 25%; + position: absolute; + background-color: grey; +} + +.easyStartBtn { + font-size: 18px; + border-radius: 3px; + border: 2px solid black; + top: 8%; + left: 5%; + width: 15%; + height: 5%; + position: absolute; + display: block; +} + +.normalStartBtn { + font-size: 18px; + border-radius: 3px; + border: 2px solid black; + top: 14%; + left: 5%; + width: 15%; + height: 5%; + position: absolute; + display: block; +} + +.hardStartBtn { + font-size: 18px; + border-radius: 3px; + border: 2px solid black; + top: 20%; + left: 5%; + width: 15%; + height: 5%; + position: absolute; + display: block; +} + +.retryBtn { + font-size: 28px; + font-family: serif; + border-radius: 10px; + border: 5px solid black; + opacity: 0.7; + top: 5%; + left: 5%; + width: 30%; + height: 20%; + position: absolute; + display: none; +} + +.gameScreen { + /*cursor: url(../img/crosshair.png) 22 22, auto;*/ + top: 6%; + left: 17%; + width: 83%; + height: 89%; + position: absolute; + display: block; + background-color: black; + background-image: url("../img/buildingsEvening.jpg"); + background-size: cover; +} + +.gun { + position: absolute; + bottom: 0; + left: 46%; + width: 25%; +} + +.playerHealth { + background-color: green; + border-radius: 15px; + opacity: 0.8; + color: white; + border: 1px solid white; + padding-top: 5px; + text-align: center; + top: 1%; + left: 1%; + width: 10%; + height: 4%; + position: absolute; + display: block; +} + +.playerAmmo { + background-color: black; + border-top: 1px solid red; + border-bottom: 1px solid red; + color: white; + text-align: center; + padding: 8px 0px 0px 0px; + opacity: 0.7; + top: 0; + right: 0; + width: 10%; + height: 5%; + position: absolute; +} + +.playerGrenade { + background-color: black; + border-top: 1px solid red; + border-bottom: 1px solid red; + color: white; + text-align: center; + padding: 8px 0px 0px 0px; + opacity: 0.7; + top: 7%; + right: 0; + width: 10%; + height: 5%; + position: absolute; +} + +.timer { + background-color: black; + border: 1px solid red; + color: white; + text-align: center; + padding: 8px 0px 0px 0px; + opacity: 0.7; + color: white; + bottom: 0; + left: 0; + width: 15%; + height: 5%; + position: absolute; +} + +.spawn { + height: 18px; + width: 18px; + position: absolute; +} + +.enemyEasy { + background-color: black; + border: 6px double white; + border-radius: 999px; +} + +.enemyNormal { + background-color: black; + border: 6px double orange; + border-radius: 999px; +} + +.enemyHard { + background-color: black; + border: 6px double red; + border-radius: 999px; +} + +.ally { + width: 33px; + height: 33px; + background-image: url("../img/triangle.png"); + background-size: contain; +} + +.healthPack { + border: 3.5px solid red; + background-color: white; +} + +.ammoBox { + background-image: url("../img/bullet.png"); + background-size: contain; + height: 54px; + width: 50px; +} + +.grenadeRefill { + background-image: url("../img/grenade.png"); + background-size: contain; + height: 52px; + width: 50px; +} diff --git a/assets/img/bgAnime.jpg b/assets/img/bgAnime.jpg new file mode 100644 index 00000000..83b2a8f7 Binary files /dev/null and b/assets/img/bgAnime.jpg differ diff --git a/assets/img/buildingsEvening.jpg b/assets/img/buildingsEvening.jpg new file mode 100644 index 00000000..8fa6a61b Binary files /dev/null and b/assets/img/buildingsEvening.jpg differ diff --git a/assets/img/bullet.png b/assets/img/bullet.png new file mode 100644 index 00000000..730365c3 Binary files /dev/null and b/assets/img/bullet.png differ diff --git a/assets/img/cityView.jpg b/assets/img/cityView.jpg new file mode 100644 index 00000000..5c73ea84 Binary files /dev/null and b/assets/img/cityView.jpg differ diff --git a/assets/img/crosshair.jpg b/assets/img/crosshair.jpg new file mode 100644 index 00000000..5a635d6d Binary files /dev/null and b/assets/img/crosshair.jpg differ diff --git a/assets/img/crosshair.png b/assets/img/crosshair.png new file mode 100644 index 00000000..d4971c68 Binary files /dev/null and b/assets/img/crosshair.png differ diff --git a/assets/img/flowchart.jpeg b/assets/img/flowchart.jpeg new file mode 100644 index 00000000..d172693d Binary files /dev/null and b/assets/img/flowchart.jpeg differ diff --git a/assets/img/gaLogo.png b/assets/img/gaLogo.png new file mode 100644 index 00000000..c9de238b Binary files /dev/null and b/assets/img/gaLogo.png differ diff --git a/assets/img/gameScreen.png b/assets/img/gameScreen.png new file mode 100644 index 00000000..2dab2e71 Binary files /dev/null and b/assets/img/gameScreen.png differ diff --git a/assets/img/grenade.png b/assets/img/grenade.png new file mode 100644 index 00000000..7ba26aea Binary files /dev/null and b/assets/img/grenade.png differ diff --git a/assets/img/gun.png b/assets/img/gun.png new file mode 100644 index 00000000..57428c4e Binary files /dev/null and b/assets/img/gun.png differ diff --git a/assets/img/gun2.png b/assets/img/gun2.png new file mode 100644 index 00000000..bb4d608c Binary files /dev/null and b/assets/img/gun2.png differ diff --git a/assets/img/layOver.jpg b/assets/img/layOver.jpg new file mode 100644 index 00000000..12e6a8fc Binary files /dev/null and b/assets/img/layOver.jpg differ diff --git a/assets/img/mouseLeft.jpg b/assets/img/mouseLeft.jpg new file mode 100644 index 00000000..2fde054b Binary files /dev/null and b/assets/img/mouseLeft.jpg differ diff --git a/assets/img/mouseRight.png b/assets/img/mouseRight.png new file mode 100644 index 00000000..88522300 Binary files /dev/null and b/assets/img/mouseRight.png differ diff --git a/assets/img/nightBG.jpg b/assets/img/nightBG.jpg new file mode 100644 index 00000000..ada6fe47 Binary files /dev/null and b/assets/img/nightBG.jpg differ diff --git a/assets/img/titleScreen.jpg b/assets/img/titleScreen.jpg new file mode 100644 index 00000000..17c7bf06 Binary files /dev/null and b/assets/img/titleScreen.jpg differ diff --git a/assets/img/triangle.png b/assets/img/triangle.png new file mode 100644 index 00000000..e90fe46e Binary files /dev/null and b/assets/img/triangle.png differ diff --git a/assets/js/script.js b/assets/js/script.js index e69de29b..fdd22c5b 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -0,0 +1,431 @@ +$(function() { + +// ---------------GENERAL GAME FUNCTIONS --------------- + + var playerStats = { + health: 5, + ammo: 25, + grenade: 3, + } + var timeCount = 120 + var playerStatsInterval + var countDownInterval + + function checkVictory() { + if(timeCount <= 0 && playerStats.health > 0) { + document.getElementsByClassName('victory')[0].play() + $('.overlayText').text("VICTORY! TERRORISTS WIN!") + $('.retryBtn').text('TRY A DIFFERENT LEVEL') + generalGameEndFunctions() + } + } + + function checkLoss() { + if (playerStats.health <= 0) { + $('.playerHealth').text('Health: 0') + $('.overlayText').text("GAME OVER") + $('.hint').text("Hint: Manage your inventory") + document.getElementsByClassName('deadpoolBGM')[0].pause() + document.getElementsByClassName('ghoulBGM')[0].pause() + document.getElementsByClassName('believerBGM')[0].pause() + document.getElementsByClassName('death')[0].play() + generalGameEndFunctions() + } + } + + function countDown() { + countDownInterval = setInterval( () => { + var $timer = $('.timer') + timeCount = timeCount - 1 + $timer.text('Timer: ' +timeCount+ ' seconds') + checkEnemyExpire() + checkVictory() + checkLoss() + } + , 1000) + } + + function updatePlayerStats () { + var $playerHealth = $('.playerHealth') + var $playerAmmo = $('.playerAmmo') + var $playerGrenade = $('.playerGrenade') + playerStatsInterval = setInterval(() => { + $playerHealth.text('Health: ' +playerStats.health) + $playerAmmo.text('Ammo: ' +playerStats.ammo) + $playerGrenade.text('Grenade: ' +playerStats.grenade) + }, 200) + } + + function checkEnemyExpire() { + for(var i = spawnList.length -1; i > -1; i --){ + spawnList[i].timeToExpire = spawnList[i].timeToExpire -1 + if(spawnList[i].timeToExpire <0){ + if(spawnList[i].damageWhenExpire > 0){ + playerStats.health = playerStats.health - spawnList[i].damageWhenExpire + document.getElementsByClassName('playerDamage')[0].volume = 0.8 + document.getElementsByClassName('playerDamage')[0].pause() + document.getElementsByClassName('playerDamage')[0].play() + } + $('div').remove('#'+spawnList[i].spawnIdCountLink) + spawnList.splice(i, 1) + } + } + } + + function checkEnemyHealth () { + for (var i = spawnList.length -1; i > -1; i --) { + if(spawnList[i].life <= 0) { + $('div').remove('#'+spawnList[i].spawnIdCountLink) + if (spawnList[i].effectHealth === -1) playerStats.health = playerStats.health -1 + if (spawnList[i].effectAmmo === +10) playerStats.ammo = playerStats.ammo +10 + if (spawnList[i].effectGrenade === +1) playerStats.grenade = playerStats.grenade +1 + spawnList.splice(i, 1) + } + } + } + + function generalGameEndFunctions() { + clearInterval(playerStatsInterval) + clearInterval(countDownInterval) + $gameOverlay = $('.gameOverlay') + $gameOverlay.css({ + 'display': 'block' + }) + $('.retryBtn').css({ + 'display': 'block' + }) + $('.overlayText').css({ + 'display': 'block' + }) + $('.easyStartBtn').css({ + 'display': 'none' + }) + $('.normalStartBtn').css({ + 'display': 'none' + }) + $('.hardStartBtn').css({ + 'display': 'none' + }) + } + +// END OF GENERAL GAME FUNCTIONS ----------------------- +// SCREEN BUTTONS + +function generalStartFunctions() { + $gameOverlay = $('.gameOverlay') + $gameOverlay.css({ + 'display': 'none' + }) + $('.gogo')[0].volume = 0.6 + $('.gogo')[0].play() + updatePlayerStats() + countDown() +} + +$('.easyStartBtn').on('click', () => { + generalStartFunctions() + //stage specific settings + $gameScreen.css({ + 'background-image': 'url("./assets/img/bgAnime.jpg")' + }) + $('.ghoulBGM')[0].volume = 1 + $('.ghoulBGM')[0].play() + function startNorm(time) { + setTimeout(() => spawnIntervalNormal(6000), time) + } + function speedShooting(time) { + setTimeout(() => spawnIntervalEasy(2000), time) + setTimeout(() => spawnIntervalAmmo(10000), time) + } + spawnIntervalEasy(4000) + spawnIntervalAmmo(16000) + startNorm(28000) + ev10Easy(28000) + speedShooting(62000) + ev7Easy1Ammo1Grenade(62000) +}) + +$('.normalStartBtn').on('click', () => { + generalStartFunctions() + //stage specific settings + $gameScreen.css({ + 'background-image': 'url("./assets/img/nightBG.jpg")' + }) + $('.believerBGM')[0].volume = 1 + $('.believerBGM')[0].play() + spawnIntervalEasy(4000) + spawnIntervalNormal(6000) + spawnIntervalHard(11000) + spawnIntervalAlly(8000) + spawnIntervalAmmo(12000) + spawnIntervalHealth(39000) + ev5Easy5Ally(1000) + ev7Easy1Ammo1Grenade(15000) + ev3Easy1Ammo(22000) + ev3Easy1Ammo(32000) + ev7Easy1Ammo1Grenade(45000) + ev30Norm3Hard(54000) + ev5Easy5Ally(94000) + ev300Norm(100000) +}) + +$('.hardStartBtn').on('click', () => { + generalStartFunctions() + // stage specific settings + $('.deadpoolBGM')[0].currentTime = 3 + $('.deadpoolBGM')[0].volume = 0.6 + $('.deadpoolBGM')[0].play() + spawnIntervalEasy(3000) + spawnIntervalNormal(6000) + spawnIntervalHard(10000) + spawnIntervalAmmo(8000) + spawnIntervalHealth(50000) + spawnIntervalGrenade(50000) + ev3Easy1Ammo(14000) + ev3Hard(35000) + ev300Norm(46000) + ev3Hard(56000) + ev7Easy1Ammo1Grenade(84000) + ev300Hard(93000) + ev30Norm3Hard(105000) + +}) + +$('.retryBtn').on('click', () => { + location.reload() +}) + +// END OF SCREEN BUTTONS +// CONTROLS ------------------------------------------- +// left click shooting + +$gameScreen = $('.gameScreen') +$gameScreen.on('click', function(e) { + if(playerStats.ammo > 0) { + $('.bang')[0].currentTime = 1.3 + $('.bang')[0].volume = 0.6 + $('.bang')[0].pause() + $('.bang')[0].play() + playerStats.ammo = playerStats.ammo - 1 + clickCheck(e.target) + } +}) + +function clickCheck (element) { + for (i = 0; i < spawnList.length; i++) { + if (spawnList[i].spawnIdCountLink === element.id) { + if (spawnList[i].damageWhenExpire > 0) { // referring to enemies + spawnList[i].life = spawnList[i].life -1 + if(spawnList[i].life === 0) { + $('div').remove('#'+ element.id) + spawnList.splice(i, 1) + } + } else { // referring to utilities + $('div').remove('#'+ element.id) + for(var key in spawnList[i]) { + if (key === 'effectHealth') playerStats.health = playerStats.health + spawnList[i][key] + if (key === 'effectAmmo') playerStats.ammo = playerStats.ammo + spawnList[i][key] + if (key === 'effectGrenade') playerStats.grenade = playerStats.grenade + spawnList[i][key] + } + spawnList.splice(i, 1) + } + } + } +} + +// right click grenades +$gameScreen.on('contextmenu', function(ev) { + ev.preventDefault(); + if (playerStats.grenade > 0) { + document.getElementsByClassName('boom')[0].currentTime = 0; + document.getElementsByClassName('boom')[0].pause() + document.getElementsByClassName('boom')[0].play() + playerStats.grenade = playerStats.grenade - 1 + for (i=0; i') + $gameScreen.append($spawn) + $spawn.attr('id', "s"+spawnIdCount) + $spawn.addClass(classAdded) + $spawn.css({ + "left": Math.floor(Math.random() * 1000), + "top": Math.floor(Math.random() * (370 - 60)) + 60 + }) + spawnIdCount++ + } + + function spawnEnemyEasy () { + var enemy = new Spawn(1, 1, 0, 0, 0, 3, 's'+spawnIdCount) + spawnList.push(enemy) + spawnDivCreation('spawn enemyEasy') + } + + function spawnEnemyNormal () { + var enemy = new Spawn(2, 1, 0, 0, 0, 3, 's'+spawnIdCount) + spawnList.push(enemy) + spawnDivCreation('spawn enemyNormal') + } + + function spawnEnemyHard () { + var enemy = new Spawn(3, 1, 0, 0, 0, 3, 's'+spawnIdCount) + spawnList.push(enemy) + spawnDivCreation('spawn enemyHard') + } + + function spawnAlly () { + var ally = new Spawn(1, 0, -1, 0, 0, 3, 's'+spawnIdCount) + spawnList.push(ally) + spawnDivCreation('spawn ally') + } + + function spawnHealthPack () { + var health = new Spawn(1, 0, +1, 0, 0, 3, 's'+spawnIdCount) + spawnList.push(health) + spawnDivCreation('spawn healthPack') + } + + function spawnAmmoBox () { + var ammoBox = new Spawn(1, 0, 0, +10, 0, 3, 's'+spawnIdCount) + spawnList.push(ammoBox) + spawnDivCreation('spawn ammoBox') + } + + function spawnGrenadeRefill () { + var grenade = new Spawn(1, 0, 0, 0, +1, 3, 's'+spawnIdCount) + spawnList.push(grenade) + spawnDivCreation('spawn grenadeRefill') + } + +// SPAWN INTERVALS ------------------------------------ + + function spawnIntervalEasy(interval) { + setInterval(spawnEnemyEasy, interval) + } + + function spawnIntervalNormal(interval) { + setInterval(spawnEnemyNormal, interval) + } + + function spawnIntervalHard (interval) { + setInterval(spawnEnemyHard, interval) + } + + function spawnIntervalAlly (interval) { + setInterval(spawnAlly, interval) + } + + function spawnIntervalAmmo (interval) { + setInterval(spawnAmmoBox, interval) + } + + function spawnIntervalHealth (interval) { + setInterval(spawnHealthPack, interval) + } + + function spawnIntervalGrenade (interval) { + setInterval(spawnGrenadeRefill, interval) + } + +// END OF SPAWN FUNCTIONS ----------------------------- +// EVENTS --------------------------------------------- + + function ev3Easy1Ammo(time) { + setTimeout(() => { + for(var i=0; i <3; i++){ + spawnEnemyEasy() + } + spawnAmmoBox() + }, time) + } + + function ev3Hard(time) { + setTimeout(() => { + for(var i=0; i <3; i++){ + spawnEnemyHard() + } + }, time) + } + + function ev5Easy5Ally(time) { + setTimeout(() => { + for(var i=0; i <5; i++){ + spawnEnemyEasy() + } + for(var i=0; i <5; i++){ + spawnAlly() + } + }, time) + } + + function ev7Easy1Ammo1Grenade(time) { + setTimeout(() => { + for(var i=0; i <7; i++){ + spawnEnemyEasy() + } + spawnAmmoBox() + spawnGrenadeRefill() + }, time) + } + + function ev10Easy(time) { + setTimeout(() => { + for(var i=0; i <10; i++){ + spawnEnemyEasy() + } + }, time) + } + + function ev30Norm3Hard(time) { + setTimeout(() => { + for(var i=0; i <30; i++){ + spawnEnemyNormal() + } + spawnEnemyHard() + spawnEnemyHard() + spawnEnemyHard() + }, time) + } + + function ev300Norm(time) { + setTimeout(() => { + for(var i=0; i <300; i++){ + spawnEnemyNormal() + } + }, time) + } + + function ev300Hard(time) { + setTimeout(() => { + for(var i=0; i<300; i++) { + spawnEnemyHard() + } + spawnGrenadeRefill() + }, time) + } + +// END OF EVENTS -------------------------------------- +}) diff --git a/index.html b/index.html index 5b002212..55263e01 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,61 @@ - - + Tempo Shot + - +
+

Tempo Shot

+ +
+ Shoot: 1 hit on target + Grenade: 2 hits on all

+
+

Easy enemy: 1 hit

+
+

Normal enemy: 2 hits

+
+

Hard enemy: 3 hits

+ +

Ally: 1 damage on hit

+
+

+

Ammo: +10

+

+

Grenade: +1

+
+ +
+
Hint: Enemies disappear after 3 seconds
+
VICTORY
TERRORISTS WIN!
+ + + + +
+ +
+ +
Timer: 120 seconds
+
Health: 5
+
Ammo: 25
+
Grenade: 3
+
+
+ + + + + + + + + + + + + +