Home  >  Article  >  Web Front-end  >  JavaScript and HTML5 use canvas to build a card guessing game implementation algorithm_javascript skills

JavaScript and HTML5 use canvas to build a card guessing game implementation algorithm_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:28:391024browse

Let me guess the card in your mind. First, randomly generate 27 cards. You cannot list the three columns of cards repeatedly. Then remember one of them, and then click on the column where the card is. You can guess the card you want multiple times.
If there are 9 cards, you only need to guess 2 times, if there are 27 cards, you only need to guess 3 times.

Implementation method (27 cards):
If you click on the third column, that means the cards must be among these 9 cards, then average the 9 cards in the third column Divide 3 cards into each column, assuming the numbers are 123, 456, 789
Click again. If you click on the second column, the guessed card will be in 456, and then divide it into three columns, 4, 5, 6
Click again to know which card it is.

Implementation algorithm:
I use a one-dimensional array to implement it. When guessing the third column for the first time, I add the data in the third column to 0,1,2,3,4 , 5, 6, 7, 8 are replaced,
Then the guessed number is in the front 9. When guessing the second column for the second time, replace the three numbers in the column with 0, 1, 2, then it is in the front. Three already.
The output is output in three columns. However, there is a problem. This way, the subsequent cards will not be messed up, and others will know why you guessed it.
So when outputting, it must be output out of order. You can only Output in up and down order, not left and right order
var random = new Array(5);//Customized two-dimensional disordered table
random[0] = [5, 2, 8, 7, 1, 3 , 4, 6, 0];
random[1] = [2, 5, 8, 0, 4, 6, 3, 7, 1];
random[2] = [6, 7, 2 , 8, 0, 1, 5, 3, 4];
random[3] = [2, 1, 6, 3, 5, 4, 7, 0, 8];
random[4] = [0, 1, 2, 3, 4, 5, 6, 7, 8];
For more information, please check: www.shengshiyouxi.com
JavaScript and HTML5 use canvas to build a card guessing game implementation algorithm_javascript skills

Copy code The code is as follows:

< !DOCTYPE html>
< html xmlns="http://www.w3. org/1999/xhtml">
< head>

< ;title>


< /head>
< body>


Let me guess the card in your heart< br />
First select a card in your mind from the list and remember it, then select the column it is in, click three times and I will guess the card in your mind.

Come and try it, I understand you!

If you encounter a card that cannot be displayed, or is incompletely displayed, please refresh. If your browser does not support HTML5, please change the browser, such as chrome, Firefox, etc.


Your browser does not support HTML5, please change the browser, such as chrome, Firefox, etc.
< ;br />




< /body>
< ; /html>
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn