Free to do nothing, spent two days, with JavaScript wrote a dozen peas game, as for how to play the do not elaborate, to search the internet to know, very simple.
The following is the source code, published out for everyone to learn and exchange.
Because this program does not use a picture, so the interface in IE under the beans are square more conspicuous, the proposed use of Chrome browser to run, or Firefox
Demo Address: http://www.imkoko.com/app/dadoudou.php
Not much to say, on the code
Copy Code code as follows:
<! DOCTYPE html>
<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: #0569FF}
. C2{background: #0CCE0C}
. C3{background: #CE6C0A}
. C4{background: #FF9B05}
. C5{background: #CCCC66}
. C6{background: #CD6ACD}
. C7{background: #6DCECE}
. C8{background: #9C9C9C}
. C9{background: #FF6A6A}
#pin {z-index:3;position:absolute;width:600px;height:450px;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>
<body>
<div id= "Fly" >
<div id= "Dou" class= "Huabu" >
<div id= "pin" onmousedown= "event.cancelbubble=true;" ></div>
<div id= "Menu" > <button onclick= "Start ()" > Begin </button><br><br> Play: Click on a blank place, up, down, left, Right if you have the same color or number you can score </div>
<div id= "main" onmousedown= "Moveobject.down (THIS,CC)" ></div>
<div id= "Time" > Remainder:120</div>
<div id= "cou" > Score:0</div>
<div class= ' right ' >power by <a href= ' http://www.imkoko.com ' > Cool Cool net </a></div>
</div>
</div>
<script>
/*
* Author: Jiangchi
* Demo Website: cool Net http://www.imkoko.com/app/dadoudou.php
* Program completely FREE of charge, reprint please keep this information, 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.documentElement: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 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= ' remainder: ' + (121-it);
SetTimeout (' Time () ', 1000);
}else{
$ (' pin '). style.display= ' block ';
$ (' menu '). style.display= ' block ';
$ (' menu '). innerhtml= ' <button onclick= "Start ()" > Start </button><br><br><br> ' + ' Congratulations ' +fen + ' min '
}
}
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.documentElement:document.body;
var sctop= document.documentelement.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>
I'm Jiangchi.