Home > Developer > JavaScript
It took me two days to write a doubebean game using javascript. I will not elaborate on how to play it. I will find it on the Internet and it is very simple.
The following is the source code, which is released for everyone to learn and exchange.
Because this program does not use an image, the interface beans in ie are square and eye-catching. We recommend that you use chrome or firefox
Demo address: http://www.imkoko.com/app/dadoudou.php
Not to mention, go to the code
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Style>
Body {font-size: 12px ;}
# Fly {position: absolute ;}
A {text-decoration: none; color: #999 ;}
. Huabu, # main {width: 600px; height: 450px; position: relative; overflow: hidden ;}
. B,. c {height: 25px; width: 25px; position: absolute; z-index: 1; background: # efefef; font-size: 12px ;}
. C {background: #000; border-radius: 12px; text-align: center; line-height: 25px; color: # fff ;}
. C10 {background: # FDADFE}
. C1 {background: # 0366ff}
. C2 {background: # 0CCE0C}
. C3 {background: # CE6C0A}
. C4 {background: # FF9B05}
. C5 {background: # CCCC66}
. C6 {background: # CD6ACD}
. C7 {background: #6 DCECE}
. C8 {background: # 9C9C9C}
. C9 {background: # FF6A6A}
# Pin {z-index: 3; position: absolute; width: 600px; height: pixel PX; filter: alpha (opacity = 50);-moz-opacity: 0.5; -khtml-opacity: 0.5, opacity: 0.5, background: # fff ;}
# Time, # cou,. right {position: absolute; bottom: 0px; color: #999 ;}
# Cou {left: 100px ;}
# Menu {z-index: 3; position: absolute; left: 200px; top: 100px; width: 200px; height: 300px; font-weight: bold; font-size: 24px; text-align: center ;}
# Menu button {width: 100px; height: 50px ;}
. Right {right: 0px ;}
</Style>
</Head>
<Body>
<Div id = "fly">
<Div id = "dou" class = "huabu">
<Div id = "pin" onmousedown = "event. cancelBubble = true;"> </div>
<Div id = "menu"> <button onclick = "start ()"> start </button> <br> method: click a blank area, upper, lower, left, and right can be scored if the same color or number exists. </div>
<Div id = "main" onmousedown = "MoveObject. down (this, cc)"> </div>
<Div id = "time"> remaining time: 120 </div>
<Div id = "cou"> score: 0 </div>
<Div class = "right"> Power by <a href = "http://www.imkoko.com"> Cool Network </a> </div>
</Div>
</Div>
<Script>
/*
* Author: Jiang Qi
* Demo site: Cool Network http://www.imkoko.com/app/dadoudou.php
* The program is completely open for free. Please keep this information for reprinting. Thank you.
*/
Function $ (o ){
Return document. getElementById (o );
}
Var MoveObject = {
Down: function (o, fun)
{
Document. onselectstart = new Function ("event. returnValue = false ");
Document. body. setAttribute ('style', '-moz-user-select: none ;');
// E = e? E: window. event;
E = arguments. callee. caller. arguments [0] | window. event;
X = e. clientX;
Y = e. clientY;
Fun ([x, y]);
Return false;
}
};
Var o = new Array ();
Var it = 0;
Var fen = 0;
Function ini (){
Var _ doc = (document. compatMode! = "BackCompat ")? Document.doc umentElement: document. body;
Fly_left = _ doc. scrollLeft + _ doc. clientWidth/2-$ ('fly '). offsetWidth/2;
$ ('Fly '). style. left = fly_left + 'px ';
For (I = 0; I <15; I ++ ){
For (j = 0; j <12; j ++ ){
Tmp = document. createElement ('div ');
Tmp. className = "B ";
Tmp. style. left = (j * 50 + I % 2*25) + 'px ';
Tmp. style. top = I * 25 + 'px ';
$ ('Main'). appendChild (tmp );
}
}
For (I = 0; I <24; I ++ ){
O [I] = new Array ();
}
For (I = 0; I <200; I ++ ){
Var ji = cre ();
Tmp = document. createElement ('div ');
Tmp. innerHTML = t;
Tmp. id = ji [0] + '_' + ji [1];
Tmp. className = "c" + t;
Tmp. style. left = (x * 25) + 'px ';
Tmp. style. top = y * 25 + 'px ';
$ ('Main'). appendChild (tmp );
}
}
Function cre (){
X = parseInt (Math. random () * 24 );
Y = parseInt (Math. random () * 15 );
T = parseInt (Math. random () * 10 + 1 );
If (o [x] [y]> 0 ){
Var re = cre ();
Return re;
} Else {
O [x] [y] = t;
Return [x, y];
}
}
Function cc (p ){
X = parseInt (p [0]-$ ('fly '). offsetLeft)/25 );
Y = parseInt (p [1]-$ ('fly '). offsetTop)/25 );
If (o [x] [y]> 0 ){
Return false;
} Else {
Var finded = [];
For (I = y; I> = 0; I --){
If (o [x] [I]> 0 ){
Finded. push ([o [x] [I], x, I]);
Break;
}
}
For (I = y; I <o [x]. length; I ++ ){
If (o [x] [I]> 0 ){
Finded. push ([o [x] [I], x, I]);
Break;
}
}
For (I = x; I> = 0; I --){
If (o [I] [y]> 0 ){
Finded. push ([o [I] [y], I, y]);
Break;
}
}
For (I = x; I <o. length; I ++ ){
If (o [I] [y]> 0 ){
Finded. push ([o [I] [y], I, y]);
Break;
}
}
Find = 0;
Po (finded, 0 );
If (find = 0 ){
It + = 10;
}
Fen = fen + find;
$ ('Cou'). innerHTML = 'score: '+ fen;
}
}
Function po (obj, n ){
A = obj [n];
Tag = 0;
For (j = n + 1; j <obj. length ;){
If (obj [j] [0] = a [0]) {
O [obj [j] [1] [obj [j] [2] = 0;
Paowuxian. p ($ (obj [j] [1] + '_' + obj [j] [2]);
Obj. splice (j, 1 );
Tag = 1;
Find ++;
} Else {
J ++;
}
}
If (tag = 0 ){
N ++;
} Else {
O [a [1] [a [2] = 0;
Paowuxian. p ($ (a [1] + '_' + a [2]);
Find ++;
Obj. splice (n, 1 );
}
If (n <obj. length-1 ){
Po (obj, n );
}
}
Function time (){
It ++;
If (it <121 ){
$ ('Time'). innerHTML = 'remaining time: '+ (121-it );
SetTimeout ('time () ', 1000 );
} Else {
$ ('Pin'). style. display = 'block ';
$ ('Menu '). style. display = 'block ';
$ ('Menu '). innerHTML = '<button onclick = "start ()"> start </button> <br>' + 'congratulations' + fen + 'points'
}
}
Function start (){
It = 0;
Fen = 0;
$ ('Main'). innerHTML = '';
O = new Array ();
Ini ();
$ ('Pin'). style. display = 'none ';
$ ('Menu '). style. display = 'none ';
Time ();
}
Ini ();
Var paowuxian = {
_ Type: [],
Bot: 0,
O: [],
Ini: function (o ){
For (I = 0; I <this. o. length; I ++ ){
If (this. o [I] = o ){
Return I;
}
}
For (I = 0; I <this. o. length; I ++ ){
If (this. _ type [I]. sta =-1 ){
Break;
}
}
O. style. position = 'absolute ';
This. o [I] = o;
This. _ type [I] = {l: o. offsetLeft, t: o. offsetTop, s: 0, nt: 0, sta: 1 };
Return I;
},
P: function (o ){
This. ini (o );
Var _ doc = (document. compatMode! = "BackCompat ")? Document.doc umentElement: document. body;
Var sctop = document.doc umentElement. scrollTop | document. body. scrollTop;
Fly_top = sctop + _ doc. clientHeight
This. bot = fly_top-30;
SetTimeout ("paowuxian. dos (" + I + ")", 20 );
},
Dos: function (I ){
If (this. _ type [I]. nt> this. bot ){
If (this. _ type [I]. sta = 1 ){
Document. body. removeChild (this. o [I]);
This. _ type. sta =-1;
}
} Else {
This. _ type [I]. l = this. _ type [I]. l + 3;
This. _ type [I]. s ++;
This. _ type [I]. nt = this. _ type [I]. t-5 * this. _ type [I]. s + 0.5*1 * this. _ type [I]. s * this. _ type [I]. s;
This. o [I]. style. top = this. _ type [I]. nt + 'px ';
This. o [I]. style. left = this. _ type [I]. l + 'px ';
SetTimeout ("paowuxian. dos (" + I + ")", 20 );
}
}
};
</Script>
</Body>
</Html>
I'm Jiang Qi.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
