Golden Dot Game
The Golden Dot game is a digital mini-game whose game rules are:
n students (n usually greater than ten), each writing a rational number between 0~100 ( excluding 0 or three ), to the referee, the referee calculates the average of all the numbers, and then times the 0.618(so-called golden partition constant) , the G value is obtained. The number of the submitted nearest to G(absolute value) of the students get n points, the farthest from the G students get-2 points, the other students get 0 points. after a few days of playing, we found some interesting phenomena, such as the golden dots moving down gradually.
Now please according to the rules of the game, make up a can play with a number of small game program, the requirements are as follows:
1, this job belongs to the pair programming project, must be completed by two people, and will be sent to the blog, respectively, the operation of the source code submitted to the codeing system;
2, if possible to use the C/s or b/n as much as possible, that is, using the server to receive and process all the players submitted by the number, and the results back to the players, players can be submitted by the client number;
3, if the use of single-machine approach, it is necessary to provide users with convenient input interface;
4, the game can run at least 10 rounds at a time, and can keep the results of the rounds.
Seeing the topic, I decided to finish the task with the Html+js I was better at.
First of all, as the title says. There are n students, so the first step is to determine the number of students.
<Divclass= "Col-lg-6 Play"> <Divclass= "Input-group"> <inputtype= "text"class= "Form-control"ID= "P_numa"> <spanclass= "Input-group-btn"> <Buttonclass= "Btn Btn-default"type= "button"onclick= "Creatboxa ()">Number of games</Button> </span> </Div> </Div>
This code is to want the customer to show an input box, enter the number of people to play N. Then click the number of players button to dynamically generate N input boxes. The user can enter their own number in the input box. Play the game. The code for the dynamically generated input box is as follows:
function Creatboxa () { document.getElementById ("Resulta"). innerhtml= ""; document.getElementById ("Box_numa"). innerhtml= ""; var Pnum1=document.getelementbyid ("P_numa"). Value; var OA = document.getElementById ("Box_numa"); < Pnum1 ; i++) { = document.createelement ("input"); box_num.setattribute (' type ', ' text '); Box_num.setattribute (' name ', ' B_numa '); Box_num.setattribute (' class ', ' Form-control '); Box_num.setattribute (' class ', ' input-sm '); Oa.appendchild (Box_numa); }}
Front Code:
<Divclass= "Headera"> <H1>Gold Point</H1> </Div> <Divclass= "Contenta"> <Divclass= "Col-lg-6 Play"> <Divclass= "Input-group"> <inputtype= "text"class= "Form-control"ID= "P_numa"> <spanclass= "Input-group-btn"> <Buttonclass= "Btn Btn-default"type= "button"onclick= "Creatboxa ()">Number of games</Button> </span> </Div> </Div> <Buttontype= "button"class= "Btn Btn-default"onclick= "Nexta ()">Start the game</Button> <Divclass= "Cona"> <DivID= "Box_numa"> </Div> <DivID= "Resulta"> </Div> <DivID= "RESULT2A"> </Div> </Div> </Div>
As shown in the above code, the Creatbox function is to first empty the foreground page div is the content of result and b_num respectively. Then get the number of users entered into the variable Pnum1 inside. Finally, the input window is created with a For loop through Document.createelement ("").
Immediately after the user enters the completed value, click Start Game to dynamically generate two text box textarea area below. The scores in each round are then displayed in result, and the total number of points per round is displayed in the RESULT2. The dynamically generated text box area looks like this:
function CREATAREAA (aa) { document.getElementById ("Resulta"). innerhtml= ""; var OA = document.getElementById ("Resulta"); var Resa = document.createelement ("textarea"); Res.setattribute (' name ', ' Resa '); Res.setattribute (' class ', ' Resa '); Res.setattribute (' Rows ', ' ten '); Res.setattribute (' cols ', ' Max '); Res.setattribute (' readonly ', ' ReadOnly '); Oa.appendchild (RESA); < a . length; i++) { ja=i+1; resa.innerhtml+ = "First" +ja+ "Personal score is:" +aa[i]+ "\ n"; }}
The total is similar to creating a game number input box. Then here is the function of calculating the gold points, by getting the value of the game entered by the user and then using the array to put in the array p. Finally, the calculated gold point A is returned.
function Get_num () {var a_numa= new Array (); var pa=document.getelementsbyname ("B_numa"); for (i = 0; I < p .length; i++) {A_numa[i] =pa[i].value; =0; for (i = 0; i <A_numa.length; i++) {suma =suma+parsefloat (A_numa[i]); } Sa =suma/a_numa.length; aa =sa*0.618; return Aa;}
Here is the computed fractional function, calculated so that the absolute value of the difference between the game number and the golden point is placed in the array pe_num, the maximum max and Min min values are traversed. Finally, an if statement is used to determine the p_sum fraction of a fractional array. Then return to P_sum
function Counta (S_numa) {var p_suma=new Array (); var pe_numa=new Array (); var Sa=get_numa (); for (i = 0; I<S_numa. length; i++) {Pe_numa[i]=math.abs (Sa-s_numa[i]); } var Maxa=pe_numa[0]; For (i= 0;I <Pe_numa.length; i++) {if (Maxa<pe_numa[i]) {Maxa=pe_numa[i]; }} var mina=pe_numa[0]; For (i= 0;i < pe_numa.length; i++) {if (Mina>Pe_numa[i]) {Mina=pe_numa[i]; }} for (i = 0; I<Pe_numa. length; i++) {if (Maxa==pe_numa[i]){P_suma[i]= 10; } else if (Mina==pe_numa[i]){P_suma[i]=-2; } else {P_suma[i]= 0; }} var s1a= newArray (); S1a[0]=p_suma[0]return P_suma;}
The last is to calculate the total score function:
var qa=0;var dataa=new Array (), function nexta () {var snuma=new array (); var numa=document.getelementsbyname ("B_numa"); for (i = 0; I<Numa. length; i++) {Snuma[i]=numa[i].value; } qa++; var Aa=counta (Snum); CREATAREAA (A); var Ba=newArray (); if (QA==1){for (i= 0;i < aa.length; i++) {Dataa[i]=parseint (Aa[i]); }}else {for (i= 0;I <Aa.length; i++) {var aa=parseint (Aa[i]); Dataa[i]=dataa[i]+aa; }} creatarea2a (Dataa);}
First, create two global variables Q and array data outside of the function. An array of fractions derived from the count function is passed into array a. It is then displayed in the page with the Creatarea () function. When the global variable q is 1, it indicates that the next function at this time has been run. The total score is the value of array A, which casts the value of a into the data array through the shaping number (in order to facilitate the operation of the number of arrays in the subsequent array). When q is not equal to 1, the function is run more than once, then the data is computed with a for loop. Without executing the function once, the value within a can accumulate in the global variable array b. The total score is calculated, and then the CREATAREA2 () function is displayed in the div ID of the result2 box. This is the whole idea of programming.
Companion Photo:
The effect of the operation is as follows:
Home:
First step enter the number of people, click the number of games:
Enter the value in the second step and click Start Game:
The third step is to enter the second round value, after entering click Start Game:
As shown, basically complete the task. The previous game was to query the last value and score, but it hasn't been completed yet. Now the whole program still has a few unfinished: 1, limit the number of people 2, limit the value of 3, the page display effect 4, query the front of the game content 5, limit the number of games.
Golden Dot Game