Move div with keys

Question

I have to create a little program in AngularJS for my school, but I'm not very advanced yet, because I lack basic training.

I tried to make a texture move using arrow keys, but I didn't have any success finding a usable answer on the Internet.

I'd be happy if anyone would help me.

Here is the code I use for now to move it, if that helps:

<!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>

There is already a similar question: http://stackoverflow.com/questions/7782266/jquery-move-div-with-arrow-keys — Thomas James, Sep 27 '16 at 11:07
You probably want to look at this question re: angular keypress events.http://stackoverflow.com/questions/17470790/how-to-use-a-keypress-event-in-angularjs — dwjohnston, Sep 27 '16 at 11:21

score 0 · Answer 1 · answered Sep 27 '16 at 11:42

To make a texture move using arrow keys. Try this

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>

Brett Henderson · Answer 2 · 2016-09-27T12:13:41.810

Angular has directives that will allow you to easily listen for key events. I think ng-keyup should work fine for you.

You will need to add the ng-keyup directive to the body tag to make sure you listen for key events at the highest level. You will also have to move your ng-app and ng-controller directives to the body tag too so that the function that you declare for your key events is in the correct scope.

So change

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

to

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

You will then be able to do something with those events in your controller.

So add this to your controller:

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

Move div with keys

2 Answers2