Skip to content

Instantly share code, notes, and snippets.

@GermanHoyos

GermanHoyos/TwoDee.html

Created April 6, 2018 00:13
Show Gist options
  • Save GermanHoyos/86229d7c48095b36c9cd6caf970759f4 to your computer and use it in GitHub Desktop.
Save GermanHoyos/86229d7c48095b36c9cd6caf970759f4 to your computer and use it in GitHub Desktop.
Download ZIP
2d shooter foundation code
Raw
TwoDee.html
<html>
<head>
<style>
body {
background-color: #1f1f2e;
margin: 0px;
padding: 0px;
}
#gameConsole {
position: relative;
border-style: solid;
border-color: black;
height: 500px;
width: 700px;
top: 5%;
left: 5%;
}
#titleBox {
position: absolute;
border-style: solid;
border-color: black;
height: 30px;
width: 694px;
top: 0px;
left: 0px;
overflow: hidden;
color: white;
}
#gameGrid{
position: absolute;
border-style: solid;
border-color: black;
height: 400px;
width: 694px;
top: 36px;
left: 0px;
}
#footerBox{
position: absolute;
border-style: solid;
border-color: black;
height: 52px;
width:694px;
top: 442px;
left: 0px;
}
#player {
position: absolute;
background-color: purple;
height: 10px;
width: 10px;
top: 0px;
left: 0px;
}
#bulletOne {
position: absolute;
background-color: white;
height: 1px;
width: 6px;
top: 0px;
left: 0px;
opacity: 0;
}
#bulletTwo {
position: absolute;
background-color: white;
height: 1px;
width: 6px;
top: 0px;
left: 0px;
opacity: 0;
}
#bulletThree {
position: absolute;
background-color: white;
height: 1px;
width: 6px;
top: 0px;
left: 0px;
opacity: 0;
}
#playerTackerY {
position: absolute;
color: white;
top: -16px;
left: 0px;
}
#playerTrackerX {
position: absolute;
color: white;
top: 0px;
left: 0px;
}
#bOneYP{
position: absolute;
color: white;
top: 16px;
left: 0px;
}
#bOneXP{
position: absolute;
color: white;
top: -16px;
left: 180px;
}
#bTwoYP{
position: absolute;
color: white;
top: 0px;
left: 180px;
}
#bTwoXP{
position: absolute;
color: white;
top: 16px;
left: 180px;
}
#bThreeYP{
position: absolute;
color: white;
top: -15px;
left: 380px;
}
#bThreeXP{
position: absolute;
color: white;
top: 0px;
left: 380px;
}
#targetBox{
position: absolute;
background-color: green;
height: 20px;
width: 20px;
top: 30px;
left: 310px;
opacity: 1;
}
#targetTrackerY{
position: absolute;
color: white;
top: 16px;
left: 380px;
}
#targetTrackerX{
position: absolute;
color: white;
top: -16px;
left: 560px;
}
</style>
<title>Vacation Game</title>
<script>
document.addEventListener("keydown", keyBoardInput);
var playerTop = 0;
var playerLeft = 0;
var bulletCount = 0;
var bulletOneTop = 0;
var bulletOneLeft = 0;
var bulletTwoTop = 0;
var bulletTwoLeft = 0;
var bulletThreeTop = 0;
var bulletThreeLeft = 0;
var targetBoxTop = 0;
var targetBoxLeft = 0;
function fireBulletOne(){
var gameGridLeft = document.getElementById("gameGrid").style.left;
var bulletOne = document.getElementById("bulletOne");
var bulletOneTop = playerTop;
var bulletOneLeft = playerLeft;
bulletOne.style.top = bulletOneTop;
bulletOne.style.left = bulletOneLeft;
bulletCount++;
var targetBox = document.getElementById("targetBox");
var targetBoxTop = document.getElementById("targetBox").style.top;
// var targetBox = document.querySelector("targetBox");
var targetBoxLeft = (parseFloat(window.getComputedStyle(targetBox).getPropertyValue("left")));
if (bulletCount > 3){
bulletCount = 0;
};
var moveOne = setInterval(moveBltOne,1);
function moveBltOne(){
if (bulletOneLeft > gameGridLeft + 686){
clearInterval(moveOne);
document.getElementById("bulletOne").style.opacity = "0";
document.getElementById("bulletOne").style.transition = "opacity .5s";
} else {
bulletOneLeft++;
targetBoxLeft;
bulletOne.style.left = bulletOneLeft;
targetBox.style.left = targetBoxLeft;
document.getElementById("bulletOne").style.opacity = "1";
document.getElementById("bulletOne").style.transition = "opacity 1s";
document.getElementById('bOneYP').innerHTML = '1st Bullet Y Axis = ' + bulletOneTop;
document.getElementById('bOneXP').innerHTML = '1st Bullet X Axis = ' + bulletOneLeft;
document.getElementById('targetTrackerY').innerHTML = 'Target Box Y Axis = ' + targetBoxTop;
document.getElementById('targetTrackerX').innerHTML = 'Target Box X Axis = ' + targetBoxLeft;
if (bulletOneLeft > targetBoxLeft){
document.getElementById("targetBox").style.opacity = "0";
};
console.log("bullet 1 shot");
};
};
};
function fireBulletTwo(){
var bulletTwo = document.getElementById("bulletTwo");
var bulletTwoTop = playerTop;
var bulletTwoLeft = playerLeft;
bulletTwo.style.top = bulletTwoTop;
bulletTwo.style.left = bulletTwoLeft;
bulletCount++;
var moveTwo = setInterval(moveBltTwo,1);
function moveBltTwo() {
var CSSelement = document.getElementById("targetBox");
var targetTopProp = window.getComputedStyle(CSSelement, null).getPropertyValue("top");
var targetLeftProp = window.getComputedStyle(CSSelement, null).getPropertyValue("left");
var gameGridLeft = document.getElementById("gameGrid").style.left;
if (bulletTwoLeft > gameGridLeft + 686){
clearInterval(moveTwo);
document.getElementById("bulletTwo").style.opacity = "0";
document.getElementById("bulletTwo").style.transition = "opacity .5s";
} else {
bulletTwoLeft++;
bulletTwo.style.left = bulletTwoLeft;
document.getElementById("bulletTwo").style.opacity = "1";
document.getElementById("bulletTwo").style.transition = "opacity 1s";
document.getElementById('bTwoYP').innerHTML = '2nd Bullet Y Axis = ' + bulletTwoTop;
document.getElementById('bTwoXP').innerHTML = '2nd Bullet X Axis = ' + bulletTwoLeft;
console.log("bullet 2 shot");
};
};
};
function fireBulletThree(){
var bulletThree = document.getElementById("bulletThree");
var bulletThreeTop = playerTop;
var bulletThreeLeft = playerLeft;
bulletThree.style.top = bulletThreeTop;
bulletThree.style.left = bulletThreeLeft;
bulletCount++;
var moveThree = setInterval(moveBltThree,1);
function moveBltThree() {
var CSSelement = document.getElementById("targetBox");
var targetTopProp = window.getComputedStyle(CSSelement, null).getPropertyValue("top");
var targetLeftProp = window.getComputedStyle(CSSelement, null).getPropertyValue("left");
var gameGridLeft = document.getElementById("gameGrid").style.left;
if (bulletThreeLeft > gameGridLeft + 686){
clearInterval(moveThree);
document.getElementById("bulletThree").style.opacity = "0";
document.getElementById("bulletThree").style.transition = "opacity .5s";
} else {
bulletThreeLeft++;
bulletThree.style.left = bulletThreeLeft;
document.getElementById("bulletThree").style.opacity = "1";
document.getElementById("bulletThree").style.transition = "opacity 1s";
document.getElementById('bThreeYP').innerHTML = '3rd Bullet Y Axis = ' + bulletThreeTop;
document.getElementById('bThreeXP').innerHTML = '3rd Bullet X Axis = ' + bulletThreeLeft;
console.log("bullet 3 shot");
};
};
};
function movePlayerUp(){
var player = document.getElementById("player");
if (playerTop < 1){
playerTop = 0;
} else {
playerTop--;
player.style.top = playerTop;
playerTrack();
};
};
function movePlayerDown(){
var player = document.getElementById("player");
if (playerTop > 389) {
playerTop = 390;
} else {
playerTop++;
player.style.top = playerTop;
playerTrack();
};
};
function movePlayerLeft(){
var player = document.getElementById("player");
if (playerLeft < 1){
playerLeft = 0;
} else {
playerLeft--;
player.style.left = playerLeft;
playerTrack();
};
};
function movePlayerRight(){
var player = document.getElementById("player");
if (playerLeft > 683) {
playerLeft = 684;
} else {
playerLeft++;
player.style.left = playerLeft;
playerTrack();
};
};
function keyBoardInput(){
var i = event.keyCode;
if(i == 38){
movePlayerUp();
};
if(i == 40){
movePlayerDown();
};
if(i == 37){
movePlayerLeft();
};
if(i == 39){
movePlayerRight();
};
if(i == 32){
if (bulletCount == 3){fireBulletOne() ;};
if (bulletCount == 2){fireBulletThree() ;};
if (bulletCount == 1){fireBulletTwo() ;};
if (bulletCount == 0){fireBulletOne() ;};
};
};
function playerTrack(){
var playerY = playerTop;
var playerX = playerLeft;
document.getElementById('playerTackerY').innerHTML = 'Players Y Axis = ' + playerY + 'px';
document.getElementById('playerTrackerX').innerHTML = 'Players X Axis = ' + playerX + 'px';
};
</script>
</head>
<body>
<div id="gameConsole">
<div id="titleBox">Title Box</div>
<div id="gameGrid">
<div id="player"></div>
<div id="bulletOne"></div>
<div id="bulletTwo"></div>
<div id="bulletThree"></div>
<div id="targetBox"></div>
</div>
<div id="footerBox">
<p id="playerTackerY">Players Y Axis = 0</p>
<p id="playerTrackerX">Players X Axis = 0</p>
<p id="bOneYP">1st Bullet Y Axis = 0</p>
<p id="bOneXP">1st Bullet X Axis = 0</p>
<p id="bTwoYP">2nd Bullet Y Axis = 0</p>
<p id="bTwoXP">2nd Bullet X Axis = 0</p>
<p id="bThreeYP">3rd Bullet Y Axis = 0</p>
<p id="bThreeXP">3rd Bullet X Axis = 0</p>
<p id="targetTrackerY">Target Box Y Axis = </p>
<p id="targetTrackerX">Target Box X Axis = </p>
</div>
</div>
</body>
</html>
<!--notes
var CSSelement = document.getElementById("targetBox");
var targetTopProp = window.getComputedStyle(CSSelement, null).getPropertyValue("top");
var targetLeftProp = window.getComputedStyle(CSSelement, null).getPropertyValue("left");
var bulletOneLeftRead = bulletOne.style.left;
var targetBoxLeftRead = targetBox.style.left;
var targetBox = document.getElementById("targetBox");
targetBox.style.left = targetBoxLeft;
function moveTarget(){
var CSSelement = document.getElementById("targetBox");
var targetTopProp = window.getComputedStyle(CSSelement, null).getPropertyValue("top");
var targetLeftProp = window.getComputedStyle(CSSelement, null).getPropertyValue("left");
};
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment