javascript - 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>
解决方案
这是代码。致命线我的意思是屏幕上的线。我想用僵尸破坏我的健康点之一:)
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>
推荐阅读
- html - 遍历页面的 HTML 容器
- microservices - zuul网关上的奇怪错误,未找到微服务Url
- typescript - 从另一个中删除/过滤特定类型的属性
- php - 在 PHP 函数中使用属性
- node.js - Nodejs & mongodb:如果记录不存在则插入记录。如果自上次记录以来发生更改,则插入新记录(未处理的承诺拒绝)
- vue.js - 父组件完成ajax调用后如何将道具传递给子组件?
- python - 如何在 Python 中进行游标锁定?
- python - 如何使用 Python Pandas 在数据框的最后一列中获取第一个具有货币格式的单元格的行索引
- javascript - GObject.ParamFlags.CONSTRUCT_ONLY 抛出错误,除非它也是 WRITABLE
- android - 如何正确找到物理相机 ID,Android Studio