├── bomb.png ├── sub1.png ├── explosion.png ├── index.css ├── index.html ├── README.md ├── LICENSE └── index.js /bomb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhineetraj1/submarine-js/HEAD/bomb.png -------------------------------------------------------------------------------- /sub1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhineetraj1/submarine-js/HEAD/sub1.png -------------------------------------------------------------------------------- /explosion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhineetraj1/submarine-js/HEAD/explosion.png -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | #f{ 2 | position: absolute; 3 | height: 90px; 4 | left: 10px; 5 | top: 10px; 6 | } 7 | .as{ 8 | position: absolute; 9 | height: 40px; 10 | } 11 | #cntrl{ 12 | position: absolute; 13 | top: 3px; 14 | margin: 3px; 15 | padding: 3px; 16 | } 17 | body{ 18 | background: #00a1ff; 19 | } 20 | .controls{ 21 | background: white; 22 | border: solid; 23 | width: 70px; 24 | font-size: 21px; 25 | font-family: Calibri; 26 | border-radius: 8px; 27 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Submarine game 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Submarine 2 | A small 2D simulation game made in JS 3 | 4 | ## Commands (for desktop) 5 | * w - move up 6 | * s - move down 7 | * d - move right 8 | * a - move left 9 | * f - fire missile 10 | 11 | ## Demo 12 | For live demo = [Open this link](https://abhineetraj1.github.io/submarine-js) 13 | 14 | ## Languages used:- 15 | HTML5 css3 javascript 16 | 17 | ## Authors 18 | - [@abhineetraj1](https://www.github.com/abhineetraj1) 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Abhineet Raj 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | document.getElementById('f').style.left="20px"; 2 | document.getElementById('f').style.top="20px"; 3 | function right() { 4 | document.getElementById('f').style.left = parseInt(document.getElementById('f').style.left.replaceAll("px","")) + 10+"px"; 5 | } 6 | function left() { 7 | document.getElementById('f').style.left = parseInt(document.getElementById('f').style.left.replaceAll("px","")) - 10+"px"; 8 | } 9 | function up() { 10 | document.getElementById('f').style.top = parseInt(document.getElementById('f').style.top.replaceAll("px","")) - 10+"px"; 11 | } 12 | function down() { 13 | document.getElementById('f').style.top = parseInt(document.getElementById('f').style.top.replaceAll("px","")) + 10+"px"; 14 | } 15 | document.body.onkeypress = function (e) { 16 | if (e.key == "w") { 17 | up(); 18 | } else if (e.key == "s") { 19 | down(); 20 | } else if (e.key == "d") { 21 | right(); 22 | } else if (e.key == "a") { 23 | left(); 24 | } else if (e.key == "r") { 25 | fire(); 26 | } else { 27 | 28 | } 29 | } 30 | if (window.innerWidth > window.innerHeight) { 31 | document.getElementById("cntrl").remove(); 32 | } else { 33 | document.getElementById('f').style.top="100px"; 34 | } 35 | 36 | setInterval(k, 30); 37 | function fire() { 38 | var a = document.createElement("img"); 39 | a.src="bomb.png"; 40 | a.className="as"; 41 | a.style.position="absolute"; 42 | a.style.left=document.getElementById("f").style.left; 43 | a.style.top= parseInt(document.getElementById("f").style.top.replaceAll("px","")) + document.getElementById("f").height + "px"; 44 | document.body.appendChild(a); 45 | } 46 | function k() { 47 | if (document.getElementsByClassName("as") == null) { 48 | 49 | } else { 50 | var n = 0; 51 | while (n < document.getElementsByClassName("as").length) { 52 | if (parseInt(document.getElementsByClassName("as")[n].style.top.replaceAll("px","")) > window.innerHeight + document.getElementsByClassName("as")[n].height ) { 53 | var t = document.createElement("img"); 54 | t.src = "explosion.png"; 55 | t.height = window.innerHeight/4; 56 | t.style.position = "absolute"; 57 | t.style.bottom = "0px"; 58 | t.className= "fre"; 59 | t.style.left = document.getElementsByClassName("as")[n].style.left; 60 | document.getElementsByClassName("as")[n].remove(); 61 | document.body.appendChild(t); 62 | setTimeout(function () { 63 | document.getElementsByClassName("fre")[0].remove(); 64 | }, 2000); 65 | } else { 66 | document.getElementsByClassName("as")[n].style.top = parseInt(document.getElementsByClassName("as")[n].style.top.replaceAll("px","")) + 10 +"px"; 67 | } 68 | n=n+1; 69 | } 70 | } 71 | } 72 | --------------------------------------------------------------------------------