JS中的僵尸游戏

问题描述

我的应用程序有点问题。我正在尝试制作僵尸从右侧到左侧的游戏。他们已经动弹了，我也可以用鼠标点击杀死他们，但是我找不到一种方法如何将致命线放置在它们会死的地方。我试图做胶印，但不起作用。这是代码：

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>

解决方法

这是代码。致命线我是指屏幕上的线。我想与僵尸div破坏我的健康点之一：）

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>

javascript offset pixel

JS中的僵尸游戏

问题描述

解决方法

相关问答