Childhood Memories - Cutting Fruits (Includes source code inscode to run with one click)

foreword

"Author's Homepage" : Sprite Youbai Bubbles
"Personal Website" : Sprite's personal website
"Recommendation Column" :

★ Java one-stop service ★
★ React from entry to proficiency ★
★ Cool front-end code sharing ★
★ From 0 to hero, the road to Vue becoming a god ★
★ uniapp-from construction to promotion ★
★ From 0 to hero, Vue becoming a god Road ★
★ One column is enough to solve the algorithm ★
★ Let’s talk about the architecture from 0 ★
★ The exquisite way of data circulation ★
★ The road to advanced backend ★

Get to know inscode

CSDN's latest Inscode service is an online programming tool designed to provide developers with a convenient environment for writing, running and sharing code, allowing developers to quickly write and run code without building a local programming environment.

Inscode supports multiple programming languages, including Java, Python, C++, etc., and also supports writing HTML, CSS and JavaScript codes. It provides a complete operating environment, allowing the code to run directly on the web page and output the results, real-time debugging, convenient and fast. At the same time, Inscode also provides a sharing function, which can easily share the code with others.

To use Inscode, just visit its website https://inscode.csdn.net/
personal homepage: why_does_it_work

First look at the running effect

Here you can directly view the source code content , refresh , and the last one is to zoom in and jump to the webpage

View source code content

get item

click the link

Impact checking

	/**
	 * 碰撞检测
	 */
	
	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;
});

This code implements a collision detection function to detect whether the knife intersects with the fruit. The input parameters of the function are the coordinates of the knife and the fruit array.

First, an empty array ret and a variable index are defined to store the collided fruits and counts.

Then, use forEach to iterate through the fruit array. For each fruit, call the lineInEllipse function to determine whether the knife and the fruit intersect. If it intersects, add the fruit to the ret array and add 1 to the index.

Finally, return the ret array, which is all the fruits intersected by the knife.

In the lineInEllipse function, the judgment of the intersection of the line segment and the ellipse is realized. The input parameters of the function are the coordinates of the two endpoints of the line segment, the coordinates of the center of the ellipse, the radius of the ellipse, and the eccentricity of the ellipse.

The function first calculates the coefficients a, b, c of an equation according to the parameters of the line segment and ellipse.

Then, call the equation12 function to solve the quadratic equation in one variable, and store the solution in the variable k.

Finally, calculate the intersection point coordinates of the line segment and the ellipse according to the solution k, and judge whether the intersection point is on the line segment.

The function returns both intersections if present, or null if no intersection exists.

The sqr function in the comments is used to calculate the square of a number, and the sign function is used to return the sign of a number (negative numbers return -1, positive numbers return 1, and zero returns 0).

The entire code block uses a modular approach to export the collision detection function as an exports object.

fruit jump

	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;
});

This code defines an exported function called "onJumping". It takes an argument called "time".

The first line of code divides the "time" parameter by "cycleTime" to get the integer "t". This "cycleTime" variable should be defined elsewhere in the code, but it doesn't show up in this code.

The next line modulo "time" to "cycleTime" to get the remaining time in a cycle.

If "t" is odd, the following line of code subtracts "time" from the remaining time "cycleTime". This causes time to flow in reverse during the second half of the odd cycle. If "t" is an even number, the times will proceed in normal order.

The last line of code calculates the new "y" coordinate of the image according to the jump animation function "jumpAnim", and assigns it to the "y" property of "image".

Finally, this function returns an object called "exports", which should contain the "onJumping" function as a method.
Fruit Slicing Game is a simple javascript game where the goal is to cut the fruit and get the highest score.

summary

The game starts, and the fruit starts to fall from the top of the screen, and the player needs to use a knife to cut the fruit in half. Players can use the mouse or the gesture of swiping up on the touch screen to cut the fruit.

The way to cut the fruit is by detecting the collision of the knife with the fruit. When the player cuts the fruit, the game will determine how the fruit will be split and score based on where the cut is made. Once the fruit is cut in half, the score will increase.

The game will also give evaluations based on the player's performance, such as the more accurate and fast the cut, the higher the score.

In addition, the game will also count the time, and the game will end if the specified time is exceeded. At the end, the player's score and the option to restart the game are displayed.

The realization of the whole game can be completed by organizing the falling of the fruit, the movement of the knife and the collision detection, using JavaScript event monitoring and animation effects. The logic of the game can be realized by frame-by-frame update, variable control and conditional judgment.

All in all, Cut Fruit Game is a simple and fun javascript game based on fruit cutting and scoring system, players can enjoy challenges and entertainment.