Question

我正在尝试制作一个使用怪物防御作为计算的玩家伤害等式。由于每个怪物具有不同的防御值，我不知道如何编码它以根据所选怪物进行更改。这是我试过的。 JSFiddle

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.css.PseudoClass;
import javafx.geometry.Point2D;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.stage.Stage;

public class GridOfCircles extends Application {

    private static final PseudoClass SELECTED_P_C = PseudoClass.getPseudoClass("selected");

    private final int numColumns = 100 ;
    private final int numRows = 100 ;
    private final double radius = 4 ;
    private final double spacing = 2 ;

    private final ObjectProperty<Circle> selectedCircle = new SimpleObjectProperty<>(); 

    private final ObjectProperty<Point2D> selectedLocation = new SimpleObjectProperty<>();

    @Override
    public void start(Stage primaryStage) {

        selectedCircle.addListener((obs, oldSelection, newSelection) -> {
            if (oldSelection != null) {
                oldSelection.pseudoClassStateChanged(SELECTED_P_C, false);
            }
            if (newSelection != null) {
                newSelection.pseudoClassStateChanged(SELECTED_P_C, true);
            }
        });

        Pane grid = new Pane();

        for (int x = 0 ; x < numColumns; x++) {
            double gridX = x*(spacing + radius + radius) + spacing ;
            grid.getChildren().add(new Line(gridX, 0, gridX, numRows*(spacing + radius + radius)));
        }

        for (int y = 0; y < numRows ; y++) {
            double gridY = y*(spacing + radius + radius) + spacing ;
            grid.getChildren().add(new Line(0, gridY, numColumns*(spacing + radius + radius), gridY));
        }

        for (int x = 0 ; x < numColumns; x++) {
            for (int y = 0 ;y < numRows ; y++) {
                grid.getChildren().add(createCircle(x, y));
            }
        }


        Label label = new Label();
        label.textProperty().bind(Bindings.createStringBinding(() -> {
            Point2D loc = selectedLocation.get();
            if (loc == null) {
                return "" ;
            }
            return String.format("Location: [%.0f, %.0f]", loc.getX(), loc.getY());
        }, selectedLocation));

        BorderPane root = new BorderPane(new ScrollPane(grid));
        root.setTop(label);


        Scene scene = new Scene(root);
        scene.getStylesheets().add("grid.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private Circle createCircle(int x, int y) {
        Circle circle = new Circle();
        circle.getStyleClass().add("intersection");
        circle.setCenterX(x * (spacing + radius + radius) + spacing);
        circle.setCenterY(y * (spacing + radius + radius) + spacing);
        circle.setRadius(radius);

        circle.addEventHandler(MouseEvent.MOUSE_CLICKED, e -> {
            selectedCircle.set(circle);
            selectedLocation.set(new Point2D(x, y));
        });

        return circle ;
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Answer 1

实现目标的一种方法是：
- 保存对this课程中Monster的引用（例如self）
- 在Monster元素的data属性中保存对每个option对象的引用。

function Monster(name, exp, gold, hp, atk, def, spd) {
  var self = this;
  /* ...*/
  this.implement = function() {
    /* ... */
    // we save the Monster object (self) in the 
    // <option></option> data attribute 'monster'
    $(opt).data('monster', self)
  }

  // and your playerDam function becomes:
  this.playerDam = function () {
    self.playerDamage = Math.round(playerATK - this.def);
    return self.playerDamage;
  }
}

当用户单击该按钮时，您将检索当前选定的值，并获取数据属性：

monsterEl = $('#monsterList option:selected');
// we retrieve the monster selected from the <option></option> data attribute
monster = monsterEl.data('monster')
$('#dam')
  .html("You have hit the " + $('#monsterList').val() + " for " + monster.playerDam() + " damage");

请参阅updated fiddle

修改

你有一个怪物列表，如果你这样做：

var opt = document.createElement('OPTION'); // Creating option opt.innerText = this.name;

然后你不保存怪物，而只保存怪物的名字。

所以你必须在每个option元素中保留对怪物对象的引用。

执行此操作的一种方法是使用data-attributes，其目的是存储具有名称的对象（此处我选择monster，但它可以是任何字符串），您可以稍后检索。 / p>
当您创建一个像var fly = new Monster("fly", 1, 1, 5, 1, 0, 1)这样的新怪物时，这将创建一个<option data-monster="you monster object"></option>元素（数据怪物不会在源中显示，但相信我，它就在那里），包含{ {1}}具有所有属性的对象（name，hp，exp ...）。

当您单击该按钮时，jQuery将获取所选选项并使用密钥Monster检索数据：

monster

现在// get the selected option via CSS selector monsterEl = $('#monsterList option:selected') // get the associated Monster via the .data('monster') method monster = monsterEl.data('monster') // now you can invoke method on the monster variable console.log(monster.name ) // 'fly' console.log(monster.hp ) // 5函数：

playerDam()

您正在将var self = this this.playerDamage = 0; this.playerDam = function () { self.playerDamage = Math.round(playerATK - self.def); return self.playerDamage; }功能分配给Monster功能范围（playerDam）要访问函数内部的Monster作用域，您必须使用技巧并使用变量（此处为this，但可以是任何变量名称）来预先存储Monster作用域。然后，您可以从self函数内部访问它。

你也可以在原型上使用一种方法来节省内存：

playerDam

我希望我很清楚，这将很多不同的概念混合在一起，也许其他人可以更好地解释我做的;）您应该查看Knockout，react或vue.js等Javascript框架，这样可以让您更轻松！

编辑2
我已reupdated the fiddle在Monster.prototype.playerDam = function() { // 'this' is the now the Monster class scope this.playerDamage = Math.round(playerATK - this.def); return this.playerDamage; }函数
中修复this.def

如何调用对象制作者之外的对象属性值

1 个答案: