JavaScript-用键盘控制动画

最新推荐文章于 2022-11-10 12:32:20 发布

梧桐下的四叶草

最新推荐文章于 2022-11-10 12:32:20 发布

阅读量561

点赞数

本文链接：https://blog.csdn.net/zsc2014030403015/article/details/51626678

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

（一）添加keydown事件

<html>
    <head>
    <title>Keyboard input</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
        <script>
        //创建一个keyNames对象
           var keyNames = {
            32 : "space",
            37 : "left",
            38 : "up",
            39 : "right",
            40 : "down"
           };
           //添加响应按键事件
           $("body").keydown(function(event){
            //在控制台打印答案
            console.log(keyNames[event.keyCode]);
           });
        </script>
    </body>
</html>

（二）用键盘移动一个球

<html>
    <head>
    <title>Keyboard input</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
        <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var width = canvas.width;
        var height = canvas.height;
        var circle = function(x,y,radius,fillCircle){
            ctx.beginPath();
            ctx.arc(x,y,radius,0,Math.PI*2,false);
            if(fillCircle){
                ctx.fill();
            } else {
                ctx.stroke();
            }
        };
        //创建Ball的构造方法
        var Ball = function(){
            this.x = width/2;
            this.y = height/2;
            this.xSpeed = 5;
            this.ySpeed = 0;
        };

        //定义移动函数
        Ball.prototype.move = function(){
            this.x += this.xSpeed;
            this.y += this.ySpeed;
            //移动到边界时从另外一边出来
            if(this.x<0){
                this.x = width;
            }else if(this.x>width){
                this.x = 0;
            }else if(this.y<0){
                this.y = height;
            }else if(this.y>height){
                this.y = 0;
            }
        };

        //定义draw方法
        Ball.prototype.draw = function(){
            circle(this.x,this.y,10,true);
        };

        //创建setDirection方法
        Ball.prototype.setDirection = function(direction){
            if(direction === "up"){
                this.xSpeed = 0;
                this.ySpeed = -5;
            }else if(direction === "down"){
                this.xSpeed =0;
                this.ySpeed = 5;
            }else if(direction === "left"){
                this.xSpeed = -5;
                this.ySpeed = 0;
            }else if(direction === "right"){
                this.xSpeed = 5;
                this.ySpeed = 0;
            }else if(direction === "stop"){
                this.xSpeed = 0;
                this.ySpeed = 0;
            }
        };
        //创建一个Ball对象
        var ball = new Ball();
        //创建一个keyNames对象
           var keyNames = {
            32 : "stop",
            37 : "left",
            38 : "up",
            39 : "right",
            40 : "down"
           };
           //添加响应按键事件
           $("body").keydown(function(event){
            var direction = keyNames[event.keyCode];
            ball.setDirection(direction);
           });
           //实现球的动画
           setInterval(function(){
            ctx.clearRect(0,0,width,height);
            ball.draw();
            ball.move();
            ctx.strokeRect(0,0,width,height);
           },30);
        </script>
    </body>
</html>

梧桐下的四叶草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript-用键盘控制动画

（一）添加keydown事件 Keyboard input //创建一个keyNames对象 var keyNames = { 32 : "space", 37 : "left", 38 :
复制链接

扫一扫