我的应用程序有点问题。我试图制作僵尸从右边到左边的游戏。他们已经在移动了，我也可以用鼠标点击杀死他们，但我找不到一个方法，我怎么能把致命线放在他们会死的地方。我试着做偏移，但不起作用。这是代码：
const game_window = document.querySelector('.game-container')
const score_window = document.querySelector('.score')
const hp = document.querySelector('.hp')
let points = 0;
class Game {
constructor(monster_height, monster_width) {
this.monster_height = monster_height
this.monster_width = monster_width
this.declare()
}
declare() {
this.new_monster
}
create_monster() {
this.new_monster = document.createElement('div')
this.new_monster.classList.add('monster')
game_window.appendChild(this.new_monster)
}
monster_click() {
let monsters = document.querySelectorAll('.monster')
monsters.forEach(el => {
el.addEventListener('click', function() {
game_window.removeChild(el)
this.score()
}.bind(this));
});
};
monster_move() {
console.log(this.new_monster);
this.new_monster.style.transform = "translateX(-1500px)"
}
score() {
points += 10
score_window.innerText = points;
}
health() {
}
}
letsPlay = new Game(50, 50)
setInterval(() => {
letsPlay.monster_move()
}, 500);
setInterval(() => {
letsPlay.create_monster()
letsPlay.monster_click()
letsPlay.health()
}, 1000);
//500
//1000<div class="game-container"></div>
<span class="score"></span>
<span class="hp"></span>这是代码。致命的台词我指的是屏幕上的台词。我想用僵尸破坏我的健康点之一：(
const game_window=document.querySelector('.game-container')
const score_window=document.querySelector('.score')
const hp=document.querySelector('.hp')
let points=0;
class Game{
constructor(monster_height, monster_width){
this.monster_height=monster_height
this.monster_width=monster_width
this.declare()
}
declare(){
this.new_monster
}
create_monster(){
this.new_monster=document.createElement('div')
this.new_monster.classList.add('monster')
game_window.appendChild(this.new_monster)
}
monster_click(){
let monsters=document.querySelectorAll('.monster')
monsters.forEach( el => {
el.addEventListener('click', function(){
game_window.removeChild(el)
this.score()
}.bind(this));
});
};
monster_move(){
console.log(this.new_monster);
this.new_monster.style.transform="translateX(-1500px)"
}
score(){
points+=10
score_window.innerText=points;
}
health(){
}
}
letsPlay=new Game(50, 50)
setInterval(()=>{
letsPlay.monster_move()
}, 500);
setInterval(() => {
letsPlay.create_monster()
letsPlay.monster_click()
letsPlay.health()
}, 1000);
//500
//1000body{
margin:0;
padding:0;
background-image:url('images/bg.jpg');
background-repeat: no-repeat;
min-height:100%;
cursor: crosshair;
}
.game-container{
width:100%;
display:flex;
justify-content: flex-end;
margin-top:25%;
}
.monster{
width:6%;
height:170px;
transition-duration: 3s;
background-image: url('images/zombie.png');
background-position: center;
position:absolute;
}
.scoreNav{
display:flex;
justify-content: space-between;
align-items: center;
}
.score {
width:20%;
height:100px;
background-color:black;
font-size:50px;
color:white;
margin:1% 0 0 1%;
text-align:center;
line-height: 200%;
}
.health{
display:Flex;
justify-content: space-around;
width: 15%;
height:70px;
background-color:black;
position:relative;
right:5%;
}
.score, .health{
border-radius:12%;
}
.hp{
position: relative;
top:15%;
background-image: url("images/hp.jpg");
background-image: center;
background-repeat: no-repeat;
width:20%;
}<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="scoreNav">
<div class="score"></div>
<div class="health">
<div class="hp"></div>
<div class="hp"></div>
<div class="hp"></div>
</div>
</div>
<div class="game-container">
</div>
<script src="logic.js"></script>
</body>