小猪佩奇之小鸡下蛋JS小游戏

2020年春节正值冠状病毒施虐,在家闲来无事,通过JS实现了一个小鸡下蛋的小游戏,按下任何按键小鸡都会下一个蛋,小鸡自动移动一个位置。上js程序:


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta  http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>Title</title>
        <audio src="F:/chichk.mp3"  autoplay="autoplay"> </audio>
    </head>
    <body>
        <center id="myScan">
            <img id="img_chick" src="F:/chick.png" style="width: 150px;height: 200px;position: absolute;left: 10px;top: 10px">
            <img id="img_egg" src="F:/egg1.jpg" style="width: 80px;height: 100px;position: absolute;left: 40px;top: 40px">
            <script type="text/javascript"      src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
            <script type="text/javascript">
            
            var tmpEggTop;
            var tmpEggLeft;
            $(document).ready(
               function(){
                   debugger;
                document.onkeydown = function(){
                var oEvent = window.event;
                var obj_chick = document.getElementById('img_chick');
                obj_chick.left += 100;

                var tooWidth = 0, tooTop = 0;
                if(obj_chick.left > document.documentElement.clientWidth )
                {
                    obj_chick.left = 10;
                    obj_chick.top += 100;
                    tooWidth = 1;
                }

                if(obj_chick.top > document.documentElement.clientHeight)
                {
                    obj_chick.top = 10;
                    tooTop = 1;
                }
                obj_chick.style.left = obj_chick.left + "px", obj_chick.style.top = obj_chick.top + "px";

                var myParent=document.getElementById('myScan');

                var myImage = document.createElement("img");
                 myImage.src = 'F:/egg1.jpg';
                 myImage.style.position = "absolute";

                tmpEggLeft +=80;
                if(tooWidth == 1)
                {
                    tmpEggLeft = 0;
                    tmpEggTop = obj_chick.top;
                    tmpEggTop += 200;
                }

                if(tooTop == 1)
                {
                    tmpEggTop.top = 10;
                }
                 myImage.style.top = tmpEggTop + "px" ;
                 myImage.style.left = tmpEggLeft + "px";
                 myImage.style.width = "80px";
                 myImage.style.height = "100px";
                 myParent.appendChild(myImage);
              }
            });
            </script>
            
            <script type="text/javascript">
                var obj = document.getElementById('img_chick');
                obj.style.zIndex = 1;
                obj.left = 10;
                obj.top = 10;
                var obj_egg = document.getElementById('img_egg');
                obj_egg.style.display="none";
                tmpEggTop = 100;
                tmpEggLeft = 0;
            </script>
    </body>
</html>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值