JS中的僵尸游戏答案

【问题标题】：Zombie game in JSJS中的僵尸游戏
【发布时间】：2020-08-20 11:22:12
【问题描述】：

我的申请有点问题。我试图制作僵尸从右侧到左侧的游戏。他们已经在移动了，我也可以用鼠标点击杀死他们，但我找不到一种方法，我怎么能把致命线放在他们会死的地方。我试图做抵消，但它不起作用。代码如下：

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>

【问题讨论】：

欢迎来到 StackOverflow。对于您的问题，我们将需要更多信息和代码。 “致命线”是什么意思？您能否也分享随之而来的 HTML 和 CSS，因为这可能会影响答案。理想情况下，如果您点击“JavaScript/HTML/CSS Snippet”按钮（看起来像上面带有的纸）并将部件放在那里，您可以让它在浏览器中运行，这将更容易提供帮助。
我给你做了一个sn-p。你能把它改成minimal reproducible example吗？

标签： javascript pixel offset

【解决方案1】：

这里是代码。致命线我的意思是屏幕上的线。我想用僵尸破坏我的健康点之一:)

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

body{
    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>

【讨论】：