童年回忆——切水果（内含源码inscode一键运行）

ゞ浴缸里的玫瑰 2023-10-14 16:17 60阅读 0赞

# 前言 #

![在这里插入图片描述][0422b4369a3549b3a39da19588ab88f4.png]  
「作者主页」：[雪碧有白泡泡][Link 1]  
「个人网站」：[雪碧的个人网站][Link 2]  
「推荐专栏」：

> ★[java一站式服务][java] ★  
> ★ [React从入门到精通][React]★  
> ★[前端炫酷代码分享][Link 3] ★  
> ★ [从0到英雄，vue成神之路][0_vue]★  
> ★ [uniapp-从构建到提升][uniapp-]★  
> ★ [从0到英雄，vue成神之路][0_vue 1]★  
> ★ [解决算法，一个专栏就够了][Link 4]★  
> ★ [架构咱们从0说][0]★  
> ★ [数据流通的精妙之道][Link 5]★  
> ★[后端进阶之路][Link 6]★

![请添加图片描述][c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]

### 文章目录 ###

*  前言
 *  认识一下inscode
 *  先看运行效果
 *   *   *  看查源码内容
         *  获取项目
 *  碰撞检测
 *  水果跳跃
 *  小结

# 认识一下inscode #

![在这里插入图片描述][ceb7297d53444c67ac900201cc3b721f.png]  
CSDN最新推出的Inscode服务是一个在线编程工具，旨在为开发者提供一个便捷的编写、运行和分享代码的环境，让开发者无需在本地搭建编程环境，即可快速编写和运行代码。

Inscode支持多种编程语言，包括Java、Python、C++等，同时也支持编写HTML、CSS和JavaScript代码。它提供了完整的运行环境，让代码在网页上直接运行并输出结果，即时调试，方便快捷。同时，Inscode还提供了分享功能，可以轻松地将代码分享给其他人。

使用Inscode，只需访问其网站[https://inscode.csdn.net/][https_inscode.csdn.net]  
个人主页：[why\_does\_it\_work][why_does_it_work]

# 先看运行效果 #

![在这里插入图片描述][22c242737a63478287cee5392fa2c005.png]  
这里可以直接**看查源码内容**，**刷新**，最后一个是**放大跳转网页**

### 看查源码内容 ###

![在这里插入图片描述][b5b1080c90b2415aa9eab92b9e1135d0.png]

### 获取项目 ###

[点击链接][Link 7]  
![在这里插入图片描述][0e8f8bdae09445b0af9cc61638841edb.png]

![在这里插入图片描述][cd7c717e718f4c1789f7af16875f717c.png]

# 碰撞检测 #

/**
    	 * 碰撞检测
    	 */
    	
    	exports.check = function( knife ){
        
    		var ret = [], index = 0;
    	
    		fruits.forEach(function( fruit ){
        
    		    var ck = lineInEllipse(
    		    	knife.slice( 0, 2 ), 
    		    	knife.slice( 2, 4 ), 
    		    	[ fruit.originX, fruit.originY ],
    		    	fruit.radius
    		    );
    		    if( ck )
    		        ret[ index ++ ] = fruit;
    		});
    		return ret;
    	};
    	
    	function sqr(x){
        
    		return x * x;
    	}
    	
    	function sign(n){
        
    		return n < 0 ? -1 : ( n > 0 ? 1 : 0 );
    	}
    	
    	function equation12( a, b, c ){
        
    		if(a == 0)return;
    	
    		var delta = b * b - 4 * a * c;
    		if(delta == 0)
    			return [ -1 * b / (2 * a), -1 * b / (2 * a) ];
    		else if(delta > 0)
    			return [ (-1 * b + Math.sqrt(delta)) / (2 * a),  (-1 * b - Math.sqrt(delta)) / (2 * a) ];
    	}
    	
    	// 返回线段和椭圆的两个交点，如果不相交，返回 null
    	function lineXEllipse( p1, p2, c, r, e ){
        
    		// 线段：p1, p2    圆心：c    半径：r    离心率：e
    		if (r <= 0) return;
    		e = e === undefined ? 1 : e;
    		var t1 = r, t2 = r * e, k;
    	
    		a = sqr( t2) * sqr(p1[0] - p2[0]) + sqr(t1) * sqr(p1[1] - p2[1]);
    	
    		if (a <= 0) return;
    		
    		b = 2 * sqr(t2) * (p2[0] - p1[0]) * (p1[0] - c[0]) + 2 * sqr(t1) * (p2[1] - p1[1]) * (p1[1] - c[1]);
    		c = sqr(t2) * sqr(p1[0] - c[0]) + sqr(t1) * sqr(p1[1] - c[1]) - sqr(t1) * sqr(t2);
    		
    		if (!( k = equation12(a, b, c, t1, t2) )) return;
    		
    		var result = [
    			[ p1[0] + k[0] * (p2[0] - p1[0]), p1[1] + k[0] * (p2[1] - p1[1]) ],
    			[ p1[0] + k[1] * (p2[0] - p1[0]), p1[1] + k[1] * (p2[1] - p1[1]) ]
    		];
    		
    		if ( !( ( sign( result[0][0] - p1[0] ) * sign( result[0][0] - p2[0] ) <= 0 ) &&
    			( sign( result[0][1] - p1[1] ) * sign( result[0][1] - p2[1] ) <= 0 ) ) )
    			result[0] = null;
    	
    		if ( !( ( sign( result[1][0] - p1[0] ) * sign( result[1][0] - p2[0] ) <= 0 ) &&
    			( sign( result[1][1] - p1[1] ) * sign( result[1][1] - p2[1] ) <= 0 ) ) )
    			result[1] = null;
    	
    		return result;
    	}
    	
    	// 判断计算线段和椭圆是否相交
    	function lineInEllipse( p1, p2, c, r, e ){
        
    		var t = lineXEllipse( p1, p2, c, r, e );
    		return t && ( t[0] || t[1] );
    	};
    
    	return exports;
    });

> 这段代码实现了一个碰撞检测的函数，用于检测刀子是否与水果相交。函数的入参为刀子的坐标和水果数组。
> 
> 首先，定义了一个空数组ret和一个变量index，用于存储碰撞的水果和计数。
> 
> 然后，使用forEach遍历水果数组。对于每个水果，调用lineInEllipse函数判断刀子和水果是否相交。如果相交，将水果添加到ret数组中，并将index加1。
> 
> 最后，返回ret数组，即为所有与刀子相交的水果。
> 
> 在lineInEllipse函数中，实现了线段和椭圆相交的判断。函数的输入参数为线段的两个端点坐标、椭圆的中心坐标、椭圆的半径和椭圆的离心率。
> 
> 函数首先根据线段和椭圆的参数计算出某个方程的系数a，b，c。
> 
> 然后，调用equation12函数解一元二次方程，并将解存储在变量k中。
> 
> 最后，根据解k计算出线段和椭圆的交点坐标，并判断交点是否在线段上。
> 
> 函数返回两个交点（如果存在），或者null（如果不存在交点）。
> 
> 注释中的sqr函数用于计算一个数的平方，sign函数用于返回一个数的符号（负数返回-1，正数返回1，零返回0）。
> 
> 整个代码块使用了模块化的方式，将碰撞检测函数作为一个exports对象导出。  
> ![在这里插入图片描述][5ace4e09c6dc4bb28a5373bd2e2b2c6b.png]

# 水果跳跃 #

exports.onJumping = function(time){
        
    		var t = parseInt(time / cycleTime);
    	
    		time = time % cycleTime;
    		if( t % 2 ) time = cycleTime - time;
    		
    		image.attr("y", jumpAnim( time, ey, dy, cycleTime ));
    	};;
    
    	return exports;
    });

> 这段代码定义了一个叫做"onJumping"的导出函数。它接受一个名为"time"的参数。
> 
> 代码的第一行将"time"参数除以"cycleTime"以获得整数"t"。这个"cycleTime"变量应该是在代码的其他部分定义的，但它没有在这段代码中显示出来。
> 
> 接下来的一行将"time"模"cycleTime"，以得到在一个周期中的剩余时间。
> 
> 如果"t"是奇数，下面的一行代码将剩余的时间"cycleTime"减去"time"。这会导致在奇数周期的后半部分，时间逆向流动。如果"t"是偶数，时间将按照正常的顺序进行。
> 
> 最后一行代码根据跳跃动画函数"jumpAnim"来计算图像的新的"y"坐标，并将其赋值给"image"的"y"属性。
> 
> 最后，这个函数返回一个名为"exports"的对象，这个对象应该包含了"onJumping"函数作为一个方法。  
> 切水果游戏是一个简单的JavaScript游戏，目标是切割出水果并获得最高得分。

![在这里插入图片描述][2eabce8df5744acf8ef50771e3223cd1.png]

# 小结 #

> **游戏开始，水果从屏幕顶部开始落下，玩家需要用一把刀将水果切割成两半。玩家可以使用鼠标或触摸屏上滑的手势来切割水果。**
> 
> 切割水果的方式是通过检测刀与水果的碰撞来实现的。当玩家切割水果时，游戏会根据切割的位置来决定水果的分裂方式和得分。一旦水果被切割成两半，得分将增加。
> 
> 游戏还会根据玩家的表现给予评价，比如切割得越准确和快速，得分越高。
> 
> 另外，游戏还会计时，超过规定时间则游戏结束。结束时，会显示玩家的得分和重新开始游戏的选项。
> 
> 整个游戏的实现可以通过组织水果的下落、刀的移动和碰撞检测来完成，使用了JavaScript的事件监听和动画效果。游戏的逻辑可以通过逐帧更新、变量控制和条件判断来实现。
> 
> 总而言之，切水果游戏是一个简单而有趣的JavaScript游戏，基于水果切割和得分系统，玩家可以享受到挑战和娱乐。  
> ![在这里插入图片描述][7593302f82ab48c099bb51a66ea7277b.png]

[0422b4369a3549b3a39da19588ab88f4.png]: https://img-blog.csdnimg.cn/0422b4369a3549b3a39da19588ab88f4.png
[Link 1]: https://blog.csdn.net/Why_does_it_work?spm=1011.2415.3001.5343
[Link 2]: https://sprite.inscode.cc/
[java]: https://blog.csdn.net/why_does_it_work/category_12379581.html
[React]: http://t.csdn.cn/69y5b
[Link 3]: https://blog.csdn.net/why_does_it_work/category_12378617.html
[0_vue]: http://t.csdn.cn/X1kpw
[uniapp-]: https://blog.csdn.net/why_does_it_work/category_12363697.html
[0_vue 1]: https://blog.csdn.net/why_does_it_work/category_12376654.html
[Link 4]: https://blog.csdn.net/why_does_it_work/category_12381051.html
[0]: https://blog.csdn.net/why_does_it_work/category_12381055.html
[Link 5]: https://blog.csdn.net/why_does_it_work/category_12381058.html
[Link 6]: https://blog.csdn.net/why_does_it_work/category_12397959.html?spm=1001.2014.3001.5482
[c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]: https://img-blog.csdnimg.cn/c7f3e6b8a7624a9eabbea77dbcbca119.jpeg
[ceb7297d53444c67ac900201cc3b721f.png]: https://img-blog.csdnimg.cn/ceb7297d53444c67ac900201cc3b721f.png
[https_inscode.csdn.net]: https://inscode.csdn.net/
[why_does_it_work]: https://inscode.csdn.net/@why_does_it_work
[22c242737a63478287cee5392fa2c005.png]: https://img-blog.csdnimg.cn/22c242737a63478287cee5392fa2c005.png
[b5b1080c90b2415aa9eab92b9e1135d0.png]: https://img-blog.csdnimg.cn/b5b1080c90b2415aa9eab92b9e1135d0.png
[Link 7]: https://inscode.csdn.net/@why_does_it_work/HTML-CSS-JS_32
[0e8f8bdae09445b0af9cc61638841edb.png]: https://img-blog.csdnimg.cn/0e8f8bdae09445b0af9cc61638841edb.png
[cd7c717e718f4c1789f7af16875f717c.png]: https://img-blog.csdnimg.cn/cd7c717e718f4c1789f7af16875f717c.png
[5ace4e09c6dc4bb28a5373bd2e2b2c6b.png]: https://img-blog.csdnimg.cn/5ace4e09c6dc4bb28a5373bd2e2b2c6b.png
[2eabce8df5744acf8ef50771e3223cd1.png]: https://img-blog.csdnimg.cn/2eabce8df5744acf8ef50771e3223cd1.png
[7593302f82ab48c099bb51a66ea7277b.png]: https://img-blog.csdnimg.cn/7593302f82ab48c099bb51a66ea7277b.png