js鼠标键盘事件的使用

最新推荐文章于 2022-08-01 21:28:46 发布

你的指尖-有改变世界的力量

最新推荐文章于 2022-08-01 21:28:46 发布

阅读量491

点赞数

分类专栏：大前端文章标签： javascript鼠标事件 javascript键盘事件 javascript鼠标键盘事件 JavaScript新手学习 js学习

本文链接：https://blog.csdn.net/xiaoLong2345/article/details/53038543

版权

大前端专栏收录该内容

17 篇文章 1 订阅

订阅专栏

这段时间刚刚学习javascript,学习到鼠标和键盘事件的使用，就自己写了一个小游戏来玩玩，当然这个游戏还有很多bug，做工比较粗糙，但也是让我慢慢学习下去的一个鼓励与支持。

如图所示：

思想：就是小灰追小红，点击开始，小红随机奔跑，小灰去追，追上一次加1分，可以用鼠标点击向上、向下、向左、向右追赶，也可以用键盘的上下左右键进行追赶。

当然这个游戏很简单，或者说不是个游戏，我本身也是一个新手，刚刚开始学习，发表也是为了大家共勉，好好奋斗，大神别笑。有很多的问题，如果有时间我也会继续完善的。哈哈。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .box1{
            width: 600px;
            height: 400px;
            margin: 100px auto 0 auto;
            background-color: #a6ff7f;
            position: relative;
            overflow: hidden;
        }
        .button{
            width: 600px;
            height: 100px;
            margin: 0 auto;
        }
        .button input{
            width: 93px;
            height: 40px;
        }
        #people{
            position: absolute;
            left: 0;
            top:0;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        #rabbit{
            left: 0;
            top:0;
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #cccccc;
        }
        #box2{
            position: absolute;
            width: 200px;
            height: 400px;
            left: 1000px;
            top: 100px;
            background-color: #a6ff7f;
            line-height: 28px;
        }
    </style>
</head>
<body>

    <div class="box1">
        <div id="people">

        </div>
        <div id="rabbit">

        </div>
    </div>
    <div id="box2"></div>
    <div class="button">
        <input type="button" value="向上" οnclick="count(1)">
        <input type="button" value="向下" οnclick="count(2)">
        <input type="button" value="向左" οnclick="count(3)">
        <input type="button" value="向右" οnclick="count(4)">
        <input type="button" value="开始" οnclick="begin_1()">
        <input type="button" value="暂停" οnclick="suspend_1()">
    </div>
</body>
<script type="text/javascript">
    var l=document.getElementById("rabbit").style.left;
    var t=document.getElementById("rabbit").style.top;
    l=0;
    t=0;
    var score_1=0;
    var begin=true;
        function people_random(){
            document.getElementById("people").style.left=parseInt(Math.random()*11)*50+"px";
            document.getElementById("people").style.top=parseInt(Math.random()*7)*50+"px";
        }

    function count(test){
        if(test==1)
        {
            if(t==0){

            }
            else
            t=t-50;
        }
        if(test==2)
        {
            if(t==350){}
            else
             t=t+50;
        }
        if(test==3)
        {
            if(l==0){}
            else
            l=l-50;
        }
        if(test==4)
        {
            if(l==550){}
            else
            l=l+50
        }
        document.getElementById("rabbit").style.top=t+"px";
        document.getElementById("rabbit").style.left=l+"px";
        if(document.getElementById("people").style.top==document.getElementById("rabbit").style.top&&document.getElementById("people").style.left==document.getElementById("rabbit").style.left)
        {
            score_1++;
//            alert(score_1);
            document.getElementById("box2").innerHTML="当前成绩为:"+score_1+"分";
        }

    }
    document.οnkeydοwn=function(){
//        alert(window.event.keyCode);
        if(window.event.keyCode==38)
        {
            if(t==0){

            }
            else
                t=t-50;
        }
        if(window.event.keyCode==40)
        {
            if(t==350){}
            else
                t=t+50;
        }
        if(window.event.keyCode==37)
        {
            if(l==0){}
            else
                l=l-50;
        }
        if(window.event.keyCode==39)
        {
            if(l==550){}
            else
                l=l+50
        }
        document.getElementById("rabbit").style.top=t+"px";
        document.getElementById("rabbit").style.left=l+"px";
        if(document.getElementById("people").style.top==document.getElementById("rabbit").style.top&&document.getElementById("people").style.left==document.getElementById("rabbit").style.left)
        {
            score_1++;
//            alert(score_1);
            document.getElementById("box2").innerHTML="当前成绩为:"+score_1+"分";
        }

    }
    function begin_1(){
            if(begin==true){
                setInterval(people_random,2000);
                begin=false;
            }
            else {
            }
        }
    function suspend_1(){
        alert("休息一下，暂停游戏");
    }

</script>
</html>