Basically I'm trying to make it detectable for when a bullet hits the player. I am trying to make the bulletx[1] variable and the bullety[1] cause the "lose()" function when playerx and playery equal the position of the bullets. I'm not sure where to start, could anyone help me if this is even possible?
<script>
let xValues = [];
let yValues = [];
let gunAndBulletx = [];
let gunAndBullety = [];
let gunx = [];
let guny = [];
let bulletx = [];
let bullety = [];
let playerx = 0;
let playery = 0;
let player = document.getElementById("player");
let goalx = 450;
let goaly = 450;
let goal = document.getElementById("goal");
let darken = document.getElementById("darken");
let loseText = document.getElementById("loseText");
let winText = document.getElementById("winText");
let restartButton = document.getElementById("restartButton");
let buttonCenter = document.getElementById("buttonCenter");
let winCount = 5;
for (let i = 0; i < 10; i++) {
xValues.push(i);
yValues.push(i);
}
function getGun(a) {
for (let i = 0; i < a; i++) {
gunAndBulletx[i] = xValues[Math.floor(Math.random() * xValues.length)] * 50
gunAndBullety[i] = yValues[Math.floor(Math.random() * yValues.length)] * 50
gunx[i] = document.getElementById("gunx" + (i + 1));
guny[i] = document.getElementById("guny" + (i + 1));
bulletx[i] = document.getElementById("bulletx" + (i + 1));
bullety[i] = document.getElementById("bullety" + (i + 1));
}
}
function gunPosition(a) {
for (let i = 0; i < a; i++) {
gunx[i].classList.remove("hide");
guny[i].classList.remove("hide");
bulletx[i].classList.remove("hide");
bullety[i].classList.remove("hide");
gunx[i].style.left = gunAndBulletx[i] + 5 + "px";
gunx[i].style.top = 510 + "px";
guny[i].style.top = gunAndBullety[i] + 5 + "px";
guny[i].style.left = 510 + "px";
bulletx[i].style.left = gunAndBulletx[i] + 22.5 + "px";
bulletx[i].style.top = 510 + "px";
bullety[i].style.top = gunAndBullety[i] + 22.5 + "px";
bullety[i].style.left = 510 + "px";
}
}
function playerStart() {
player.style.left = 0 + "px";
player.style.top = 0 + "px";
playerx = 0
playery = 0
}
function start() {
//this is for making the other variables visible or invisible
player.classList.remove("hide");
goal.classList.remove("hide");
darken.classList.add("hide");
loseText.classList.add("hide");
winText.classList.add("hide");
buttonCenter.classList.add("hide");
restartButton.classList.add("hide");
//this is for setting the position of the goal
goal.style.left = goalx + "px";
goal.style.top = goaly + "px";
}
// this detects when the player wins and what happens
function win() {
if (playerx === 450) {
if (playery === 450) {
player.classList.add("hide");
player.style.left = 0 + "px";
player.style.top = 0 + "px";
playerx = 0
playery = 0
goal.classList.add("hide");
darken.classList.remove("hide");
winText.classList.remove("hide");
buttonCenter.classList.remove("hide");
restartButton.classList.remove("hide");
winCount = winCount + 1
}
}
}
//this detects when a player loses and what happens
function lose() {
player.classList.add("hide");
player.style.left = 0 + "px";
player.style.top = 0 + "px";
playerx = 0
playery = 0
goal.classList.add("hide");
darken.classList.remove("hide");
loseText.classList.remove("hide");
buttonCenter.classList.remove("hide");
restartButton.classList.remove("hide");
}
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38') {
//up arrow
if (playery > 0) {
playery = playery - 50;
player.style.position = "absolute";
player.style.top = playery + "px";
win()
}
} else if (e.keyCode == '40') {
//down arrow
if (playery < 450) {
playery = playery + 50;
player.style.position = "absolute";
player.style.top = playery + "px";
win()
}
} else if (e.keyCode == '37') {
//left arrow
if (playerx > 0) {
playerx = playerx - 50;
player.style.position = "absolute";
player.style.left = playerx + "px";
win()
}
} else if (e.keyCode == '39') {
//right arrow
if (playerx < 450) {
playerx = playerx + 50;
player.style.position = "absolute";
player.style.left = playerx + "px";
win()
}
}
}
}
console.log(winCount);
function play() {
if (winCount === 5) {
playerStart();
start();
getGun(1);
gunPosition(1);
checkKeyVal(1)
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Start to Finish</title>
<link href="favicon.png" rel="icon" type="image/x-icon">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="center">
<div class="game-bg">
<div class="gun hide" id="gunx1"></div>
<div class="gun hide" id="gunx2"></div>
<div class="gun hide" id="gunx3"></div>
<div class="gun hide" id="gunx4"></div>
<div class="gun hide" id="gunx5"></div>
<div class="gun hide" id="gunx6"></div>
<div class="gun hide" id="gunx7"></div>
<div class="gun hide" id="gunx8"></div>
<div class="gun hide" id="gunx9"></div>
<div class="gun hide" id="gunx10"></div>
<div class="gun hide" id="guny1"></div>
<div class="gun hide" id="guny2"></div>
<div class="gun hide" id="guny3"></div>
<div class="gun hide" id="guny4"></div>
<div class="gun hide" id="guny5"></div>
<div class="gun hide" id="guny6"></div>
<div class="gun hide" id="guny7"></div>
<div class="gun hide" id="guny8"></div>
<div class="gun hide" id="guny9"></div>
<div class="gun hide" id="guny10"></div>
<div class="bullet-side hide" id="bullety1"></div>
<div class="bullet-side hide" id="bullety2"></div>
<div class="bullet-side hide" id="bullety3"></div>
<div class="bullet-side hide" id="bullety4"></div>
<div class="bullet-side hide" id="bullety5"></div>
<div class="bullet-side hide" id="bullety6"></div>
<div class="bullet-side hide" id="bullety7"></div>
<div class="bullet-side hide" id="bullety8"></div>
<div class="bullet-side hide" id="bullety9"></div>
<div class="bullet-side hide" id="bullety10"></div>
<div class="bullet-up hide" id="bulletx1"></div>
<div class="bullet-up hide" id="bulletx2"></div>
<div class="bullet-up hide" id="bulletx3"></div>
<div class="bullet-up hide" id="bulletx4"></div>
<div class="bullet-up hide" id="bulletx5"></div>
<div class="bullet-up hide" id="bulletx6"></div>
<div class="bullet-up hide" id="bulletx7"></div>
<div class="bullet-up hide" id="bulletx8"></div>
<div class="bullet-up hide" id="bulletx9"></div>
<div class="bullet-up hide" id="bulletx10"></div>
<div class="player hide" id="player"></div>
<div class="goal hide" id="goal"></div>
</div>
</div>
<div class="center">
<button class="button" onclick="play()">Play</button>
</div>
<div class="darken hide" id="darken">
<h1 class="alert-text hide" id="loseText">Game Over</h1>
<h1 class="alert-text hide" id="winText">You Win!</h1>
</div>
<div class="center hide" id="buttonCenter">
<button class="restart-button hide" onclick="play()" id="restartButton">Try again?</button>
</div>
<script src="script.js"></script>
</body>
</html>
<style>
html, body {
background-color: grey;
}
@keyframes bullet-left {
0%{left: 510px;}
50%{left: 0px;}
51%{left: 510px;}
}
@keyframes bullet-up {
0%{top: 510px;}
50%{top: 0px;}
51%{top: 510px;}
}
.gun{
height: 40px;
width: 40px;
background-color: black;
position: absolute;
}
.bullet-up{
width: 5px;
height: 40px;
background-color: yellow;
position: absolute;
animation-name: bullet-up;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.bullet-side{
width: 40px;
height: 5px;
background-color: yellow;
position: absolute;
animation-name: bullet-left;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.center{
display: flex;
align-items: center;
justify-content: center;
}
.hide{
display: none;
}
.game-bg{
width: 500px;
height: 31.25rem;
background-color: white;
position: relative;
display: inline-block;
}
.player{
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
}
.goal{
width: 50px;
height: 50px;
background-color: #00ff00;
position: absolute;
}
.darken{
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.button{
width: 200px;
height: 50px;
margin-top: 50px;
}
.restart-button{
width: 200px;
height: 50px;
z-index: 999;
position: absolute;
}
.alert-text{
position: relative;
color: white;
font-size: 144px;
text-align: center;
z-index: 999;
}
</style>
As I've said I don't know what to do, and if any extra clarification is needed I will give some.
