JS代码练习之键盘事件

最新推荐文章于 2024-07-30 10:56:44 发布

smn13524

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量416

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/smn13524/article/details/75119638

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天看了网上的一个教学视频，感觉还不错，又把之前学的js基础复习了一点（已经半学期没碰了）。
下面附上代码吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件联系</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html{
            height: 100%;
        }
        body{
            height: 100%;
            background: url('images/bg.jpg');
            background-size: 100% 100%;
        }
        #site{
            position: relative;
            height: 100%;
        }
        img{
            position: absolute;
            width: 200px;
            height: 300px;
            bottom: 50px;
        }

    </style>
</head>
<body>
    <div id="site">
        <img src="images/YAGAMI/stand.gif" id="MC">
    </div>  
</body>
    <script type="text/javascript">
    var imgObj=document.getElementById("MC");
    var left=0;
    var Game=new game(imgObj);
    document.onkeydown=key;
    function key(e){
        var e=e||window.event;
        Game.keydown(e.keyCode);
        this.onkeyup=function(){
            Game.keyup();
            this.onkeydown=key;
        }
        document.onkeydown=null;
    }
    function game(obj){
        this.left=0;
        this.timer=null;
        this.active={
            "39":function(){
                obj.src="images/YAGAMI/advance.gif";
                this.timer=setInterval(function(){
                    this.left+=5;
                    obj.style.left=this.left + "px";
                }.bind(this),1000/60);
                //bind()方法低版本浏览器不支持。
            },
            "37":function(){
                obj.src="images/YAGAMI/retreat.gif";
                this.timer=setInterval(function(){
                    this.left-=5;
                    obj.style.left=this.left+"px";
                }.bind(this),1000/60);
            },
            "40":function(){
                obj.src="images/YAGAMI/7490881c38cfba5ef724e4ba.gif";
            },
            "stop":function(){
                obj.src="images/YAGAMI/stand.gif";
            }
        };
    }
    game.prototype.keydown=function(keyCode){
        for(var key in this.active){
            if(key==keyCode){
                this.active[key].call(this);
            }
        }
    }
    game.prototype.keyup=function(){
        clearInterval(this.timer);
        this.active.stop();
    }
    </script>
</html>

代码中所用到的图片有

smn13524

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS代码练习之键盘事件

今天看了网上的一个教学视频，感觉还不错，又把之前学的js基础复习了一点（已经半学期没碰了）。下面附上代码吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>键盘事件联系</title> <style> *{ padding: 0;
复制链接

扫一扫

专栏目录