原生js编码练习 创建一个程序,给定一条美国十瓶保龄球的有效滚动序列,生成游戏的

要实现这个程序，需要先了解什么是保龄球游戏的计分规则。

保龄球游戏的计分规则如下：

1.每局有10轮，每轮可以滚动1~2次。

2.如果第一次滚球就将全部10个瓶子击倒，这称为“补中”（strike）。这一轮将自动获得10分，并跳过下一次滚球的机会。

3.如果第一次滚球只击倒一部分瓶子，需要再滚一次。这称为“补2”（spare）。

4.如果第二次滚球也将全部10个瓶子击倒，这称为“补中”。这一轮将得到10分，并在下一次滚球前返还一次滚球的机会。

5.如果第二次滚球没能将全部10个瓶子击倒，这次滚球得分为击倒的瓶子数。

6.每轮得分为滚球得分与“额外得分（bonus）”之和。额外得分包括补中或补2后所得的分数。

7.第10轮有特殊规则，如果在第10轮中获得了补中或补2，将有额外滚球机会。

有了这些规则，就可以开始编写代码了。具体步骤如下：

1.创建一个数组，保存每轮滚球得分。

2.使用prompt()函数获取用户输入的滚球序列，将其拆分成每轮的滚球得分，保存到数组中。

3.遍历数组，对每轮得分进行计算。如果是补中或补2，需要根据规则计算额外得分。最后将每轮得分与额外得分相加，保存回数组中。

4.遍历数组，累加所有得分并输出结果。

这个程序的实现需要熟练掌握JavaScript中的数组操作、条件语句、循环语句等基本语法，同时需要对保龄球游戏的计分规则有深入的理解，才能保证程序的正确性和高效性。

相关问题

原生js写一个滚动尺子

好的，下面是一个简单的原生JS实现滚动尺子的代码：

HTML代码：

<div class="slider-wrapper">
  <div class="slider-track"></div>
  <div class="slider-handle"></div>
</div>

CSS代码：

.slider-wrapper {
  width: 300px;
  height: 30px;
  border: 1px solid #ccc;
  position: relative;
}
.slider-track {
  width: 100%;
  height: 5px;
  background-color: #ccc;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.slider-handle {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

JS代码：

var sliderWrapper = document.querySelector('.slider-wrapper');
var sliderHandle = sliderWrapper.querySelector('.slider-handle');
var sliderTrack = sliderWrapper.querySelector('.slider-track');

var isDragging = false;

sliderHandle.addEventListener('mousedown', function(e) {
  isDragging = true;
});

document.addEventListener('mousemove', function(e) {
  if (isDragging) {
    var x = e.clientX - sliderWrapper.offsetLeft;
    if (x < 0) {
      x = 0;
    } else if (x > sliderWrapper.offsetWidth - sliderHandle.offsetWidth) {
      x = sliderWrapper.offsetWidth - sliderHandle.offsetWidth;
    }
    var percent = x / (sliderWrapper.offsetWidth - sliderHandle.offsetWidth);
    sliderHandle.style.left = percent * 100 + '%';
    sliderTrack.style.width = percent * 100 + '%';
  }
});

document.addEventListener('mouseup', function(e) {
  isDragging = false;
});

说明：该代码使用了部分ES6语法，需要在支持ES6的浏览器中运行。该滚动尺子可拖动滑块调节滑块位置。

原生js写一个可以在页面上随意滚动的十字架

可以使用DOM操作和CSS样式设置来实现一个可以在页面上随意滚动的十字架，具体步骤如下：

1. 创建一个div元素，作为十字架的容器，设置其position为fixed，top和left为0，z-index为最高。

2. 在十字架容器内部，创建两个div元素，一个作为竖线，一个作为横线，设置它们的宽度和高度为1px，背景色为黑色。

3. 使用鼠标滚动事件监听，动态修改十字架容器的位置，使其跟随鼠标滚动。

下面是一个示例代码：

<div id="crosshair-container">
  <div class="crosshair-line crosshair-vertical"></div>
  <div class="crosshair-line crosshair-horizontal"></div>
</div>

#crosshair-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.crosshair-line {
  position: absolute;
  background-color: black;
}

.crosshair-vertical {
  width: 1px;
  height: 100%;
}

.crosshair-horizontal {
  width: 100%;
  height: 1px;
}

var crosshairContainer = document.getElementById('crosshair-container');
var crosshairVertical = document.querySelector('.crosshair-vertical');
var crosshairHorizontal = document.querySelector('.crosshair-horizontal');

document.addEventListener('scroll', function(e) {
  crosshairContainer.style.top = window.scrollY + 'px';
  crosshairContainer.style.left = window.scrollX + 'px';
});

这样，我们就可以在页面上随意滚动，而十字架会一直保持在页面上的固定位置。需要注意的是，为了让十字架容器始终保持在页面顶部，我们需要将其position设置为fixed，并且在滚动事件中动态修改其top和left属性。