为游戏创建简单的HTML计数器

Question

我想创建简单的计数器。我必须通过按下键盘键来制作一个在左侧或右侧添加点的脚本＆＃34; left＆＃34;或者＆＃34;对＆＃34;分别。

＆＃34;左＆＃34;班级形成左半部分和＃34;右侧＆＃34;正确的。容器使用CSS在flex中构造它们。 ＆＃34;标号左＆＃34;和＆＃34;数字右＆＃34;两边都有数字显示。

这就是我在JS中通过从论坛复制部分代码并进行编辑而获得的：

＆＃13;

＆＃13;

var sum-left = 0,
  sum-right = 0;
var left = document.querySelector(".numeral-left"),
  right = document.querySelector(".numeral-right");
left.textContent = 0, right.textContent = 0;

function keyEvent() {
  switch (event.keyCode) {
    case 37: {
      sum - left += 1;
      break
    }
    case 39: {
      sum - right += 1;
      break
    }
  }
}

while (true) {
  keyEvent();
  left.textContent = sum - left;
  right.textContent = sum - right;
}

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
}

.left {
  width: 50%;
  background-color: antiquewhite;
}

.right {
  width: 50%;
  background-color: cornsilk;
}

.numeric-left {
  margin-left: 48%;
  margin-right: 50%;
  margin-top: 45%;
  margin-bottom: 45%;
  font-size: 4.5em;
}

.numeric-right {
  margin-left: 48%;
  margin-right: 50%;
  margin-top: 45%;
  margin-bottom: 45%;
  font-size: 4.5em;
}

＆＃13;

<div class=container>
  <div class=left>
    <div class=numeral-left>0</div>
  </div>
  <div class=right>
    <div class=numeral-right>0</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我在网页脚本方面表现不佳，很难理解JS中代码的哪一部分负责HTML。

它看起来像什么

Answer 1

尝试使用此代码

var suml = 0;
var sumr = 0;
var left = 0;
var right = 0;
var left = document.querySelector(".numeral-left"),
  right = document.querySelector(".numeral-right");
left.textContent = 0, right.textContent = 0;

$('body').keydown(function(event) {
  // alert(event.keyCode);
  keyEvent(event);

})

function keyEvent(event) {
  //alert(event.keyCode);
  switch (event.keyCode) {
    case 37:
      {
        //umr=0;
        suml += 1;
        left.textContent = (suml);
        break
      }
    case 39:
      {
        //uml= 0;
        sumr += 1;
        right.textContent = (sumr);
        break
      }
  }
}
/*while (true) {
  keyEvent(event);
  left.textContent = (sum - left);
  right.textContent = (sum - right);
}*/

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
}

.left {
  width: 50%;
  background-color: antiquewhite;
}

.right {
  width: 50%;
  background-color: cornsilk;
}

.numeric-left {
  margin-left: 48%;
  margin-right: 50%;
  margin-top: 45%;
  margin-bottom: 45%;
  font-size: 4.5em;
}

.numeric-right {
  margin-left: 48%;
  margin-right: 50%;
  margin-top: 45%;
  margin-bottom: 45%;
  font-size: 4.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
  <div class=left>
    <div class=numeral-left>0</div>
  </div>
  <div class=right>
    <div class=numeral-right>0</div>
  </div>
</div>

Answer 2

外部资源

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js

＆＃13;

＆＃13;

$(document).ready(function(e) {
  window.addEventListener('keydown', function(e) {
    // go to the right
    if (e.keyCode == 39) {
      sumRight += 1;
      $(".numeral-right").text(sumRight);
    }
    // go to the left
    if (e.keyCode == 37) {

      sumLeft += 1;
      $(".numeral-left").text(sumLeft);
    }
  });
  var sumLeft = 0,
    sumRight = 0;
  $(".numeral-left").on("click", function() {
    sumLeft += 1;
    $(this).text(sumLeft);
  });
  $(".numeral-right").on("click", function() {
    sumRight += 1;
    $(this).text(sumRight);
  });
  $("div").each(function(e) {
    $(this).on("keydown", function(e) {
      console.log("log", e.keyCode);
    });
  });
});

＆＃13;

* {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
}

.left {
  width: 50%;
  background-color: antiquewhite;
}

.right {
  width: 50%;
  background-color: cornsilk;
}

.numeric-left {
  margin-left: 48%;
  margin-right: 50%;
  margin-top: 45%;
  margin-bottom: 45%;
  font-size: 4.5em;
}

.numeric-right {
  margin-left: 48%;
  margin-right: 50%;
  margin-top: 45%;
  margin-bottom: 45%;
  font-size: 4.5em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
  <div class=left>
    <div class=numeral-left>0</div>
  </div>
  <div class=right>
    <div class=numeral-right>0</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;