Блог

Главная - Вопросы по программированию - Добавить табло в «игру»

Добавить табло в «игру»

#javascript

#javascript

Вопрос:

Я пытаюсь создать уменьшенную версию «утиной охоты», я хочу добавить табло, когда каждый раз, когда вы попадаете в утку, это 1, а когда вы пропускаете -1, но счет не может быть ниже 0 (например, не -1), когда вы попробовали 20 раз, игра останавливается ивы увидите свой счет, поэтому на экране будет отображаться время попадания и промаха. Как мне добавить это в свой код, пока у меня есть это:

 var duck = document.getElementById('duck');
duck.style.position = 'relative';
var hit = 0;
var miss = 0
var count = 0;
var timing = setInterval(moveduck, 5000);
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
duck.addEventListener('click', moveduck);

function moveduck() {
  var top = Math.floor(Math.random() * 750);
  var left = Math.floor(Math.random() * 750);
  var right = Math.floor(Math.random() * 750);
  var bottom = Math.floor(Math.random() * 750);
  var vertical = Math.floor(Math.random() * 750);
  var horizontal = Math.floor(Math.random() * 750);
  duck.style.top = top   'px';
  duck.style.left = left   'px';
  duck.style.right = right   'px';
  duck.style.bottom = bottom   'px';
  duck.style.vertical = vertical   'px';
  duck.style.horizontal = horizontal   'px';
};


button1.onclick = succesfullhit;

function succesfullhit() {
  hit  ;
  button1.innerHTML = hit;
}

button2.onclick = failedhit;

function failedhit() {
  miss--;
  button2.innerHTML = miss;
}  
 #duck { height:50px; }  
 <!DOCTYPE html>
<html lang="en">

<head>
  <title>Duck hunt</title>
  <link rel="stylesheet" type="text/css" href="Duckhunt.css">
</head>

<body>
  <div class="container">
    <input type="image" src="https://www.iconsdb.com/icons/preview/orange/duck-xxl.png" name="duck" id="duck" />
    <button id="button1">Hit: </button>
    <p></p>
    <button id="button2">Miss: </button>
  </div>
  <script src="Duckhunt.js"></script>
</body>

</html>

Ответ №1:

Я думаю, вы хотите сделать что-то вроде этого: я изменил попадание и промах, и я только забил. я добавил в документ прослушиватель событий, если вы попали в duck score , если не забили — и я показываю результат. я добавил оператор if, если оценка === -1 игра окончена. если счет === 20 побед

Конечно, вам нужно немного поработать, чтобы сделать его идеальным для ваших нужд, это только для начала.

 var duck = document.getElementById('duck');
duck.style.position = 'relative';
var score = 0
var timing = setInterval(moveduck, 5000);
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");


function moveduck() {
  var top = Math.floor(Math.random() * 750);
  var left = Math.floor(Math.random() * 750);
  var right = Math.floor(Math.random() * 750);
  var bottom = Math.floor(Math.random() * 750);
  var vertical = Math.floor(Math.random() * 750);
  var horizontal = Math.floor(Math.random() * 750);
  duck.style.top = top   'px';
  duck.style.left = left   'px';
  duck.style.right = right   'px';
  duck.style.bottom = bottom   'px';
  duck.style.vertical = vertical   'px';
  duck.style.horizontal = horizontal   'px';
  score  
};

document.addEventListener("click", function(e){
if(score === -1){
    score = 0
    document.getElementById('score').innerHTML = 'Game over'
    console.log('game over')
  }
if(score === 20){
    document.getElementById('score').innerHTML = 'Win'
    console.log('Win')
  }
  if (e.target.id === 'duck'){
    moveduck()
     document.getElementById('score').innerHTML = score
  }else {
  score--
  document.getElementById('score').innerHTML = score
  }
})  
 #duck { height:50px; }  
 <!DOCTYPE html>
<html lang="en">

<head>
  <title>Duck hunt</title>
  <link rel="stylesheet" type="text/css" href="Duckhunt.css">
</head>

<body>
<div id="scoreBoard">Score: <p id="score"></p></div>
  <div class="container">
    <input type="image" src="https://www.iconsdb.com/icons/preview/orange/duck-xxl.png" name="duck" id="duck" />
  </div>
  <script src="Duckhunt.js"></script>
</body>

</html>

Комментарии:

1. о, вау, это почти именно то, что я имел в виду. но есть ли способ добавить что-то вроде этого: nutty.ca/resource/images/games/duckhunt/… в конце? Мне нужно создать другой html для чего-то подобного, или у меня есть способ добавить его в это?

2. @desit900 вот так codepen.io/Elnatan/pen/KKMJpaJ

Ответ №2:

Вот начало

 var duck = document.getElementById('duck');
duck.style.position = 'relative';
var hit = 0;
var miss = 0
var count = 0;
var timing = setInterval(moveduck, 5000);
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
document.body.addEventListener('click', function(e) {
  if (hit miss >= 20) return
  const tgt = e.target;
  if (tgt.id ==="duck") succesfullhit()
  else failedhit();
  if (hit miss === 20) clearInterval(timing)
  else moveduck();
});

function moveduck() {
  var top = Math.floor(Math.random() * 750);
  var left = Math.floor(Math.random() * 750);
  var right = Math.floor(Math.random() * 750);
  var bottom = Math.floor(Math.random() * 750);
  var vertical = Math.floor(Math.random() * 750);
  var horizontal = Math.floor(Math.random() * 750);
  duck.style.top = top   'px';
  duck.style.left = left   'px';
  duck.style.right = right   'px';
  duck.style.bottom = bottom   'px';
  duck.style.vertical = vertical   'px';
  duck.style.horizontal = horizontal   'px';
};

function succesfullhit() {
  hit  ;
  button1.innerHTML = hit;
}

function failedhit() {
  miss  ;
  button2.innerHTML = -1*miss;
}  
 #duck { height:50px; }  
 <div class="container">
    <input type="image" src="https://www.iconsdb.com/icons/preview/orange/duck-xxl.png" name="duck" id="duck" /><br/>
    <button id="button1">Hit: </button>
    <p></p>
    <button id="button2">Miss: </button>
  </div>