Question

我正在尝试实现handleOnPress函数，该代码是由教科书提供的，这令人困惑，因为它似乎没有按预期方式工作，实际上它什么也没做。

该函数应该允许我单击记忆游戏中的正方形，如果正方形是相同的颜色，则两个选择的正方形都会消失，如果单击相同的正方形两次，则函数会重置，并且如果您将两个匹配，功能重置不一样。

如果有人可以看看并指出他们看到的任何错误，将非常感谢，谢谢！

<!DOCTYPE html>
<html>
    <head>
        <title>Recipe: Drawing a square</title>
        <script src="easel.js"></script>

        <script type="text/javascript">
            var canvas;
            var stage;
            var squareSide = 70;
            var squareOutline = 5;
            var max_rgb_color_number = 255;
            var gray = createjs.Graphics.getRGB(20, 20, 20);
            var placementArray = [];
            var highlight = createjs.Graphics.getRGB(255, 255, 0);
            var tileClicked;

            function init() {
                var rows = 6;
                var columns = 6;
                var squarePadding = 10;
                canvas = document.getElementById('myCanvas');
                stage = new createjs.Stage(canvas);

                var numberOfTiles = rows*columns;
                setPlacementArray(numberOfTiles);

                for(var i=0;i<numberOfTiles;i++){
                    var placement = getRandomPlacement(placementArray);
                    if(i % 2 === 0){
                        var color = randomColor();
                    }
                    square = drawSquare(color);
                    square.color = color;
                    square.x = (squareSide+squarePadding) * (placement%columns);
                    square.y = (squareSide+squarePadding) * Math.floor(placement/columns);
                    stage.addChild(square);
                    square.onPress = handleOnPress;
                    stage.update();
                }               
            }
            function drawSquare(color) {
                var shape = new createjs.Shape();
                var graphics = shape.graphics;
                graphics.setStrokeStyle(squareOutline);
                graphics.beginStroke(gray);
                graphics.beginFill(color);
                graphics.rect(squareOutline, squareOutline, squareSide, squareSide);                
                return shape;
            }       
            function randomColor(){
                var color = Math.floor(Math.random()*max_rgb_color_number);
                var color2 = Math.floor(Math.random()*max_rgb_color_number);
                var color3 = Math.floor(Math.random()*max_rgb_color_number);
                return createjs.Graphics.getRGB(color, color2, color3);
            }
            function setPlacementArray(numberOfTiles){
                for(var i=0;i<numberOfTiles;i++){
                    placementArray.push(i);
                }
            }
            function getRandomPlacement(placementArray){
                randomNumber = Math.floor(Math.random()*placementArray.length);
                return placementArray.splice(randomNumber, 1)[0];
            }
            function handleOnPress(event){
                var tile = event.target;
                if(!!tileClicked === false){
                    tile.graphics.setStrokeStyle(squareOutline).beginStroke(highlight)
                      .rect(squareOutline, squareOutline, squareSide, squareSide);
                    tileClicked = tile;
                    }
                    else{
                        if(tileClicked.color === tile.color && tileClicked !== tile){
                        tileClicked.visible = false;
                        tile.visible = false;
                    }
                    else{
                        tileClicked.graphics.setStrokeStyle(squareOutline).beginStroke(gray)
                          .rect(squareOutline, squareOutline, squareSide, squareSide);
                    }
                        tileClicked = null;
                }
                stage.update();
            }   
        </script>
</head>
<body onload="init()">
        <canvas id="myCanvas" width="960" height="600"></canvas>
</body>
</html>

Answer 1

onEvent样式的处理程序（onClick，onMouseDown等）在很久以前（2013年9月25日，版本0.7.0）已被弃用。

使用事件，例如

square.addEventListener("mousedown", handleOnPress);

或快捷方式on()方法：

square.on("mousedown", handleOnPress);

请注意，也没有“按下”事件。对于拖放式事件，有一个“ mousedown”事件以及“ pressmove” /“ pressup”事件。

以下是所有显示对象上的事件列表：https://createjs.com/docs/easeljs/classes/DisplayObject.html#event_mousedown

我不知道这是否能解决所有问题，但是它可以使点击处理程序触发。

难以实现handleOnPress函数

1 个答案: