乌龟抓鸡

于 2019-07-22 15:08:30 发布
阅读量281 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43416343/article/details/96859717
版权

乌龟抓鸡游戏

//html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>乌龟抓鸡游戏</title/>
<link rel = "stylesheet" style = "text/css" href = "game.css"/>
<meta charset="UTF-8">
<script>
	  function $(obj){
	  var wugui = document.getElementById(obj);
	      return wugui;
	  }
	  
	 window.onload = function () {
            document.onkeydown = function (event) {
                event = event || window.event;/*||为或语句，当IE不能识别event时候，就执行window.event 赋值*/
                console.log(event.keyCode);
				$("eat").style.opacity = 0.0;
		        $("suc").style.opacity = 0.0;
		        $("chick").style.opacity = 1.0;
		        $("chick1").style.opacity = 1.0;
                switch (event.keyCode){/*keyCode:字母和数字键的键码值*/
                    /*37、38、39、40分别对应左上右下*/
                    case 37:
                        $("wugui").src = "2.png"; 
			            if($('wugui').style.left =="60px"){
			              //window.alert("已经到头了");
					      break;
			            }
			            var left = $('wugui').style.left;
			               left =parseInt(left.substr(0,left.length - 2));
					       $('wugui').style.left = (left -10) + "px";
			            break;
                    case 38:
					     if($('wugui').style.top == "180px"){
					         //window.alert("已经到头了");
						     break;
					     }
			             var top = $('wugui').style.top;
			             top =parseInt(top.substr(0,top.length - 2));
					     $('wugui').style.top = (top -10) + "px";
                         break;
                    case 39:
                        $("wugui").src = "1.png";
			            if($('wugui').style.left == "1100px"){
					      //window.alert("已经到头了");
						   break;
					    }
					    var right = $('wugui').style.left;
			            right =parseInt(right.substr(0,right.length - 2));
					    $('wugui').style.left = (right +10) + "px";
                        break;
                    case 40:
                        if($('wugui').style.top =="440px"){
			                //window.alert("已经到头了");
					      break;
			            }
			            var down = $('wugui').style.top;
			            down =parseInt(down.substr(0,down.length - 2));
					    $('wugui').style.top = (down +10) + "px";
                         break;
			        case 17:
					    //alert("你好");
					    attack();
						break;
                }
            }
        }
	  var flag = 0;
	  function walk(){
	       $("run").style.opacity = 0.0;
	       var top = $("chick").style.top;
		   var left = $("chick").style.left;
		   
		   if(flag == 0 && $("chick").style.top < "220px"&&$("chick").style.left < "800px"){
		       flag = 1;
			   $("chick").src = "5.png";
		       //window.alert("小鸡到尽头");
		   }else if(flag == 0){
		       flag = 2;
		       top =parseInt(top.substr(0,top.length - 2));
			   $("chick").style.top = (top -10) + "px";
			   left =parseInt(left.substr(0,left.length - 2));
			   $("chick").style.left = (left -25) + "px";
		   }
		   
		   if(flag == 1){
		      if($("chick").style.top > "300px" && $("chick").style.left > "1100px"){
		          flag = 0;
				  $("chick").src = "6.png"; 
		      }else{
			      top=parseInt(top.substr(0,top.length - 2));
			      $("chick").style.top = (top +10) + "px";
		          left =parseInt(left.substr(0,left.length - 2));
			      $("chick").style.left = (left +25) + "px";
		      }
		   }
		   if(flag == 2){
		      flag = 0;
		   }
	  }
	  
	  var flag3 = 0;
	  function walk1(){
	       $("run").style.opacity = 0.0;
	       var top = $("chick1").style.top;
		   var left = $("chick1").style.left;
		   
		   if(flag3 == 0 && $("chick1").style.top < "220px"&&$("chick1").style.left < "800px"){
		       flag3 = 1;
			   $("chick1").src = "5.png"; 
		       //window.alert("小鸡到尽头");
		   }else if(flag3 == 0){
		       flag3 = 2;
		       top =parseInt(top.substr(0,top.length - 2));
			   $("chick1").style.top = (top -5) + "px";
			   left =parseInt(left.substr(0,left.length - 2));
			   $("chick1").style.left = (left -10) + "px";
		   }
		   
		   if(flag3 == 1){
		      if($("chick1").style.top > "300px" && $("chick1").style.left > "1100px"){
		          flag3 = 0;
				  $("chick1").src = "6.png"; 
		      }else{
			      top=parseInt(top.substr(0,top.length - 2));
			      $("chick1").style.top = (top +5) + "px";
		          left =parseInt(left.substr(0,left.length - 2));
			      $("chick1").style.left = (left +10) + "px";
		      }
		   }
		   if(flag3 == 2){
		      flag3 = 0;
		   }
	  }
      setInterval("walk()",1000);
	  setInterval("walk1()",2000);
      function move(num){
	      $("eat").style.opacity = 0.0;
		  $("suc").style.opacity = 0.0;
		  $("chick").style.opacity = 1.0;
		  $("chick1").style.opacity = 1.0;
	      switch(num){
		      case 0:if($('wugui').style.top == "180px"){
					    //window.alert("已经到头了");
						break;
					 }
			         var top = $('wugui').style.top;
			         top =parseInt(top.substr(0,top.length - 2));
					 $('wugui').style.top = (top -10) + "px";
			         break;
			  case 1:$("wugui").src = "1.png";
			         if($('wugui').style.left == "1100px"){
					    //window.alert("已经到头了");
						break;
					 }
					 var right = $('wugui').style.left;
			         right =parseInt(right.substr(0,right.length - 2));
					 $('wugui').style.left = (right +10) + "px";
					 break;
			  case 2:if($('wugui').style.top =="440px"){
			           //window.alert("已经到头了");
					   break;
			         }
			         var down = $('wugui').style.top;
			         down =parseInt(down.substr(0,down.length - 2));
					 $('wugui').style.top = (down +10) + "px";
			         break;
			  case 3:$("wugui").src = "2.png"; 
			         if($('wugui').style.left =="60px"){
			           //window.alert("已经到头了");
					   break;
			         }
			         var left = $('wugui').style.left;
			         left =parseInt(left.substr(0,left.length - 2));
					 $('wugui').style.left = (left -10) + "px";
			         break;
		  }
	  }
	  
	  var flag1 = 0;
	  var count1 = 0;
	  function zidan(){
	    if(flag1 == 1){
		   var top1 = $("chick").style.top;
		   var left1 = $("chick").style.left;
		   top1=parseInt(top1.substr(0,top1.length - 2));
		   left1 =parseInt(left1.substr(0,left1.length - 2));
		   
		   var top = $("zidan").style.top;
		   top=parseInt(top.substr(0,top.length - 2));
		   var left = $("zidan").style.left;
		   left =parseInt(left.substr(0,left.length - 2));
		   
		   var top2 = $("wugui").style.top;
		   var left2 = $("wugui").style.left;
		   top2=parseInt(top2.substr(0,top2.length - 2));
		   left2 =parseInt(left2.substr(0,left2.length - 2));
		   //if($("wugui").src.endsWith("1.png")){
		      if(((top > top1) && (top<(top1 + 60)))&& ((left >left1) && (left <(left1 + 100)))){
		         count1 ++;
		         $("zidan").style.opacity=0.0;
			     flag1 =0;
			     $("run").style.top = (top1 - 60) + "px";
			     $("run").style.left = (left - 15) + "px";
			     $("run").style.opacity = 1.0;
			     // window.alert("大鸡成功");
			     if(count1 == 5){
			       $("suc").style.opacity = 0.0;
			       $("eat").style.top = (top2 - 60) + "px";
			       $("eat").style.left = (left2 + 15) + "px";
			       $("eat").style.opacity = 1.0;
			       $("chick").style.opacity = 0.0;
			       count1 = 0;
			    }else{
			       $("suc").style.top = (top2 - 60) + "px";
			       $("suc").style.left = (left2 + 15) + "px";
			       $("suc").style.opacity = 1.0;
			    }
		   }else{
		     //window.alert($("zidan").style.left);
		     $("zidan").style.left = (left+ 40) + "px";
			// window.alert($("zidan").style.left);
			 if(left > 1100){
			    $("zidan").style.opacity=0.0;
			    flag1 =0;
			 }
		   }
		  /* }else if($("wugui").src.endsWith("2.png")){
		      //window.alert("进");
		      if(((top > top1) && (top<(top1 + 60)))&& ((left >left1) && (left <(left1 + 100)))){
			     //window.alert("入1");
		         count1 ++;
		         $("zidan").style.opacity=0.0;
			     flag1 =0;
			     $("run").style.top = (top1 - 60) + "px";
			     $("run").style.left = (left - 15) + "px";
			     $("run").style.opacity = 1.0;
			     // window.alert("大鸡成功");
			     if(count1 == 5){
			       $("suc").style.opacity = 0.0;
			       $("eat").style.top = (top2 - 60) + "px";
			       $("eat").style.left = (left2 + 15) + "px";
			       $("eat").style.opacity = 1.0;
			       $("chick").style.opacity = 0.0;
			       count1 = 0;
			     }else{
			       $("suc").style.top = (top2 - 60) + "px";
			       $("suc").style.left = (left2 + 15) + "px";
			       $("suc").style.opacity = 1.0;
			    }
		      }else{
		         $("zidan").style.left = (left - 40) + "px";
			     if(left <100){
			         $("zidan").style.opacity=0.0;
			         flag1 =0;
			     }
		      }
		   }*/
		   
	    }
	  }
	  
	  var flag2 = 0;
	  var count2 =0;
	  function zidan1(){
	    //$("suc").style.opacity = 0.0;
		//$("eat").style.opacity = 0.0;
	    if(flag2 == 1){
		   var top1 = $("chick1").style.top;
		   var left1 = $("chick1").style.left;
		   top1=parseInt(top1.substr(0,top1.length - 2));
		   left1 =parseInt(left1.substr(0,left1.length - 2));
		   
		   var top = $("zidan").style.top;
		   top=parseInt(top.substr(0,top.length - 2));
		   var left = $("zidan").style.left;
		   left =parseInt(left.substr(0,left.length - 2));
		   
		   var top2 = $("wugui").style.top;
		   var left2 = $("wugui").style.left;
		   top2=parseInt(top2.substr(0,top2.length - 2));
		   left2 =parseInt(left2.substr(0,left2.length - 2));
		   
		   if(((top > top1) && (top<(top1 + 60)))&& ((left >left1) && (left <(left1 + 100)))){
		      count2 ++;
		      $("zidan").style.opacity=0.0;
			  flag2 =0;
			  $("run").style.top = (top1 - 60) + "px";
			  $("run").style.left = (left - 15) + "px";
			  $("run").style.opacity = 1.0;
			  //window.alert("小鸡成功");
			  if(count2 == 5){
			     $("suc").style.opacity = 0.0;
			     $("eat").style.top = (top2 - 60) + "px";
			     $("eat").style.left = (left2 + 15) + "px";
			     $("eat").style.opacity = 1.0;
				 $("chick1").style.opacity = 0.0;
			     count2 = 0;
			 }else{
			    $("suc").style.top = (top2 - 60) + "px";
			    $("suc").style.left = (left2 + 15) + "px";
			    $("suc").style.opacity = 1.0;
			 }
		   }else{
		     $("zidan").style.left = (left+ 40) + "px";
			 if(left > 1100){
			    $("zidan").style.opacity=0.0;
			    flag2 =0;
			 }
		   }
	    }
	  }
	  
	  function attack(){
	     var top = $("wugui").style.top;
		 var left = $("wugui").style.left;
		 top =parseInt(top.substr(0,top.length - 2));
		 left =parseInt(left.substr(0,left.length - 2));
		 var top1 = 0;
		 var left1 = 0;
		 //if($("wugui").src.endsWith("1.png")){
		   top1 = (top +15) + "px";
		   left1 = (left + 140) + "px";
		/* }else{
		   $("zidan").src = "z1.png";
		   top1 = (top +15) + "px";
		   left1 = (left -40) + "px";
		 }*/
		 $("zidan").style.top = top1;
		 $("zidan").style.left = left1;
		 $("zidan").style.opacity=1.0;
		 flag1 =1;
		 flag2 = 1;
	  }
	  
	  setInterval("zidan()",50);
	  setInterval("zidan1()",50);
	  
</script>
</head>
<body>
<div class = "bg">
<span class = "gameName">　　　　　　　乌龟抓鸡　　</span><a href = "rule.html"　target = "_blank">游戏规则说明</a><br/>
<img src = "4.jpg" class = "img1"/>
<img id = "wugui" src = "1.png" class = "img2" style = "left:60px; top:440px;"/>
<img id = "chick" src = "6.png" class = "img3" style = "opacity:1.0;left:1100px;top:300px;"/>
<img id = "chick1" src = "6.png" class = "img3" style = "opacity:1.0;left:900px;top:400px;"/>
<img src = "8.png" class = "img7"/>
<img src = "7.png" class = "img4"/>
<img id = "zidan" src = "z2.png" class = "img5" style = "left:200px; top:420px; opacity:0.0;"/>
</div>
<div class = "controlcenterdiv">
<table class = "style1">
<tr><td></td><td><input class = "input0" type = "button" value ="" onclick = "move(0)"/></td><td></td></tr>
<tr><td><input class = "input3" type = "button" value = "" onclick = "move(3)"/></td><td><input class = "input" type = "button" value = "乌龟攻击" onclick = "attack()"/></td><td><input class = "input1" type = "button" value = "" onclick = "move(1)"/></td></tr>
<tr><td></td><td><input class = "input2" type = "button" value = "" onclick = "move(2)"/></td><td></td></tr>
</table>
</div>
<img id = "eat" src = "bg3.png" class = "img8" style = "left:200px;top:100px;opacity:0.0;"/>
<img id = "run" src = "bg4.png" class = "img6" style = "opacity:0.0;left:300px;top:100px;"/>
<img id = "suc" src = "bg2.png" class = "img6" style = "opacity:0.0;left:400px;top:100px;"/>
</body>
</html>

//css文件
.gameName{
   font-family:"华文新魏";
   font-size:60px;
   font-weight:30px;
   //color:orange;
   left:30px;
}

.bg{
    margin-top:20px;
    margin-left:50px;
	width:1200px;
	height:500px;
	//border:1px solid red;
}

.img1{
    width:1200px;
	height:430px;
	//border:1px solid blue;
}

.controlcenterdiv{
	width:205px;
	margin-left:500px;
	//border:1px solid black;
}

.style1{
	// border:1px solid green;
     width:200px;
	 height:120px;
	 text-align:center;
}

.input{
    font-family:"华文新魏";
    font-size:14px;
	width:65px;
	height:28px;
	
}
.input0{
    background-image:url(a0.png);
	width:65px;
	height:28px;
	background-size:40% 100%
}
.input1{
    background-image:url(a1.png);
	width:65px;
	height:28px;
	background-size:80% 50%
}
.input2{
    background-image:url(a2.png);
	width:65px;
	height:28px;
	background-size:40% 100%
}
.input3{
    background-image:url(a3.png);
	width:65px;
	height:28px;
	background-size:100% 50%
}

.img2{
    width:150px;
	height:80px;
	position:absolute;
}

.img3{
    width:100px;
	height:60px;
	position:absolute;
	//border:1px solid black;
}

.img4{
    width:150px;
	height:80px;
	position:absolute;
	left:1010px;
	top:200px;
}

.img5{
    width:30px;
	height:8px;
	position:absolute;
	//opacity:1.0;
	//border:1px solid black;
}

.img7{
    width:80px;
	height:50px;
	position:absolute;
	left:1180px;
	top:220px;
}

.img8{
   position:absolute;
   width:200px;
   height:200px;
}

.img6{
   position:absolute;
   width:200px;
   height:130px;
}

a:link{
   color:red;
   font-size:24px;
   font-family:"华文新魏";    /*注意与html文件中的区别，<font face = "华文新魏">...</font>*/
   text-decoration:none;
}
a:hover{
    text-decoration:underline;
	font-size:40px;
	font-family:"华文新魏";
}

运行结果：

在这里插入图片描述
在这里插入图片描述

（纯属练习，存在不足。）
wengwenxuan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
抓鸡端口扫描
11-25
已经去掉后门！ 抓鸡端口扫描 抓鸡 扫描端口 快速抓鸡
搜集大乌龟,诌老大的sql经典
04-19
搜集的csdn论坛mysql版的帖子精华
js_乌龟抓鸡游戏
Gavin
03-22 2361
乌龟可以用键盘控制上下移动，而小鸡在自己的位置 上不停地上下移动，乌龟可以通过空格键发子弹·~打中小鸡后小鸡的血量会减少，但血量为0时，小鸡会被打死，这时提示是否重新开始！ 源码： 乌龟抓鸡 <!-- function $(id){ return document.getElementById(id); } //乌龟运动 funct
韩顺平 javascript教学视频_学习笔记24_dom编程开山篇_dom编程实例（乌龟抓鸡）
郁孤台之魂
02-22 2243
dom编程开山篇 学习目的 明确dom编程的重要性初步认识dom编程 dom 的必要性：实际上 js 更重要的作用是可以让用户对网页元素进行交互操作，这才是学习 js 的精华之所在     看乌龟抓鸡这个案例：
乌龟捉鸡
csdt_csdt的专栏
01-22 624
//响应用户点击按钮，或者是按下键盘 function move(eobj){ //得到乌龟 var wugui_height = 56; var wugui_width = 79; //得到公鸡 var cock_height = 61; var cock_width = 64; var wugui = document.g
又是一个超简单的游戏——乌龟抓鸡
weixin_34391445的博客
04-15 157
一个无聊透顶的乌龟抓鸡的游戏。 准备素材(两张图片)： 游戏代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>乌龟抓鸡</title> <script type="...
例子：韩顺平JavaScript----JS乌龟抓小鸡游戏
weixin_30361641的博客
09-17 118
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>乌龟抓小鸡</title> 6 </head> 7 <body onkeydown="return mov...
4899扫爆与教程.rar
08-14
适合小白抓鸡的一款工具和教程 内附详细教程视频 默认解压密码是123456
3389全自动扫鸡
07-20
全自动扫鸡，方便快捷。适用于抓鸡初学者，3分不贵，请大家支持
minepy-1.2.6-cp310-cp310-win_amd64.zip
06-17
使用说明：whl是python离线安装包，使用时候只需要pip install x.whl其中x.whl为自己whl路径名
恒色风格-中医简历模板.zip
06-17
在求职的征途上，一份出色的简历是你通往梦想职位的敲门砖。我们精心准备了一系列面试求职简历模板，旨在帮助你以最佳形象站在潜在雇主面前。这些简历模板不仅设计精美，而且注重内容的清晰呈现，使招聘经理一目了然地看到你的能力和经验。 我们的模板集合了多种风格与布局，无论你是应届毕业生、职场跳槽者还是行业专家，都能在这里找到适合你职业形象的简历设计。每一个模板都经过精心设计，确保你的简历在众多求职者中脱颖而出，同时保持足够的专业度和可读性。 不仅如此，我们的简历模板易于编辑，你可以根据具体职位需求快速调整内容，展现你的个人优势和职业成就。使用这些模板，将大大提高你的面试机会，并帮助你更好地表达自己的价值和潜力。 别让传统且缺乏创意的简历阻碍你迈向成功的道路。立即下载这些精美的简历模板，让你的求职之路更加顺畅，向心仪的工作迈进吧！记住，一个良好的开始是成功的一半，而一份精致的简历，正是你成功的起点。
protobuf-3.15.1-cp36-cp36m-macosx_10_9_x86_64.whl
06-17
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
pyzmq-23.2.0-cp37-cp37m-win_amd64.whl
最新发布
06-17
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
absl_py-0.15.0-py3-none-any.whl.zip
06-17
whl是python离线安装包，使用时候只需要pip install x.whl其中x.whl为自己whl路径名
absl_py-1.1.0-py3-none-any.whl.zip
06-17
whl是python离线安装包，使用时候只需要pip install x.whl其中x.whl为自己whl路径名
Visual Basic.docx
06-17
如何将代码编辑器用于 Visual Basic
社区论坛社区校园APP源码分享.zip
06-17
这个项目大部分代码是近一年前开发写的，由于 React Native 生态不够完善，社区组件总有各种各样的差强人意，许多基础的组件 (SlideInMenu、Toast、ContextMenu等) 都是自己写动画手撸的(也借鉴了许多开源项目)。 另外，在写这个项目之前，我对 JavaScript 的掌握程度仅仅是勉强能使用 Jquery 和 Ajax，但 React 使用到了 ES6 的内容，因此许多 JS 的代码都是参照官网和Github上源码照猫画虎写的，并非专业前端，代码写的水平不高见笑了。没有使用到 Redux，都是很普通很基础的 JS 代码，稍微了解 ES6 的类及箭头函数就能看懂代码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值