时间戳

首页 > 解决方案 > 难以实现handleOnPress功能

javascript - 难以实现handleOnPress功能

问题描述

我正在尝试实现该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>

标签： javascript

解决方案

-style 处理程序（onClick、onMouseDown 等）在onEvent很久以前就被弃用和删除（版本 0.7.0，2013 年 9 月 25 日）。

相反，使用事件，例如

square.addEventListener("mousedown", handleOnPress);

或快捷on()方式：

square.on("mousedown", handleOnPress);

还要注意没有“新闻”事件。有一个“mousedown”事件，以及拖放式事件的“pressmove”/“pressup”事件。

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

我不知道这是否能解决所有问题，但它应该让你的点击处理程序触发。

推荐阅读