js鼠标键盘事件的使用

来源：互联网发布：qq群排名优化软件编辑：程序博客网时间：2024/05/20 12:23

这段时间刚刚学习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="向上" onclick="count(1)">        <input type="button" value="向下" onclick="count(2)">        <input type="button" value="向左" onclick="count(3)">        <input type="button" value="向右" onclick="count(4)">        <input type="button" value="开始" onclick="begin_1()">        <input type="button" value="暂停" onclick="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.onkeydown=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>

0 0