消除类游戏(js版)
最近一直在玩一款消灭星星的消除类游戏，周末无聊就用js也写了一遍，感觉玩比写还困难一直玩不到10000分。废话不多说直接上源码。
效果图(ps 页面有点难看木有美工)
代码总共456行，未经过严格测试
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>消灭方块</title>
</head>
<body>
<style type="text/css">
#content{width:580px;height:620px;margin:0px auto;border:none;position:relative;background:#0b1a7f;}
#top{width:100%;height:auto;position:absolute;top:20px;}
#top tr td{width:5%;height:35px;border:none;text-align:left;line-height:20px;font-size:24px;color:#E9F8F4;font-weight:800;}
#contenttab{width:100%;height:auto;position:absolute;bottom:0px;}
#contenttab tr td{width:56px;height:56px;border:none;text-align:center;line-height:56px;cursor:pointer;}
#showMessage{color:#FF0000 !important;font-size:22px !important;}
</style>
<div id="content">
<table id="top">
<tr>
<td colspan=2> 历史最高分</td>
<td colspan=2 id="bestScore"></td>
<td colspan=3></td>
</tr>
<tr>
<td colspan=2> 当前得分</td>
<td colspan=2 id="currentLevelScore"></td>
<td colspan=3></td>
</tr>
<tr>
<td> 关卡</td>
<td id="currentLevel"></td>
<td colspan=1></td>
<td>目标</td>
<td id="targetScore"></td>
<td colspan=2></td>
</tr>
<tr>
<td> 总分</td>
<td id="totalScore"></td>
<td colspan=1></td>
<td colspan=4 id="showMessage"></td>
</tr>
</table>
<table id="contenttab">
</table>
</div>
<script type="text/javascript">
var colorArray=new Array('a','b','c','d','e'); //颜色数组
var x=7; //x轴行数
var y=10; //y轴行数
var totalArray=new Array(); //方块总数
var sameArray=new Array(); //消灭方块数组
var contenttab=document.getElementById('contenttab'); //存放方块的盒子
var isShow=false;
var timer=null;
var currentLevel=1; //当前关卡
var currentLevelScore=0; //当前关卡得分
var targetScore=getTargetScore(); //目标分数
var totalScore=0; //总分
//最高分
var bestScore=getCookie('starBestScore');
if(bestScore!=null && bestScore!=""){
bestScore=Number(bestScore);
}else{
bestScore=0;
}
starScore(); //初始化分数
starStar(); //初始化方块数组
starTable(); //初始化方块页面 //获取目标分数
function getTargetScore(){
return 1000*(1+currentLevel)*currentLevel/2;
} //获取每次消除分数
function getScore(length){
return length*length*5;
} //获取最后奖励分数
function getRewardsScore(deadCount){
if(deadCount<10){
return (10-deadCount)*100;
}else{
return 0;
}
} //设置提示消息
function setShowMessage(msg){
if(document.getElementById('showMessage').innerHTML!='' && timer!=null){
delShowMessage();
}
document.getElementById('showMessage').innerHTML=msg; //设置提示消息
timer=setInterval("delShowMessage()",3000);
} //消除提示消息
function delShowMessage(){
document.getElementById('showMessage').innerHTML='';
clearInterval(timer);
} //提示消息
function showMessage(length){
var msg='';
switch(length){
case 5:
msg='牛逼!';
break;
case 6:
msg='赞!';
case 7:
msg='吊炸天!';
break;
case 8:
msg='赞!';
break;
default:
msg=length+'连消'+getScore(length)+'分!';
}
setShowMessage(msg);
} //设置Cookie
function setCookie(c_name,value,expiredays){
var exp=new Date();
exp.setTime(exp.getTime()+expiredays*24*60*60*1000);
document.cookie=c_name+"="+escape(value)+";expires="+exp.toGMTString();
} //获取Cookie
function getCookie(c_name){
var arr,reg=new RegExp("(^| )"+c_name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)){
return unescape(arr[2]);
}else{
return "";
}
} //初始化分数
function starScore(){
document.getElementById('bestScore').innerHTML=bestScore;
document.getElementById('currentLevelScore').innerHTML=currentLevelScore;
document.getElementById('currentLevel').innerHTML=currentLevel;
document.getElementById('targetScore').innerHTML=targetScore;
document.getElementById('totalScore').innerHTML=totalScore;
} //初始化方块数组
function starStar(){
for(var i=x-1;i>=0;i--){
totalArray[i]=new Array();
for(var j=0;j<y;j++){
var color=getRound(); //获取随机颜色
totalArray[i][j]=new Array();
totalArray[i][j]['color']=color;
totalArray[i][j]['col']=i;
totalArray[i][j]['row']=j;
}
}
} //初始化方块页面
function starTable(){
contenttab.innerHTML='';
for(var i=x-1;i>=0;i--){
var td='';
for(var j=0;j<y;j++){
td+='<td style=\'background:url('+totalArray[i][j]['color']+'.gif) no-repeat;\' onclick=\'onTouchesBegan('+i+','+j+')\' id=\'star'+i+''+j+'\'></td>';
}
contenttab.innerHTML+='<tr class=\'tr'+i+'\'>'+td+'</tr>';
}
} //获取随机颜色
function getRound(){
var num=Math.round(Math.random()*(colorArray.length-1));
return colorArray[num];
} //检查数组包含元素
Array.prototype.contains = function(item){
for(i=0;i<this.length;i++){
if(this[i]['col']==item['col'] && this[i]['row']==item['row']){
return true;
}
}
return false;
}; //触发点击事件
function onTouchesBegan(col,row){
checkSameColorStars(totalArray[col][row]); //检测方块相同颜色区域
removeSameColorStars(); //移除相同的方块
} //检测一方块的四个方向
function checkOneStarFourSide(sprite){
if(sprite==null){
retrun;
}
var col=sprite['col'];
var row=sprite['row'];
var color=sprite['color'];
var fourSideArray=new Array(); //四个方向的方块总数
//向上消除
if(col<x-1){
var upSprite=totalArray[col+1][row];
if(upSprite!=null && upSprite['color']==color){
fourSideArray.push(upSprite);
}
}
//向右消除
if(row<y-1){
var upSprite=totalArray[col][row+1];
if(upSprite!=null && upSprite['color']==color){
fourSideArray.push(upSprite);
}
}
//向下消除
if(col>0){
var upSprite=totalArray[col-1][row];
if(upSprite!=null && upSprite['color']==color){
fourSideArray.push(upSprite);
}
}
//向左消除
if(row>0){
var upSprite=totalArray[col][row-1];
if(upSprite!=null && upSprite['color']==color){
fourSideArray.push(upSprite);
}
}
return fourSideArray;
} //检测方块相同颜色区域
function checkSameColorStars(sprite){
if(sprite==null){
retrun;
}
var newSameArray=new Array(); //每次扩展新加入的方块总数
sameArray.push(sprite);
newSameArray.push(sprite);
while(newSameArray.length>0){
for(var i=0;i<newSameArray.length;i++){
var fourSide=checkOneStarFourSide(newSameArray[i]); //检测点击方块四周是否有相同的颜色的方块
if(fourSide.length>0){
for(var j=0;j<fourSide.length;j++){
if(!sameArray.contains(fourSide[j])){
sameArray.push(fourSide[j]);
newSameArray.push(fourSide[j]);
}
}
}
newSameArray.splice(i,1);
}
}
} //移除相同的方块
function removeSameColorStars(){
//相同颜色的方块是否大于1
var length=sameArray.length;
if(length>1){
for(var k=0;k<length;k++){
var simpleStar=sameArray[k];
if(simpleStar){
var col=simpleStar['col'];
var row=simpleStar['row'];
totalArray[col].splice(row,1,null);
document.getElementById('star'+col+''+row).style.background='none';
}
}
showMessage(length); //提示消息
var score=getScore(length); //每次消灭的总数
currentLevelScore=currentLevelScore+score; //当前关卡得分
totalScore=totalScore+score; //总分
//总分大于目标分 过关
if(totalScore>targetScore && !isShow){
isShow=true;
setShowMessage('恭喜过关!');
}
document.getElementById('currentLevelScore').innerHTML=currentLevelScore; //设置当前关卡得分
document.getElementById('totalScore').innerHTML=totalScore; //设置总分
}
sameArray=[];
fallStar(); //方块掉落
} //转换数组 获取第j列的数组
function getLtotalArray(j){
var LtotalArray=new Array();
for(var i=0;i<x;i++){
LtotalArray[i]=new Array();
if(totalArray[i][j]==null){
LtotalArray.splice(i,1,null);
}else{
LtotalArray[i]['color']=totalArray[i][j]['color'];
LtotalArray[i]['col']=totalArray[i][j]['col'];
LtotalArray[i]['row']=totalArray[i][j]['row'];
}
}
return LtotalArray;
} //方块掉落 填充空缺
function fallStar(){
for(var j=0;j<y;j++){
//循环得到每一列的数组
var sprites=getLtotalArray(j);
var length=sprites.length;
for(var i=0;i<length;i++){
var pSprite0=sprites[i];
//找到空方块
if(pSprite0==null){
var k=i+1;
while(k<length){
var upSprite=sprites[k];
if(upSprite!=null){
upSprite['col']=i;
upSprite['row']=j;
totalArray[i].splice(j,1,upSprite);
totalArray[k].splice(j,1,null);
sprites.splice(i,1,upSprite);
sprites.splice(k,1,null);
document.getElementById('star'+i+''+j).style.cssText='background:url('+upSprite['color']+'.gif) no-repeat;';
document.getElementById('star'+k+''+j).style.background='none';
k=length;
}
k++;
}
}
}
}
combineStar(); //向左合并方块
deadStar(); //检测死局
} //向左合并方块
function combineStar(){
for(var j=0;j<y;j++){
//循环得到每一列的数组
var sprites=getLtotalArray(j);
var mSprite0=sprites[0];
//如果底部有空方块就向左合并
if (mSprite0==null){
if(j<y-1){
var k=j+1;
while(k<y){
var upSprite=getLtotalArray(k);
var pSprite0=upSprite[0];
if(pSprite0!=null){
for(var i=0;i<upSprite.length;i++){
if(upSprite[i]!=null){
upSprite[i]['col']=i;
upSprite[i]['row']=j;
totalArray[i].splice(j,1,upSprite[i]);
totalArray[i].splice(k,1,null);
document.getElementById('star'+i+''+j).style.cssText='background:url('+upSprite[i]['color']+'.gif) no-repeat;';
document.getElementById('star'+i+''+k).style.background='none';
}
}
k=y;
}
k++;
}
}
}
}
} //检测死局
function deadStar(){
var isDead=true;
var deadCount=0; //剩余的方块个数
for(var j=0;j<y;j++){
var sprites=getLtotalArray(j);
var length=sprites.length;
for(var i=0;i<length;i++){
var pSprite0=sprites[i];
if(pSprite0!=null){
var fourSide=checkOneStarFourSide(pSprite0);
//还有可消灭的方块
if(fourSide.length>0){
isDead=false;
return;
}
}
}
}
//没有可消灭的方块
if(isDead){
for(var j=0;j<y;j++){
var sprites=getLtotalArray(j);
var length=sprites.length;
for(var i=0;i<length;i++){
var pSprite0=sprites[i];
if(pSprite0!=null){
deadCount++;
}
}
}
var score=getRewardsScore(deadCount); //获取最后奖励分数
if(score>0){
currentLevelScore=currentLevelScore+score; //当前关卡得分
totalScore=totalScore+score; //总分
document.getElementById('currentLevelScore').innerHTML=currentLevelScore; //设置当前关卡得分
document.getElementById('totalScore').innerHTML=totalScore; //设置总分
}
//剩余方块大于0
if(deadCount>0){
//总分大于目标分 过关
if(totalScore>targetScore){
currentLevel++; //关卡加1
targetScore=getTargetScore(); //获取当前关卡目标分
currentLevelScore=0; //当前得分清空
setShowMessage('剩余'+deadCount+'个方块,奖励'+score+'分!');
}else{
//游戏结束
currentLevel=1; //关卡清空
targetScore=getTargetScore(); //获取当前关卡目标分
currentLevelScore=0; //当前得分清空
//总分大于历史最高分
if(totalScore>bestScore){
bestScore=totalScore; //保存最高分
setCookie('starBestScore',bestScore,30);
}
totalScore=0; //总分清空
setShowMessage('游戏结束!');
}
}else{
//总分小于目标分
if(totalScore<targetScore){
var score=targetScore-totalScore; //获取最后奖励分数
currentLevelScore=currentLevelScore+score; //当前关卡得分
totalScore=totalScore+score; //总分
document.getElementById('currentLevelScore').innerHTML=currentLevelScore; //设置当前关卡得分
document.getElementById('totalScore').innerHTML=totalScore; //设置总分
}
currentLevel++; //关卡加1
targetScore=getTargetScore(); //获取当前关卡目标分
currentLevelScore=0; //当前得分清空
}
isShow=false;
starScore(); //初始化分数
starStar(); //初始化方块数组
starTable(); //初始化方块页面
}
}
</script>
</body>
</html>
消除类游戏(js版)的更多相关文章
- CCF2015122消除类游戏（C语言版）
问题描述 消除类游戏是深受大众欢迎的一种游戏,游戏在一个包含有n行m列的游戏棋盘上进行,棋盘的每一行每一列的方格上放着一个有颜色的棋子,当一行或一列上有连续三个或更多的相同颜色的棋子时,这些棋子都被消 ...
- ccf题库中2015年12月2号消除类游戏
题目如下: 问题描述 消除类游戏是深受大众欢迎的一种游戏,游戏在一个包含有n行m列的游戏棋盘上进行,棋盘的每一行每一列的方格上放着一个有颜色的棋子,当一行或一列上有连续三个或更多的相同颜色的棋子时,这 ...
- ccf消除类游戏
问题描述 消除类游戏是深受大众欢迎的一种游戏,游戏在一个包含有n行m列的游戏棋盘上进行,棋盘的每一行每一列的方格上放着一个有颜色的棋子,当一行或一列上有连续三个或更多的相同颜色的棋子时,这些棋子都被消 ...
- CCF CSP 201512-2 消除类游戏
CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201512-2 消除类游戏 问题描述 消除类游戏是深受大众欢迎的一种游戏,游戏在一个包含有n行 ...
- CSP201512-2：消除类游戏
引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...
- 用cocos2d-html5做的消除类游戏《英雄爱消除》(3)——游戏主界面
游戏主界面,同时也是主程序,包括sprite的生成加入以及游戏状态的控制. 下面同样贴下源码再讲解; /** * Power by html5中文网(html5china.com) * author: ...
- 用cocos2d-html5做的消除类游戏《英雄爱消除》(2)——Block设计实现
Block可以说是这个游戏的核心类,它除了包含自身的一些属性和方法外还添加了对触摸事件的响应. 我们先来看下源码吧 /** * Power by html5中文网(html5china.com) * ...
- 用cocos2d-html5做的消除类游戏《英雄爱消除》(1)——系统主菜单
系统主菜单如下图所示: 首先,介绍下这个主菜单,它包含了一个动画logo以及一个按钮选项,动画logo每隔1秒钟切换一张图片,点击相应的按钮选项会切换不同的游戏场景. 下面看下这个界面的源码: /** ...
- 用cocos2d-html5做的消除类游戏《英雄爱消除》——概述
在bbs.html5china.com论坛学习了MV和老马的小熊蘑菇后我也自己模仿他们做了这样子一个游戏,权当技术交流学习,现在附上游戏截图和源码. 游戏截图: 1.系统菜单界面: 2.游戏界面 3. ...
随机推荐
- python中的ValueError
在初学时候,会遇到这种错误,修改了代码,一一比对了代码,发现代码,没有错误,可是就是运行不了. 我们先从错误的语句来入手!(这显示了英语很重要) ValueError: need more tha ...
- Java 加解密技术系列文章
Java 加解密技术系列之 总结 Java 加解密技术系列之 DH Java 加解密技术系列之 RSA Java 加解密技术系列之 PBE Java 加解密技术系列之 AES Java 加解密技术系列 ...
- 父容器利用opacity设置透明后，子元素跟着变透明的解决方案
背景半透明,子元素不透明的效果经常需要用到.通常对父容器使用opacity属性时,子元素也跟着变透明,所以不妨设置父容器的 background-color:rgba(r,g,b,x); 其中x取值从 ...
- hdu4059 The Boss on Mars(差分+容斥原理)
题意: 求小于n (1 ≤ n ≤ 10^8)的数中,与n互质的数的四次方和. 知识点: 差分: 一阶差分: 设 则 为一阶差分. 二阶差分: n阶差分: 且可推出 性质: 1. ...
- [No0000AE]在 Visual Studio 中调试 XAML 设计时异常
在 Visual Studio 中进行 WPF, UWP, Silverlight 开发时,经常会遇到 XAML 设计器由于遭遇异常而无法正常显示设计器视图的情况.很多时候由于最终生成的项目在运行时并 ...
- SpringMVC(五) RequestMapping 请求参数和请求头
可以通过在@RequestMapping的params参数中设置可以传入的参数,且支持简单的表达式,如以下格式: @RequestMapping(value="helloRWorld&quo ...
- [原]在GeoServer中为OpenStreetMap数据设置OSM样式
转载请注明作者think8848和出处(http://think8848.cnblogs.com) 在前面几篇文章中,我们讲到了部署Postgresql,部署PostGis,部署GeoServer以及 ...
- [LeetCode] Combination Sum III 组合之和之三
Find all possible combinations of k numbers that add up to a number n, given that only numbers from ...
- C与指针（结构体指针，函数指针，数组指针，指针数组）定义与使用
类型 普通指针 指针数组(非指针类型) 数组指针 结构体指针 函数指针 二重指针 定义方式 int *p; int *p[5]; int (*p)[5]; int a[3][5]; struct{.. ...
- 处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”
原因: vs2010默认的是4.0框架,4.0的框架是独立的CLR,和2.0的不同,如果想运行4.0的网站,需要用aspnet_regiis注册4.0框架,然后用4.0的Class池,就可以运行4.0 ...