春节正值冠状病毒施虐，在家闲来无事，通过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="/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>
如果觉得《小猪佩奇之小鸡下蛋JS小游戏》对你有帮助，请点赞、收藏，并留下你的观点哦！
