面向对象练习游戏。
<!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的请留下一点宝贵建议，谢谢
相关推荐
Delphi是一款强大的面向对象的编程工具，它基于Pascal语言，提供了直观的集成开发环境（IDE）和丰富的组件库，使得游戏开发变得相对简单。 首先，我们需要理解连连看游戏的基本规则。这种游戏通常包含两个主要部分...
本项目是一个利用WPF技术制作的“连连看”游戏界面，旨在展示如何在WPF环境中构建一个简单的游戏应用。 “连连看”是一款广受欢迎的休闲游戏，其核心玩法是找到并消除两个相同的图案，直到所有图案都被消除。在WPF...
【标题】：“Windows简易连连看游戏” 这是一款专为初学者设计的Windows平台下的连连看游戏，旨在帮助学习者理解基础的编程概念和Windows应用程序开发技术。作为一个初级开发者或者编程爱好者，通过这款游戏，你...
在本实例中，我们将探讨如何使用Cocos Creator构建一个简单的连连看游戏。 连连看游戏的基本玩法是找到并消除一对相同的图案，当所有图案配对成功后，游戏胜利。以下是实现这个游戏的关键步骤和涉及的技术点： 1. ...
期末大作业基于VUE的连连看小游戏源码，内附安装教程。 期末大作业基于VUE的连连看小游戏源码，内附安装教程。期末大作业基于VUE的连连看小游戏源码，内附安装教程。期末大作业基于VUE的连连看小游戏源码，内附安装...
这款游戏简单易上手，但却具有一定的挑战性和趣味性，适合各个年龄段的玩家。 在压缩包"连连看-连连看.rar"中包含的文件"连连看.fla"是Flash动画文件，它是Adobe Flash Professional用于创建、编辑和发布交互式矢量...
连连看是一款广受欢迎的休闲消除类游戏，它的玩法简单，却又具有一定的挑战性。这个名为“连连看素材.rar”的压缩包文件显然包含了制作连连看游戏所需的图像资源。下面将详细探讨连连看游戏的设计元素以及这些素材在...
在IT领域，游戏开发一直是热门话题，尤其是对于初学者来说，通过创建简单的游戏可以更好地理解和掌握编程语言。本篇将深入探讨一款使用AS3.0（ActionScript 3.0）开发的连连看小游戏，通过源代码分析，帮助读者了解...
【标题】"用Qt制作的RPG形式的连连看"是一个使用Qt框架开发的桌面游戏项目，它将经典的连连看游戏与角色扮演游戏(RPG)的元素相结合，为玩家带来新颖的游戏体验。Qt是一个跨平台的C++图形用户界面应用程序开发框架，...
甘蔗连连看是甘蔗小游戏推出的一款连连看单机小游戏，这是非常风靡的办公室小游戏，甘蔗连连看游戏具有下面的特点： 1、由低到高的难度，让你循序渐进的成为连连看高手； 2、可以保存游戏进度，每日只需轻松的玩上一...
连连看HTML5游戏源码是一种基于HTML5技术开发的在线休闲益智游戏，它允许玩家在网页上进行游戏，...无论是对前端开发还是对游戏制作有兴趣的个人，都可以通过研究这个源码提升自己的技能，并在此基础上进行创新和改造。
易语言是一种专为初学者设计的编程语言，其语法简洁明了，适合用来制作各种简单的小游戏，如连连看。连连看游戏的核心在于图像匹配，玩家...通过理解这些代码，初学者可以学习到易语言的基本语法和制作简单游戏的方法。
VB（Visual Basic）是微软公司推出的一种基于事件驱动的编程语言，它简单易学，适合初学者入门。本项目“VB 小游戏连连看”就是一个利用VB开发的休闲益智游戏，深受玩家喜爱。在这款游戏中，玩家需要通过消除相同...
一款非常不错但能让人瞬间凌乱的三国杀版连连看游戏，设置了提示和排名、计时等功能，代码简单易懂，是一个很不错的游戏开发学习案例。 感兴趣的开发者可以下载源码，解压后导入MM开发环境进行修改优化，可跨平台...
本教程将深入探讨如何使用Flash MX工具来制作一款类似“宠物连连看”的游戏，帮助开发者更好地理解和掌握游戏开发技巧。 一、Flash MX简介 Flash MX是Adobe公司推出的多媒体创作工具，主要用于创建交互式网页动画、...
3. **物理引擎（Physics Engine）**：虽然连连看游戏的物理效果相对简单，但源码可能包含简单的碰撞检测，以识别两个相邻的相同棋子。Cocos2D内置的Box2D或Chipmunk物理引擎可以帮助实现这一点。 4. **动画...
《水果连连看》是一款深受大众喜爱的经典休闲游戏，它的素材制作是通过编程工具Scratch实现的。Scratch是由麻省理工学院（MIT）媒体实验室终身幼儿园团队开发的一款面向儿童的图形化编程工具，旨在帮助孩子们学习...
在IT领域，游戏开发是一项充满挑战和趣味性的任务，尤其对于初学者来说，通过制作简单的游戏能够快速掌握编程基础和逻辑思维。本项目是一个用C#语言编写的连连看游戏，它不仅为玩家提供了娱乐，同时也是学习C#编程和...
连连看是一款广受欢迎的休闲益智游戏，它以其简单的操作和富有挑战性的玩法吸引了大量玩家。本篇将深入探讨如何使用Java编程语言实现连连看源程序，让我们一起走进Java编程的世界，揭秘连连看游戏背后的逻辑。 一、...
本项目是一个基于C语言实现的简单连连看游戏，它展示了C语言在游戏开发中的应用潜力。下面我们将深入探讨这个项目的实现原理、核心功能和涉及的关键技术。 ### 1. 游戏逻辑设计 连连看游戏的基本规则是找到并消除...