Question

我必须在AngularJS为我的学校创建一个小程序，但我还不是很先进，因为我缺乏基本的训练。

我尝试使用箭头键进行纹理移动，但我没有成功在互联网上找到可用的答案。

如果有人能帮助我，我会很高兴。

以下是我现在用来移动它的代码，如果有帮助的话：

<!DOCTYPE html>
<html>
    <head>
        <title>Angular Game</title>
        <meta charset="utf-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>

    <body bgcolor="#151B54">
        <div ng-app="myApp" ng-controller="myCtrl"> 
            <div id="myDiv" ng-style=" {'position':'relative','height':'20px','width':'92px','background-color':'#348781','left': divleft+'px','top':divtop+'px'}">Raumschiff</div>

            <input type="button" ng-mousedown="goLeft()" value="<"> <input type="button" ng-mousedown="goRight()" value=">"><br>
            <input type="button" ng-mousedown="goDown()" value="v"> <input type="button" ng-mousedown="goUp()" value="^">

            <input type="button" ng-click="startInterval()" value="start">

    </div>

        <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope,$interval) { 

             $scope.divleft = 200;
             $scope.divtop = 300;

             $scope.goRight = function ()
            {
                $scope.divvel2 +=1;
            }

              $scope.goLeft = function ()
            {
                $scope.divvel2 -=1;
            }

             $scope.goUp = function ()
            {
                $scope.divvel +=1;
            }
             $scope.goDown = function ()
            {
                $scope.divvel -=1;
            }

            $scope.moveDiv = true;
            var intervalHandler;
            $scope.divvel ="0";
            $scope.divvel2 ="0";
            $scope.startInterval = function ()
            {

                $interval.cancel(intervalHandler);
                intervalHandler = $interval(myIntervalFunction,50);
            }


            myIntervalFunction = function()
            {
                $scope.divtop-=parseInt($scope.divvel);
                $scope.divleft+=parseInt($scope.divvel2);
            }
        });

        </script> 
    </body>
</html>

Answer 1

使用箭头键进行纹理移动。试试这个

var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope,$interval) { 

             $scope.divleft = 100;
             $scope.divtop = 30;

             $scope.goRight = function ()
            {
                $scope.divleft +=1;
            }

              $scope.goLeft = function ()
            {
                $scope.divleft -=1;
            }

             $scope.goUp = function ()
            {
                $scope.divtop -=1;
            }
             $scope.goDown = function ()
            {
                $scope.divtop +=1;
            }

            
        });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

        <div ng-app="myApp" ng-controller="myCtrl"> 
            <div id="myDiv" ng-style=" {'position':'relative','height':'20px','width':'92px','background-color':'#348781','left': divleft+'px','top':divtop+'px'}">Raumschiff</div>

            <input type="button" ng-mousedown="goLeft()" value="<"> <input type="button" ng-mousedown="goRight()" value=">"><br>
            <input type="button" ng-mousedown="goDown()" value="v"> <input type="button" ng-mousedown="goUp()" value="^">


    </div>

Answer 2

Angular有一些指令，可让您轻松收听关键事件。我认为ng-keyup应该适合你。

您需要将ng-keyup指令添加到body标签，以确保您在最高级别侦听关键事件。您还必须将ng-app和ng-controller指令移动到body标记，以便为关键事件声明的函数位于正确的范围内。

所以改变

<body bgcolor="#151B54">
    <div ng-app="myApp" ng-controller="myCtrl">

到

<body bgcolor="#151B54" ng-app="myApp" ng-controller="myCtrl" ng-keyup="handleKeyup($event)">
    <div>

然后，您将能够对控制器中的这些事件执行某些操作。

然后将此添加到您的控制器：

$scope.handleKeyup = function (e) {
    switch (e.which) {
        case 37:
            $scope.goLeft();
            break;
        case 38:
            $scope.goUp();
            break;
        case 39:
            $scope.goRight();
            break;
        case 40:
            $scope.goDown();
            break;
    }
};

用键移动div

2 个答案: