diff --git a/webgame/data/.DS_Store b/webgame/data/.DS_Store new file mode 100644 index 0000000..c2ce652 Binary files /dev/null and b/webgame/data/.DS_Store differ diff --git a/webgame/data/90.jpeg b/webgame/data/90.jpeg new file mode 100644 index 0000000..82ab93d Binary files /dev/null and b/webgame/data/90.jpeg differ diff --git a/webgame/data/bg.png b/webgame/data/bg.png new file mode 100644 index 0000000..ac9a371 Binary files /dev/null and b/webgame/data/bg.png differ diff --git a/webgame/data/bullet.png b/webgame/data/bullet.png new file mode 100644 index 0000000..0e7b581 Binary files /dev/null and b/webgame/data/bullet.png differ diff --git a/webgame/data/enemy.png b/webgame/data/enemy.png new file mode 100644 index 0000000..dc60cdb Binary files /dev/null and b/webgame/data/enemy.png differ diff --git a/webgame/data/expo.wav b/webgame/data/expo.wav new file mode 100644 index 0000000..c485aa0 Binary files /dev/null and b/webgame/data/expo.wav differ diff --git a/webgame/data/g.html b/webgame/data/g.html new file mode 100644 index 0000000..bed2045 --- /dev/null +++ b/webgame/data/g.html @@ -0,0 +1,44 @@ + + + + + + SpaceInvader + + + + + + + + + +
+ +
+ +
+
+ Game Over. +
+
+ +
+
+ Your Score: 0 +
+
+ +
+
+
+ Health: 3 +
+ + +
+ + + + + \ No newline at end of file diff --git a/webgame/data/game.js b/webgame/data/game.js new file mode 100644 index 0000000..29e2049 --- /dev/null +++ b/webgame/data/game.js @@ -0,0 +1,232 @@ +var w = window.innerWidth; +var h = window.innerHeight; + +var bullet_s = 0; + +var ran = Math.random() * (2) + -1; + +var my_var; + +var score = 0; + +var health = 3; + +var en_end = setInterval(alertFunc, 10); + +var lev_y = 1; + +var mySound; + +var m_lef; + +var m_rig; + +var f_lef = 0; + +var f_rig = 0; + +function alertFunc() { + var en = document.getElementById("enm"); + move_enemy(en, ran); +} + + +document.onkeydown = function(event){ + + + var x = event.keyCode + + + if(x == 39 && f_lef == 0){ + m_lef = setInterval(moveLeft, 10); + f_lef = 1; + } + if (x == 37 && f_rig == 0) { + m_rig = setInterval(moveRight, 10); + f_rig = 1; + } + +} + +document.onkeyup = function(event){ + + var x = event.keyCode + + + + if (x == 32 && health > 0) { + my_bullet() + + } + if(x == 39){ + clearInterval(m_lef); + f_lef = 0; + } + if(x == 37){ + clearInterval(m_rig); + f_rig = 0; + } +} + + +function moveLeft(element) { + var element = document.getElementById("sp"); + var elStyle = window.getComputedStyle(element); + var topValue = elStyle.getPropertyValue("left").replace("px", ""); + if (topValue < 3 * w / 4 - 80) { + element.style.left = (Number(topValue) + 3) + "px"; + } + + } + +function moveRight(element) { + var element = document.getElementById("sp"); + var elStyle = window.getComputedStyle(element); + var topValue = elStyle.getPropertyValue( "left").replace("px", ""); + if(topValue > w / 4){ + element.style.left = (Number(topValue) - 3) + "px"; + } + + } + +var g = 0 + +function move_enemy(element, x){ + var elStyle = window.getComputedStyle(element); + var topValue = elStyle.getPropertyValue( "left").replace("px", ""); + + if(topValue > w / 4 && topValue < 3 * w / 4 - 64){ + element.style.left = (Number(topValue) + x) + "px"; + g = 0 + } + if(g == 0){ + if(topValue <= w /4 || topValue >= 3 * w / 4 - 64){ + ran *= -1; + if(topValue <= w / 4) + element.style.left = (Number(topValue) + 10) + "px"; + if(topValue >= 3 * w / 4 - 64) + element.style.left = (Number(topValue) - 10) + "px"; + g = 1; + }} + var dow = window.getComputedStyle(element); + var tp = dow.getPropertyValue( "bottom").replace("px", ""); + element.style.bottom = (Number(tp) - lev_y) + "px"; + + if(tp < 0){ + y_r = Math.random() * (20) + 80; + element.style.bottom = y_r + "%"; + ran = Math.random() * (2) + -1; + health -= 1; + + var st = "Health: " + health; + document.getElementById("hel").innerHTML = st; + r = Math.random() * (40) + 25; + element.style.left = r + "%"; + console.log(r); + if(health == 0) + game_o(); + } + +} + +function my_bullet(){ + + var bu = document.getElementById("bull"); + var pl = document.getElementById("sp"); + var elStyle = window.getComputedStyle(pl); + if(bullet_s == 0){ + var topValue = elStyle.getPropertyValue("left").replace("px", ""); + + bu.style.left = (Number(topValue) + 18) + "px"; + bu.style.visibility = "visible"; + my_var = setInterval(bullet_r, 10); } + bullet_s = 1; + +} + +function bullet_r(){ + var bu = document.getElementById("bull"); + move_bullet(bu); +} + +function move_bullet(element){ + + var dow = window.getComputedStyle(element); + var tp = dow.getPropertyValue( "bottom").replace("px", ""); + element.style.bottom = (Number(tp) + 5) + "px"; + if(tp > h){ + element.style.bottom = 5 + "%"; + bullet_s = 0; + element.style.visibility = "hidden"; + clearInterval(my_var) + } + var en = document.getElementById("enm"); + var es = window.getComputedStyle(en); + + var x1 = Number(dow.getPropertyValue( "left").replace("px", "")); + var y1 = Number(dow.getPropertyValue( "bottom").replace("px", "")); + + var x2 = Number(es.getPropertyValue( "left").replace("px", "")); + var y2 = Number(es.getPropertyValue( "bottom").replace("px", "")); + + if (x1 x2 - 20 && y1 < y2 + 20 && y1 > y2) { + element.style.bottom = 5 + "%"; + bullet_s = 0; + element.style.visibility = "hidden"; + clearInterval(my_var) + y_r = Math.random() * (20) + 80; + en.style.bottom = y_r + "%"; + ran = Math.random() * (2) + -1; + score += 1; + var st = "Your Score: " + score; + document.getElementById("s_c").innerHTML = st; + lev_y += 0.1 + r = Math.random() * (40) + 25; + en.style.left = r + "%"; + mySound = new sound("expo.wav"); + mySound.play(); + } +} + +function game_o(){ + document.getElementById("sp").style.visibility = "hidden"; + document.getElementById("enm").style.visibility = "hidden"; + document.getElementById("g_o").style.visibility = "visible"; + document.getElementById("but").style.visibility = "visible"; + clearInterval(en_end); +} + +function play(){ + health = 3; + score = 0; + document.getElementById("sp").style.visibility = "visible"; + document.getElementById("enm").style.visibility = "visible"; + document.getElementById("g_o").style.visibility = "hidden"; + document.getElementById("but").style.visibility = "hidden"; + var st = "Health: " + health; + document.getElementById("hel").innerHTML = st; + var st = "Your Score: " + score; + document.getElementById("s_c").innerHTML = st; + lev_y = 1; + document.getElementById("enm").style.bottom = "90%"; + en_end = setInterval(alertFunc, 10); +} + + +class sound { + constructor(src) { + this.sound = document.createElement("audio"); + this.sound.src = src; + this.sound.setAttribute("preload", "auto"); + this.sound.setAttribute("controls", "none"); + this.sound.style.display = "none"; + document.body.appendChild(this.sound); + this.play = function () { + this.sound.play(); + }; + this.stop = function () { + this.sound.pause(); + }; + } +} + diff --git a/webgame/data/spaceship.png b/webgame/data/spaceship.png new file mode 100644 index 0000000..292b7ee Binary files /dev/null and b/webgame/data/spaceship.png differ diff --git a/webgame/data/style.css b/webgame/data/style.css new file mode 100644 index 0000000..1381593 --- /dev/null +++ b/webgame/data/style.css @@ -0,0 +1,125 @@ +*{ + margin: 0; + padding: 0; +} + +#game_pg{ + background-color: brown; + +} + +.game{ + background-image: url(bg.png); + background-repeat: no-repeat; + background-size: 100vw 100vh; + width: 100%; + height: 100vh; +} + +#s-p{ + background-image: url(90.jpeg); + background-repeat: no-repeat; + background-size: 100vw 100vh; + width: 100%; + height: 100vh; +} + +.player{ + background-image: url(spaceship.png); + background-repeat: no-repeat; + background-size: cover; + width: 80px; + height: 80px; + position: absolute; + bottom: 0%; + left: 50%; +} + +.enemy{ + background-image: url(enemy.png); + background-repeat: no-repeat; + background-size: cover; + width: 64px; + height: 64px; + position: absolute; + bottom: 90%; + left: 50%; +} + +.v { + border-left: 6px dashed green; + background-color: hotpink; + height: 100%; + position: absolute; + top: 0; + + } + +.bullet{ + background-image: url(bullet.png); + background-repeat: no-repeat; + background-size: cover; + width: 40px; + height: 40px; + position: absolute; + visibility: hidden; + bottom: 5%; +} + +.score{ + position: absolute; + color: chartreuse; + margin-top: 10%; + font-size:xx-large; + +} + +.game_over{ + visibility: hidden; + position: absolute; + font-size: 100px; + color: red; + margin-top: 20%; + margin-left: 35%; + +} + +#hel{ + + position: absolute; + color: chartreuse; + + font-size:xx-large; +} + +.buts{ + visibility: hidden; + position: absolute; + background-color: rosybrown; + text-align: center; + color: rgb(13, 34, 95); + font-size: xx-large; + width: 300px; + height: 100px; + font-style: italic; + border: 4px dashed chartreuse; + margin-top: 30%; + margin-left: 40%; + cursor: pointer; +} + +#st_but{ + position: absolute; + background-color: rosybrown; + text-align: center; + color: rgb(13, 34, 95); + font-size: xx-large; + width: 300px; + height: 100px; + font-style: italic; + border: 4px dashed chartreuse; + margin-top: 30%; + margin-left: 40%; + cursor: pointer; +} + diff --git a/webgame/index.html b/webgame/index.html new file mode 100644 index 0000000..b858356 --- /dev/null +++ b/webgame/index.html @@ -0,0 +1,27 @@ + + + + + + + Space Invader + + + + + +

Space Invader

+ +
+

Instruction :-

+
    +
  1. Use left key to move left.
    2. +
  2. Use right key to move left.
    3. +
  3. Use spacebar to shoot.
    4. +
  4. Each time you shoot a enemy your score increases by 1.
    5. +
  5. If a enemy reaches bottom health decreases.
    6. +
+
+ + + \ No newline at end of file