Question

我的计算科学课程的任务是创建一个游戏。

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

我很难弄清楚如何计算得分（当点击或错过形状时）并改变游戏难度

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

保持分数

保持数字被淘汰和错失是有点棘手的。战略需要：

创建形状时，给它一个.click（）处理程序，以便我们可以在用户点击时将其删除。
当它被创建时，启动一个动画，确定可以点击它的时间：在动画结束时，我们会声明它被遗漏。
在形状的点击处理程序中，将其从SVG中删除并将其计为zapped。
当动画结束时，从SVG中删除形状并将其计为错过。

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

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

我们已经看到前两个参数：新属性以及动画应该花多长时间。我们将忽略第三个参数并将其保留为“线性”（默认值）。

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

每个形状的初始设置为：

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

然后在每个miss和zap函数中

从图像中删除形状。
将一个加到变量中，跟踪总的击穿/失误。
更新HTML中的zaps和misses显示。

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

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

var zap_total = 0;
var difficulty = 0;

在启动功能中，更新难度

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

当用户点击zap时，我们增加zap_total并更新zapped结果

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);
}

在比赛中保持得分

1 个答案: