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

最新推荐文章于 2021-10-11 16:44:24 发布

archerm

最新推荐文章于 2021-10-11 16:44:24 发布

阅读量3.2k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/archerm/article/details/104111291

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

archerm

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
小猪佩奇之小鸡下蛋JS小游戏

2020年春节正值冠状病毒施虐，在家闲来无事，通过JS实现了一个小鸡下蛋的小游戏，按下任何按键小鸡都会下一个蛋，小鸡自动移动一个位置。上js程序：<!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html...
复制链接

扫一扫

专栏目录