小游戏键盘操作

来源：互联网发布：淘宝修改评论链接编辑：程序博客网时间：2024/05/18 20:11
知识点：
1，键盘window.event事件的接收,IE和firefox
2，判断碰撞的小函数
3，代码参考韩老师
4，index.html一个文件，2张图片
5，div属性，要设置成position:absolute
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">        function move(obj){            var wugui_height=67;                var wugui_width=94;                var tuzi_height=73;                var tuzi_width=76;                var wugui=document.getElementById('wugui');                var tuzi=document.getElementById('tuzi');                if(window.event|| arguments.callee.caller.arguments[0]){                    key=obj.keyCode;                    }            //得到乌龟当前的top和left                var wugui_top=wugui.style.top;                var wugui_left=wugui.style.left;                //处理px后缀            wugui_top=parseInt(wugui_top.substring(0,wugui_top.indexOf("p")));            wugui_left=parseInt(wugui_left.substring(0,wugui_left.indexOf("p")));            //判断用户点击了哪个键            if(obj.value=="向下走"||key==83){                wugui.style.top=(wugui_top+10)+"px";                wugui_top=wugui_top+10;            }else if(obj.value=="向右走"||key==68){                wugui.style.left=(wugui_left+10)+"px";                wugui_left=wugui_left+10;            }else if(obj.value=="向左走"||key==65){                wugui.style.left=(wugui_left-10)+"px";                wugui_left=wugui_left-10;            }else if(obj.value=="向上走"||key==87){                wugui.style.top=(wugui_top-10)+"px";                wugui_top=wugui_top-10;            }        //下面判断乌龟和兔子 碰到,应该可以做成一个函数        var tuzi_top=tuzi.style.top;        var tuzi_left=tuzi.style.left;            tuzi_top=parseInt(tuzi_top.substring(0,tuzi_top.indexOf("p")));            tuzi_left=parseInt(tuzi_left.substring(0,tuzi_left.indexOf("p")));            y=Math.abs(wugui_top-tuzi_top);            x=Math.abs(wugui_left-tuzi_left);        //方法            //判断条件            xx=0;            yy=0;            //纵向判断            if(wugui_top<tuzi_top){                if(y<wugui_height){                    yy=1;                }            }else{                if(y<tuzi_height){                    yy=1;                }            }            //横向判断            if(wugui_left<tuzi_left){                if(x<wugui_width){                    xx=1;                }            }else{                if(x<tuzi_width){                    xx=1;                    }            }    if(xx==1&&yy==1){        window.alert("抓到了");        wugui.style.top=120+"px";        wugui.style.left=100+"px";    }}        </script>    </head>    <body onkeydown="return move(event)">    <!--        作者：offline        时间：2016-10-25        描述：//把乌龟放在这个div    -->    <div id="wugui" style="position:absolute ;left:100px;top:120px;" >        <img src="wugui.png" border="1" alt="乌龟" width="94" height="67"/>    </div>        <div id="tuzi" style="position:absolute ;left:300px;top:200px;" >        <img src="tuzi.png" border="1" alt="兔子" width="76" height="73"/>    </div>    <table border="1" cellspacing="0" cellpadding="10" width="300">        <tr><th> </th><th><input type="button" value="向上走" onclick="move(this)" /></th><th> </th></tr>        <tr><td><input type="button" value="向左走" onclick="move(this)" /></td>            <td><input type="button" value="向下走" onclick="move(this)" /></td>            <td><input type="button" value="向右走" onclick="move(this)" /></td></tr>    </table>    </body></html>
0 0