海水打鱼小游戏源码

最新推荐文章于 2023-08-08 00:47:17 发布
最新推荐文章于 2023-08-08 00:47:17 发布
阅读量813 收藏
点赞数
分类专栏： Javascript CSS H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaopihaisal/article/details/80757742
版权
Javascript 同时被 3 个专栏收录
5 篇文章 0 订阅
订阅专栏
CSS
3 篇文章 0 订阅
订阅专栏
H5
2 篇文章 0 订阅
订阅专栏 
<!DOCTYPE HTML>	
<html>

<head>
	<title>letter-FishGame</title>

	<style type="text/css">
		
		html{
			margin: 0;
			padding: 0;
			width: auto;
			height: 100%; /*宽度自动*/
		}
		img{
			padding: 0;
			margin: 0;
		}
		div{
			padding: 0;
			margin: 0;
		}
		body{
			background: url(img6/bk.jpg) no-repeat;
			background-size: cover;
		}
		.main{
			position: relative;
		}
		.logo{
			position: fixed;
			left: 35%;
			top: 5%;
		}
		.one{
			position: fixed;
			left: 37%;
			top: 60%;
		}
		.about{
			padding-right: 80px;
		}
		.ab_content{
			display: none;
			position: absolute;
			width: 200px;
		}
		.start{
			
		}
		.score{
			margin: 0;
			padding-top: 20px;
			width: 170px;
			height: 108px;
			background: url("img6/35.png") no-repeat;
			display: none;
			position: fixed;
			left: 1%;
			top: 2%;
			text-align: center;
			font-weight: bold;
			font-size: 45px;

		}
		.back{
			display: none;
			position: fixed;
			left: : 2%;
			bottom: 2%;
			width: 7%;
			min-width: 50px;
		}
		.two{
			display: none;
			position: fixed;
			width: 10%;
			right: 0;
			bottom: 1%;
		}
		.stop{
			width: 70%;
			min-width: 50px;
		}
		.set{
			width: 70%;
			min-width: 50px;
		}
		.speed{
			display: none;
			width: 60%;
			position: fixed;
			left: 80%;
			top: 48%;
		}
		.classic{
			width: 15%;
		}
		.challenge{
			width: 15%;
			position: absolute;
			top: 120%; 
			left: 0;
		}
		/*版本A:手动编写popo元素对应的css*/
		.popo1,.popo2,.popo3,.popo4,.popo5,.popo6,.popo11,.popo12,.popo13,.popo14,.popo15,.popo16{
			position: fixed;
			width: 3%; 
			margin-left: 10%; 
		}
		.popo1,.popo2,.popo3,.popo4,.popo5,.popo6{
			bottom: 0;
		}
		.popo11,.popo12,.popo13,.popo14,.popo15,.popo16{
			bottom: -50px;
		}
		.popo1,.popo11{
			left: 2%;
		}
		.popo2,.popo12{
			animation-timing-function: ease-in;
			animation-delay: 1s;
			left: 17%;
		}
		.popo3,.popo13{
			animation-timing-function: ease;
			left: 32%;
		}
		.popo4,.popo14{
			animation-timing-function: ease-out;
			animation-delay: 1s;
			left: 47%;
		}
		.popo5,.popo15{
			animation-timing-function: ease-in-out;
			left: 62%;
		}
		.popo6,.popo16{
			animation-delay: 1s;
			left: 77%;
		}
		.po_move{
			animation-name: popomove;
			animation-duration: 10s;
			animation-iteration-count: infinite;
		}
		.popo11,.popo13,.popo15{
			animation-delay: 5s;
		}
		.popo12,.popo13,.popo16{
			animation-delay: 6s;
		}
		@keyframes popomove{
			from{
				bottom: 0;
			}
			to{
				bottom: 100%;
			}
		}

		.fish{
			width: 163px;
			height: 117px;
			background: url('img/yu7.gif') no-repeat;
			color: black; 
			font-weight: bold;
			font-size: 40px;
			text-align: right;
			padding: 0px;  
			position: fixed;
			right: -163px;
			}
		.moveFish{	
			animation-name: moveFish;
			animation-duration: 5s;
			/*animation-iteration-count: infinite;*/
			animation-timing-function: linear;
			}
		@keyframes moveFish{
			from{
				right: 0;
			}
			to{
				right: 100%;
			}
		}

	</style>
</head>

<body>
	<div class="main">
		<div class="one">
			<img src="img6/36.png" class="logo">
			<img src="img6/32.png" class="about" id="a">
			<img src="img6/33.png" class="start" >
			<img src="img6/30.png" class="ab_content">
		</div>
		<div class="two">
			<img src="img6/11.png" class="set">
			<img src="img6/10.png" class="stop">
		</div>
		<div class="speed">
			<img src="img6/23.png" class="classic">
			<img src="img6/24.png" class="challenge">
		</div>
			<div class="score"></div>
			<img src="img6/9.png" class="back">
		</div>
		<div class="allFish">
		</div>
	<!--版本A：手动插入popo，并用animation元素制作动画效果-->
		<div class="popo1 po_move" >
			<img src="img6/qp5.png">
			<img src="img6/qp6.png">
		</div>
		<div class="popo2 po_move" >
			<img src="img6/qp6.png">
			<img src="img6/qp7.png">
		</div>
		<div class="popo3 po_move" >
			<img src="img6/qp7.png">
		</div>
		<div class="popo4 po_move" >
			<img src="img6/qp7.png">
		</div>
		<div class="popo5 po_move" >
			<img src="img6/qp5.png">
			<img src="img6/qp6.png">
		</div>
		<div class="popo6 po_move" >
			<img src="img6/qp6.png">
			<img src="img6/qp7.png">
		</div>
		<div class="popo11 po_move" >
			<img src="img6/qp5.png">
			<img src="img6/qp6.png">
		</div>
		<div class="popo12 po_move" >
			<img src="img6/qp6.png">
			<img src="img6/qp7.png">
		</div>
		<div class="popo13 po_move" >
			<img src="img6/qp7.png">
		</div>
		<div class="popo14 po_move" >
			<img src="img6/qp7.png">
		</div>
		<div class="popo15 po_move" >
			<img src="img6/qp5.png">
			<img src="img6/qp6.png">
		</div>
		<div class="popo16 po_move" >
			<img src="img6/qp6.png">
			<img src="img6/qp7.png">
		</div>
	

<script type="text/javascript">
		var d1 = 0;
		var d2 = 0;
		var stop_switch = true;
		var speed_switch = 'classic';
		var ele_fish = new Array();
		var ab_content = document.getElementsByClassName('ab_content');
		var about = document.getElementsByClassName('about');
		var start = document.getElementsByClassName('start');
		var one = document.getElementsByClassName('one');
		var two = document.getElementsByClassName('two');
		var score = document.getElementsByClassName('score');
		var back = document.getElementsByClassName('back');
		var set = document.getElementsByClassName('set');
		var classic = document.getElementsByClassName('classic');
		var challenge = document.getElementsByClassName('challenge');
		var stop = document.getElementsByClassName('stop');
		var speed = document.getElementsByClassName('speed');
		var popo = document.getElementsByClassName('popo');
		var allFish = document.getElementsByClassName('allFish');
		var fish = document.getElementsByClassName('fish');
		var score_value = 0;

	    //鼠标移入时about的内容出现，移出时消失
		about[0].addEventListener('mouseover',function(){
			ab_content[0].style.cssText = 'display:block; right:95%; bottom:40%;';
		},false);
		about[0].addEventListener('mouseout',function () {
			ab_content[0].style.cssText = 'display:none';	
		},false);
		
		start[0].onclick = function(){
			my_show([two[0],score[0],back[0]]);
			my_hide([one[0]]);
			game_classic();
			score_value = 0;
			score[0].innerHTML = score_value;
		}
		back[0].onclick = function(){
			clearInterval(d1);
			clearInterval(d2);
			my_show([one[0]]);
			my_hide([two[0],score[0],back[0],ab_content[0],speed[0]]);
			allFish[0].innerHTML = '';
		}

		set[0].onclick = function(){
			if (stop_switch){
				clearInterval(d1);
				clearInterval(d2);
				for(var i=0;i<allFish[0].children.length;i++){
				fish[i].style.animationPlayState = "paused";
				}
				my_show([speed[0]]);
				stop_switch = false;
			}
			else{
				for(var i=0;i<allFish[0].children.length;i++){
				fish[i].style.animationPlayState = "running";
				}
				if(speed_switch == 'classic'){
					game_classic();
				}
				else{
					game_challenge();
				}
				my_hide([speed[0]]);
				stop_switch = true;
			}
		}
		classic[0].onclick = function(){
			my_hide([speed[0]]);
			allFish[0].innerHTML = '';
			score_value = 0;
			score[0].innerHTML = score_value;
			game_classic();
			speed_switch = 'classic';
			stop_switch = true;
		}
		challenge[0].onclick = function(){
			my_hide([speed[0]]);
			allFish[0].innerHTML = '';
			score_value = 0;
			score[0].innerHTML = score_value;
			game_challenge();
			speed_switch = 'challenge';
			stop_switch = true;
		}
		stop[0].onclick = function(){
			if (stop_switch){
				clearInterval(d1)
				clearInterval(d2)
				for(var i=0;i<allFish[0].children.length;i++){
				fish[i].style.animationPlayState = "paused";
				}
				stop_switch = false;
			}
			else{
				for(var i=0;i<allFish[0].children.length;i++){
				fish[i].style.animationPlayState = "running";
				}
				if(speed_switch = 'classic'){
					game_classic();
				}
				else{
					game_challenge();
				}
				//game_classic();
				stop_switch = true;
			}
		}
		window.onkeydown = function(event){
			var keyCode = event.keyCode;    //返回点击的按键的字符代码
			var key = String.fromCharCode(keyCode);  //将按键的字符代码转换为字符串
			var fish_value;
			for (var i = 0; i < fish.length; i++) {
				if(fish[i].innerHTML == key){
					allFish[0].removeChild(fish[i]);
					score_value += 10;
					score[0].innerHTML = score_value;
				}
			}
		}
		function my_show(arr){
			for(var i=0; i<arr.length ;i++){
				 arr[i].style.display = 'block';
			}
		}
		function my_hide(arr){
			for(var i=0;i<arr.length;i++){
				arr[i].style.display = 'none';
			}
		}
		function game_classic(){
				d1 = setInterval(creatFish,1500);      
		}
		function game_challenge(){
				d2 = setInterval(creatFish,900);
		}
		function creatFish(){
			var chars = "ABCDEFGHIGKLMNOPQRSTUVWXYZ";
			var num = Math.random()*chars.length;
			var randomNum = parseInt(num);
			var randomChar = chars.charAt(randomNum);
			var ele = document.createElement('div');
			allFish[0].appendChild(ele);
			ele.innerHTML = randomChar;
			ele.classList.add('moveFish','fish');
			var random_top = Math.random()*900;
			ele.style.top = random_top + 'px';
			if(allFish[0].children.length > 30) {	
				for (var i = 0; i < 10; i++) {
						allFish[0].removeChild(fish[i]);
					}
				}
		}
</script>
</body>
</html>
<!--
总结：本游戏是一个针对桌面的打字游戏，功能非常简单，
	 纯js，css,没有使用地第三方框架
	 大概思路如下：
	 1、设置每个按钮的事件，主要是点击后需要消失和显示元素，完成界面
	 2、设置鱼和气泡的动画，气泡的用了固定的div块去设计，也可以用动态js像做鱼一样去做
	   鱼在这里用了animation动画，还有一种动起来的方法就是不断去用js改变鱼的坐标，达到一个视觉移动的目的，但是那样做的话比较耗费资源，
	   而且连贯性不是很好，会有跳动的感觉
	 3、暂停设置的时候需要注意怎么让画面固定然后再恢复
	 4、设置按钮在点击时也需要画面静止，类似于停止按钮，所以两个函数大概相同，调用的一些元素属性有相同之处，这样造成点击了暂停后
	 	再点击设置按钮时，会出现混乱现象，所以采用了公用开关设置
	 5、等级设置，这个比较简单，就是改变创建节点的时间
	 注意：创建节点时一点要有一个清除机制，这里采用了让最大节点数不超过31来控制，否则节点不断产生，如果玩家开始后没有键盘输入，浏览器就尴尬了
	       会造成节点过多卡死
		   还有一点就是无论什么代码都要提前想好代码结构，否则经常会出现代码之间前后矛盾现象，造成开发时间周期过长
	 使用到的函数：
	 document.getElementsByClassName();获取含有某个class样式的元素数组，看清楚，是数组，所以用的时候要加数组下标
	 setInterval(),固定时间调用参数函数，两个参数，第一个是被调用函数，第二个为设置固定时间
	 clearInval(),取消setInterval()设置的固定
	 animation是css中的动画，很好用。

-->


https://download.csdn.net/download/xiaopihaisal/10490070

资源下载页面  附图

Aaron_sal
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【潜艇游戏开发】最全的源代码
居然天上楼的博客
09-24 1853
5.2)重写paint()方法---在paint()中调用paintImage()即可---------不要求掌握。- 删除越界的海洋对象是定时发生的，所以在run()中调用outOfBoundsAction()删除越界的海洋对象。3. 画对象：---------------------------------要求：看着笔记中的步骤能写出来就OK。- 炸弹与潜艇的碰撞为定时发生的，所以在run()中调用bombBangAction()实现炸弹与潜艇碰撞。
Unity 捕鱼游戏开发教程与源码
最新发布
873149745
10-10 1643
【代码】Unity 捕鱼游戏开发教程与源码。
html实现经典捕鱼达人小游戏
xcLeigh
05-12 2996
html实现经典捕鱼达人小游戏源码 ，html实现捕鱼达人源码下载，99.99%的还原实物，起始分数为10000，每次出网扣除一分，捕捉到鱼获取一定分（根据不同的鱼，获取不同的积分）。场景大小可自由调整，游戏手感极佳，流畅度高。
捕鱼游戏源码（数值+完整项目资源）
热门推荐
09-02 1万+
目前捕鱼游戏的玩法，逐渐有这些趋势：捕鱼玩法+消除类玩法、捕鱼玩法+模拟经营玩法、捕鱼玩法+建造养成玩法，这些趋势已经有龙头企业逐渐开始做出尝试。 但是对大部分团队来讲，对垂直领域的理解不够深刻，对产品理解不够深刻，团队没有沉淀和积累，通常都会遇到下面这些问题： 很多团队在数值上构建不完整、不合理； 服务器响应延迟，卡顿，无法平衡效果与性能； 安全攻防问题，这个环节只有在最后运营阶段才会遇到； 对市场的把控能力极弱，没有市场经营； 对于没有经验的团队建议多花点时间在设计上面，要对产品有足够的理解
qt打鱼小游戏源码.zip
04-11
本项目"qt打鱼小游戏源码.zip"显然是一个基于Qt框架开发的小型打鱼游戏的源代码包，其核心目标是提供一个趣味性十足的休闲娱乐游戏体验。 源码分析： 1. **项目结构**：通常，Qt项目会包含.pro文件，这是Qt构建...
Java版打鱼游戏源码
01-11
【Java版打鱼游戏源码】是一个专门为对游戏开发感兴趣的开发者提供的学习资源，它涵盖了Java编程语言在游戏开发中的实际应用。打鱼游戏，又称捕鱼达人，是一种深受玩家喜爱的休闲娱乐游戏，其核心玩法是控制炮台发射...
Unity3D项目小游戏（2D打鱼）
01-26
在这个“2D打鱼”项目中，开发者利用Unity3D的2D功能构建了一个有趣的小游戏，旨在提供轻松愉快的游戏体验。 在Unity3D中开发2D游戏，主要涉及以下几个关键知识点： 1. **2D渲染系统**：Unity3D支持2D渲染，可以...
Html5捕鱼游戏源代码
03-18
HTML5是一种先进的网页开发技术，它极大地扩展了Web应用程序的功能，使得开发者能够创建出更加丰富、交互性...通过研究和学习这个源代码，开发者不仅可以了解游戏开发的基本流程，还能深入理解现代Web开发技术的运用。
捕鱼达人html5小游戏源码 | 可以学习 |可以改造
06-14
【捕鱼达人html5小游戏源码】是一款基于HTML5技术开发的在线休闲娱乐游戏，它以其独特的玩法、精美的画面和动听的音效吸引了众多玩家。HTML5是现代网页开发的主流标准，它允许开发者创建丰富的、交互性强的网页应用...
千炮捕鱼源码
05-06
千炮捕鱼源码
网页单机游戏捕鱼达人源码.zip
11-17
还记得这款童年的小游戏吗，小时候还需要充值才可以，现在不需要啦，打开就能玩
i捕鱼源代码
04-17
半年前写的程序，好久没有弄过了，内存管理方面有待提升，文件很大里面很多不必要的图片资源，场景切换有问题，需要你们改正，还是能够运行的，总体效果还行。
在线捕鱼达人网站源码
12-13
非常好玩，下载之后打开就能看到开源的代码，可以自己进行二次开发
Unity3D 打鱼源码
04-16
Unity3D开发的打鱼工程，网络部分已屏蔽，单机版可玩。
童年回忆——捕鱼达人（内含源码inscode一键运行）
Why_does_it_work的博客
08-08 4648
通过使用HTML、CSS和JavaScript来编写捕鱼达人小游戏，可以让玩家在浏览器中进行捕鱼游戏，提供了一个简单、便捷且有趣的游戏体验。
html5捕鱼达人源码分享！！！
qq_39066501的博客
06-15 5773
Html5捕鱼达人源码分享！！！ 项目截图： 部分源码： (function(){ varns=Q.use("fish"),game=ns.game; varFishManager=ns.FishManager=function(container) { this.fishPool=[]; this.poolSize=game.params.num||100; this.minNumFishScreen=this.poo...
200行纯C++代码构建一个捕鱼游戏「源码已打包」
11-20 6362
语言:C++ 编辑器:VS2015 渲染:D2D 碰撞:obb和aabb 编译选项:请选择Release x86编译 主要说明: 代码： 项目文件目录说明 img放游戏所使用的图片文件夹 frame放控制游戏场景相关的文件 instance放游戏窗口进程游戏循环工具类碰撞类的文件 render放游戏渲染引擎的文件夹 trigger放对一些消息进行映射的文件夹 后面会详细...
pygame 小游戏
07-27
\[1\]\[2\]此外，你还提到了一个Python小游戏项目，名为"小船打鱼"，并列出了一些相关的代码文件。\[3\]如果你有关于Pygame小游戏的具体问题，请告诉我，我会尽力帮助你。 #### 引用[.reference_title] - *1* *2* [...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值