面向对象练习游戏。
<!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的请留下一点宝贵建议，谢谢
相关推荐
用WPF实现的简单连连看程序，希望借助此程序来和大家交流
甘蔗连连看是甘蔗小游戏推出的一款连连看单机小游戏，这是非常风靡的办公室小游戏，甘蔗连连看游戏具有下面的特点： 1、由低到高的难度，让你循序渐进的成为连连看高手； 2、可以保存游戏进度，每日只需轻松的玩上一...
一款非常不错但能让人瞬间凌乱的三国杀版连连看游戏，设置了提示和排名、计时等功能，代码简单易懂，是一个很不错的游戏开发学习案例。 感兴趣的开发者可以下载源码，解压后导入MM开发环境进行修改优化，可跨平台...
很有趣的h5 canvas 实现的小游戏连连看，简单易懂，有利于大家加深对canvas的理解和认识。
C#winform制作的简单连连看，连连看核心算法，充分显示。但是内容较少。并且有自动消除功能哦。
许多人在 PC 机或手机上都玩过图片连连看游戏，看着很简单，但自己真的动手设计，完成过程其实很艰辛．如果是制作手机连连看游戏，编译完成的连连看游戏需要将生成的安装包上传至手机，在生成的源文件里打开 bin ...
宠物连连看flash源文件，直接导出就可以运行，这个比较简单，对制作连连看得游戏比较有帮助，现在连连看的游戏很多！所以大家可以做的更好一些！
这个是我最近学习Unity3D写的一个练习游戏. 挺简单的,有需要的朋友请自行下载.
主要实现的功能有：难度设置、打乱重排、排行榜、计时器、背景音乐、消除音效。本项目几乎涵盖了Android入门级的所有知识点，适合新手练手实践。详细介绍博客链接：...
我自己开发的一款新颖的连连看，玩家可以自己制作图标，操作简单，你可以将你和朋友的头像、宠物、摄影图片等轻松截取，作为连连看的图标，然后将这个游戏作为礼物送给你最亲近的人。 绿色版，无需安装。 解压后直接...
连连看路径两种快速搜索算法；GDI后备缓冲使用防闪烁；用于制作任意形状地图的地图生成器；通关难度简单自动调节；使用MFC封装图片文件管理类以实现任意格式图片的加载、显示等图片操作；封装波形声音文件（wav文件...
在网上学习制作一个简单的android连连小游戏，大多数素材随便做的，在玩的时候有一些bug，但是基本功能以实现，可以运行.
连连看路径两种快速搜索算法；GDI后备缓冲使用防闪烁；用于制作任意形状地图的地图生成器；通关难度简单自动调节；使用MFC封装图片文件管理类以实现任意格式图片的加载、显示等图片操作；封装波形声音文件（wav文件...
此游戏由本人制作 简单的java小游戏 直接运行就可以了
源码名称：悟空连连看 <br> 开发环境 -------------------------------------------------------- 1. IDE：Visual Studio.NET 2005 ，版本：8.0.50727.42 2. 语言：C# 2.0 3. 框架：....
用pixi实现的贪吃蛇小游戏，功能单一，只是实现简单的蛇的运行，吃食物和键盘可控。需要使用http的方式打开，即发布在网站上，推荐使用wampServer,或者使用Hbuilder运行代码。
一个由简单代码编写的扫雷小游戏，但操作起来有点麻烦
图形界面开发让你爱不释手，通过它，你可以使用c语言轻松制作出属于自己的app； 有它，您既可以学会c语言，又可以用c语言编写手机游戏、软件。 不论是连连看、文件管理器，还是跑酷、rpg游戏，你全部都可以用这个...
在接下来的一段时间将由我和大家一起学习游戏外挂的分析，制作。 课程分四个大章节 初级篇，中级篇，进阶篇，高级篇 初级篇内容：编写一个完整的，简单的外挂 C++的数据类型:Byte,Word,DWORD,int,float API函数的...
在接下来的一段时间将由我和大家一起学习游戏外挂的分析，制作。 课程分四个大章节 初级篇，中级篇，进阶篇，高级篇 初级篇内容：编写一个完整的，简单的外挂 C++的数据类型:Byte,Word,DWORD,int,float API函数的...