小游戏键盘操作

知识点:
1,键盘window.event事件的接收,IE和firefox
2,判断碰撞的小函数
3,代码参考韩老师
4,index.html一个文件,2张图片
5,div属性,要设置成position:absolute


<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_topif(y1;
                }

            }else{
                if(y1;
                }
            }
            //横向判断
            if(wugui_leftif(x1;
                }
            }else{
                if(x1;
                    }
            }
    if(xx==1&&yy==1){
        window.alert("抓到了");
        wugui.style.top=120+"px";
        wugui.style.left=100+"px";

    }
}
        script>
    head>
    <body onkeydown="return move(event)">

    

    <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>

你可能感兴趣的:(javascript)