在比赛中记分

Question

我的计算机科学任务 class 是创建游戏。

到目前为止，我可以在调用时添加形状，并在单击时使它们消失。

我在尝试弄清楚如何计算分数（当形状被点击或错过时）和改变游戏难度时遇到了困难

以下是我们从教授那里收到的一些提示：

保持分数

保持号码切换和错过有点棘手。策略需要是：

创建形状后，给它一个 .click() 处理程序，这样我们就可以在用户单击时对其进行切换。
当它被创建时，启动一个动画来确定它可以被点击的时间：在动画结束时，我们将声明它错过了。
在形状的点击处理程序中，将其从 SVG 中移除并将其计为已切换。
动画结束后，从 SVG 中移除形状并将其计为未命中。

为此，我们需要在 .animate() 上使用更多参数：

shape.animate(attributes, time, 'linear', callback)

我们已经看到了前两个参数：新属性，以及动画需要多长时间。我们将忽略第三个参数并将其保留为 'linear'（默认值）。

当动画结束时，Raphaël 将运行函数回调()。回调参数为我们提供了一种在动画结束时运行一些逻辑的方法。对我们来说，那是用户“错过”的时候。

每个形状的初始设置为：

shape.click(zap)
shape.animate(..., ..., 'linear', miss)

然后在每个 miss 和 zap 函数中：

从图像中删除形状。
将 1 添加到跟踪总数的变量 zaps/misses。
更新 HTML 中 zaps 和 miss 的显示。

This is what I am trying to aim for

start = function() {
    difficulty = $('#howmany').val();
    figure = $('#choice').val();
    var SVG = $('svg');

 
    for (i = 0; i < difficulty; i += 1){
     x = Math.random() * 400
     y = Math.random() * 400
     if (figure == 'a') {
      shape = paper.path('M25,0 L50,50 L0,50 Z')
     } 
     if (figure == 'b') {
      shape = paper.rect(0, 0, 25, 25)
     } 
     if (figure == 'c') {
      shape = paper.circle(0, 0, 25)
     } 
     shape_attr = {
      'fill': '#F9B'
     }
     shape_move = { 
      'transform': 't' + x + ',' + y,
     }
     shape.attr(shape_attr)
     shape.animate(shape_move, difficulty * 1000)
     shape.click(zap)
  
     setTimeout(function(){
      SVG.find("circle").remove();
      SVG.find("rect").remove();
      SVG.find("path").remove();
     }, difficulty * 1000);  


    }
}  

zap = function () {
    this.remove();
}

miss = function () {

}



setup = function() {
    paper = Raphael('svg', 400, 400)
    $('#go').click(start) 

}

jQuery(document).ready(setup)

svg {
  border: thin solid black;
  margin-top: 2em;
}

main {
  margin-left: 2em;
}

<!DOCTYPE html> 
<html lang="en">
<head> 
  <meta charset="UTF-8" />
  <script src="http://cmpt165.csil.sfu.ca/js/jquery-3.1.1.js"></script>
  <script src="http://cmpt165.csil.sfu.ca/js/raphael-2.1.4.js"></script>
  <script src="logic.js"></script>
  <link rel="stylesheet" href="style.css" />
  <title>Assignment 4: Zap 'em</title>
</head> 

<body>

  <h1>Assignment 4: Zap 'em</h1>

  <main>

    <div class="form">Difficulty:
      <input type="text" id="howmany" />
      Shape: <select id="choice">
      <option value="a">Triangle</option>
      <option value="b">Square</option>
      <option value="c">Circle</option>
    </select>
    <br>
    <button id="go">Start</button></div>

    <div id="svg"></div>

    Zapped: <p id="zapped"></p>
    Escaped: <p id="escaped"></p>
     
  </main>
</body>
</html>

这是我目前的情况。
如果你们能帮我解决这个问题，那就太好了。

Answer 1

您可以使用全局变量来存储 zap 点击次数和难度

var zap_total = 0;
var difficulty = 0;

启动函数中，更新难度

difficulty = parseInt($('#howmany').val());

当用户点击切换时，我们递增 zap_total 并更新切换结果

zap = function () {
   this.remove();
   zap_total++;
   $('#zapped").text(zap_total);
}

超时后，我们更新未命中分数

...
    setTimeout(function(){
        SVG.find("circle").remove();
        SVG.find("rect").remove();
        SVG.find("path").remove();
        miss();
    }, difficulty * 1000);
...

miss = function () {
    $('#escaped").text(difficulty - zap_total);
}

在比赛中记分

Keeping score in a game

html

javascript

jquery

raphael