簡単なものを作って、何度も見ます.
14646 ワード
相手に向かってゲームを練習する.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style type="text/css">
.container{
border:1px solid #000000;
width:70%;
height:600px;
clear:both;
float:left;
}
table{
border:1px solid #000000;
width:100%;
height:100%;
text-align:center;
font-size:25px;
border-collapse:collapse;
empty-cells:show;
}
.border{
border:1px solid red;
}
</style>
<BODY>
<INPUT id="setrow" type="text" value="16" size="2">
<INPUT id="setcol" type="text" value="9" size="2">
<INPUT id="setpic" type="text" value="12" size="2">
<INPUT id="settime" type="text" value="60" size="3">
<BUTTON onclick="init();"> </BUTTON>
<DIV id="timeleft" style="float:left;"></DIV>
<DIV id="timebar" style="height:5;width:600;background-color:white;"></DIV>
<DIV id="container" class="container"> </DIV>
</BODY>
<script src="jquery-1.7.2.js"></script>
<SCRIPT LANGUAGE="JavaScript">
// alert( parseInt(Math.random()*12 ) );
// pic td
var pic_first_click = null ;
var td_first_click = null ;
var bgPicArray = null;
var background = null;
//
var maxRow = 0;
//
var maxCol = 0;
function init(){
var contents = [ 'a','b','c' ,'d','e','f' ,'g' ,'h','i','g', 'k' , 'l' ];
var setrow = $('#setrow').val();
var setcol = $('#setcol').val();
maxRow = parseInt(setrow)+2 ;
maxCol = parseInt(setcol)+2;
background = new Background(maxRow , maxCol );
background.initbg( contents );
var table = background.genBGTable();
//alert(table );
$('#container').html( table );
}
//
function removeEle( obj ){
var l = $(obj).attr('l');
var h = $(obj).attr('h');
var pic_current_click = background.datas[h][l];
if(td_first_click == null){
//alert(pic_current_click +" "+ pic_current_click.point.x );
if( pic_current_click.getIsRemove() ){
return ;
}
td_first_click = obj ;
pic_first_click = pic_current_click;
$(td_first_click).addClass('border');
}else{
//alert( background.linkXY(pic_first_click ,pic_current_click) );
//alert( pic_first_click.getIsRemove() +" "+ pic_current_click.getIsRemove() );
//
if( pic_current_click.getIsRemove() ){
//alert(" remove ");
return ;
}
if(background.linkXY(pic_first_click ,pic_current_click)
&& pic_current_click.judgeSame( pic_first_click ) ){
$( obj).html('');
$( td_first_click ).html('');
//$( obj).removeAttr('content');
// pic
pic_current_click.setIsRemove(true);
pic_first_click.setIsRemove(true);
}
//remove first click trace
$(td_first_click).removeClass( );
td_first_click = null;
pic_first_click = null;
}
}
//
function Background( setrow , setcol ){
//
this.row = setrow ;
//
this.col = setcol ;
// picture
this.datas = getDatas( setrow , setcol );
function getDatas(setrow,setcol ){
if(setrow==null || setrow==0 ){
alert( " ");
return null;
}
if(setcol == null || setcol==0 ){
alert(' ');
return null;
}
// x y
var datas = new Array(setrow );
for( var i=0;i < setrow;i++ ){
var column = parseInt(setcol) ;
datas[i] = new Array( column );
var point = null ;
var pic = null ;
for(var j=0;j< column ;j++ ){
point = new Point( j , i );
pic = new Picture('',point);
if(i==0 || j==0 || i== (setrow-1) || j==(setcol-1) ){
//
pic.setIsRemove(true);
}
//pic.setBackGround( this );
datas[i][j] = pic;
//alert( $(pic.getTdObj()));
}
}
return datas;
}
}
//
Background.prototype.initbg = function(contents ){
if( this.datas == null || this.datas.length ==0 ){
alert(" ");
return ;
}
if(!contents){
alert(" ");
}
var witchChar = 0 ;
// x y
for( var i=1;i< this.row -1 ;i++ ){
for(var col_temp=1;col_temp< this.col-1; col_temp++ ){
witchChar = randomInt( contents.length );
this.datas[i][col_temp].content = contents[witchChar];
}
}
}
// html ， x y
Background.prototype.genBGTable = function( ){
if( this.datas == null || this.datas.length ==0 ){
alert(" ");
return ;
}
var htmlStr = "<table border='1'>";
for(var i=0 ;i<this.row;i++ ){
var point = null ;
var pic = null ;
htmlStr = htmlStr + "<tr>";
for(var j=0 ;j< this.col;j++ ){
point = new Point(j , i);
pic = new Picture(this.datas[i][j] , point )
if(this.datas[i][j].content==null || this.datas[i][j].content==''){
htmlStr = htmlStr+"<td h='"+i+"' l='"+j+"' content='' id='"+i+j+"'> </td>";
}else{
htmlStr = htmlStr+"<td id='"+i+j+"' onclick='removeEle(this)' h='"+i+"' l='"+j+"' content='"+this.datas[i][j].content+"'>"+ this.datas[i][j].content +"</td>";
}
}
htmlStr= htmlStr+ "</tr>";
}
htmlStr= htmlStr+ "</table>";
return htmlStr;
}
// x
Background.prototype.linkX = function( picture1 ,picture2 ){
var x1 = picture1.point.x;
var y1 = picture1.point.y;
var x2 = picture2.point.x;
for(var i=x1; i!=x2; (x1<x2)?i++:i-- ){
if( i==x1 ) continue;
if( !this.datas[y1][i].getIsRemove() ){
return false;
}
}
return true;
}
// Y
Background.prototype.linkY = function( picture1 ,picture2 ){
var x1 = picture1.point.x;
var y1 = picture1.point.y;
var y2 = picture2.point.y;
for(var i=y1; i!=y2; (y1<y2)?i++:i-- ){
//alert(this.datas[y1][i].getTdObj() );
if( i==y1 ) continue;
if( !this.datas[i][x1].getIsRemove() ){
return false;
}
}
return true;
}
//
Background.prototype.linkXY = function( pic1 ,pic2 ){
var picture1 = pic1 ;
var picture2 = pic2 ;
var x1 = picture1.point.x;
var y1 = picture1.point.y;
var x2 = picture2.point.x;
var y2 = picture2.point.y;
//if( this.linkY(picture1,picture2 )) return true;
//if( this.linkX(picture1,picture2 )) return true;
if( this.linkX(picture1,picture2) && this.linkY( picture2 , picture1 ) ) return true;
if( picture1.isHigher(picture2) ){
var p =picture1;
picture1 = picture2;
picture2 = p;
}
// y -
for(var i=x1-1;i>=0;i-- ){
if( !this.datas[y1][i].getIsRemove() ) break;
if( this.linkY(this.datas[y1+1][i] ,pic2 )
&& this.linkX(pic2 ,this.datas[y1][i] ) ){
return true;
}
}
// y +
for(var j=x1+1 ;j< maxCol ;j++ ){
if( !this.datas[y1][j].getIsRemove() ) break ;
if( this.linkY(this.datas[y1+1][j] ,pic2 )
&& this.linkX(pic2 , this.datas[y1][j] ) ){
return true;
}
}
if(!picture1.isLeft(picture2)){
var p =picture1;
picture1 = picture2;
picture2 = p;
}
// x -
for(var m=y1-1 ;m > 0 ;m-- ){
if( !this.datas[m][x1].getIsRemove() ) break;
if( this.linkX( this.datas[m][x1+1],pic2 )
&& this.linkY(pic2 ,this.datas[m][x1+1] ) ){
return true;
}
}
// x +
for( var m=y1+1 ;m < maxRow ;m++ ){
if( !this.datas[m][x1].getIsRemove() ) break;
if( this.linkX( this.datas[m][x1+1],pic2 )
&& this.linkY(pic2 ,this.datas[m][x1+1] ) ){
return true;
}
}
return false;
/*
if(!picture1.isLeft(picture2)){
var p =picture1;
picture1 = picture2;
picture2 = p;
}
if( this.linkX(picture1,picture2 )) return true;
for(var i=0;i<(picture1.point.x-1) ; i++ ){
var point_temp = new Point( i , picture1.point.y );
var pic_temp = new Picture('','' );
if(this.linkX(picture1,picture2 ) ){
}
}
*/
}
//
var randomInt = function(limit ){
if(isNaN(limit)){
alert(" ");
return null;
}
return parseInt(Math.random()*limit);
}
//
function Point(x , y ){
this.x = x ;
this.y = y ;
this.getX = function (){
return this.x ;
}
this.getY = function (){
return y;
}
}
// judge same point
Point.prototype.judgeSamePosition= function(point ){
if( this.x ==point.x && this.y == point.y ){
return true;
}else{
return false;
}
}
//
function Picture(content , point ){
this.tdObj = null;// pic td
this.backGround = null; //pic
this.point = point;
this.content = content ;
this.isRemove = false;
this.getPoint = function(){
return this.point;
}
this.getContent = function(){
return this.content ;
}
}
//
Picture.prototype.setIsRemove=function(isRemove){
this.isRemove = isRemove;
}
//
Picture.prototype.getIsRemove = function(){
return this.isRemove ;
}
//pic
Picture.prototype.setBackground = function(backGround){
this.backGround = backGround ;
}
//pic
Picture.prototype.getBackground = function(backGround){
return this.backGround ;
}
//judge same Picture
Picture.prototype.judgeSame = function(picture){
//alert( this.point +" "+this.point.getX() +" "+this.point.getY() );
if(this.getIsRemove()){
return false;
}
if( this.point.judgeSamePosition( picture.point)){
return false;
}
if(this.content == picture.content ){
return true;
}else{
return false;
}
}
//
Picture.prototype.isHigher = function(picture){
if( picture.point==null || picture.point.y==null
|| this.point==null || this.point.y==null ){
alert(" ");
return false;
}
if( this.point.y >picture.point.y ){
return true;
}else{
return false;
}
}
//
Picture.prototype.isLeft = function(picture){
if( this.point ==null || this.point.x==null
|| picture.point == null || picture.point.y==null ){
alert(" ");
return false;
}
if( this.point.x <picture.point.x ){
return true;
}else{
return false ;
}
}
var point1 = new Point(1 ,2 );
var point2 = new Point(1 ,23 );
var picture1 = new Picture( 'y' ,point1 );
var picture2 = new Picture('b' , point2 );
// picture
//alert(picture1.judgeSame( picture2) );
</SCRIPT>
</HTML>
私はjavaを作ったので、これをするのはjavascriptを練習するためで、私の書いたjsがjsコードの規範に合うかどうかを知らないで、jsをすることがあるならば、少し貴重な提案を残して下さい.ありがとうございます.