小游戏键盘操作

最新推荐文章于 2021-07-16 11:54:44 发布

D调的绿叶

最新推荐文章于 2021-07-16 11:54:44 发布

阅读量1k

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/vipzjh/article/details/52922842

版权

javascript 专栏收录该内容

4 篇文章

订阅专栏

这篇博客主要介绍了如何使用HTML5实现小游戏的键盘操作，包括在不同浏览器中捕获window.event键盘事件，编写判断碰撞的函数，并参考了韩老师的代码。整个游戏只需要一个index.html文件和两张图片，通过设置div的position属性为absolute来布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

知识点：
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>