JavaScript-用键盘控制动画

来源：互联网发布：放置类挂机游戏源码编辑：程序博客网时间：2024/06/07 05:31

（一）添加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