JS俄罗斯方块第二版

最新推荐文章于 2024-04-25 10:39:33 发布
最新推荐文章于 2024-04-25 10:39:33 发布
阅读量499 收藏
点赞数
分类专栏： javascript 文章标签： function table border float 游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/atmwjf/article/details/7219503
版权 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
#table {float:left}
#table tr{height:20px;}
#table tr td{width:20px;}
#yl {float:left;margin-left:10px;}
#yl tr{height:20px;}
#yl tr td{width:20px;}
</style>
</head>
<body οnkeydοwn="zhuan()" style="text-align: center">
<div style="width:350px;margin:0 auto;">
	<table border="1" id="table" cellspacing="0">
	</table>
	<table border="1" id="yl" cellspacing="0">
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
	</table>
	<table border="1" id="f" cellspacing="0" style="float:left;margin-left:10px;">
		<tr>
			<td> </td>
		</tr>
	</table>
</div>

<script type="text/javascript" charset="utf-8">
var fangkuai=new Array();
var a=new Array();
var map=new Array();
var tempmap=new Array();
var zhong;
var xzhong;
var xdx=4;
var xdy=0;
var fkg=0;
var fkk=0;
var fenshu=0;
var dingshiqi;

els();
function els()
{
	init();
	kuai();
	zaofangkuai();
	kuaitotemp();
	xianshi();
	xianshiyl();
	dingSi();
}

//构造表格
function init()
{
	var newtable=getId("table");
	var ntbody=document.createElement ("tbody"); 
	newtable.appendChild (ntbody); 
	for(var i=0;i<15;i++){
		var row=document.createElement ("tr"); 
		for(var j=0;j<10;j++){
			var cell=document.createElement ("td"); 
			cell.appendChild(document.createTextNode (" "));
			row.appendChild (cell); 
		}
	ntbody.appendChild (row); 
	}

	for(h=0;h<newtable.rows.length;h++)
	{
		map[h]=new Array();
		for(l=0;l<10;l++)
		{
			map[h][l]=0;
		}
	}
	tempmap=newtempmap();
	fen();
}

//造方块
function zaofangkuai()
{
	zhong=xzhong;
	xzhong=Math.floor(Math.random()*a.length);
	fangkuai=a[zhong];

	xianshiyl();
	getfkc(fangkuai);
}

//定义几种方块
function kuai()
{
	a[0]=new Array([1,1,1,1],[0,0,0,0],[0,0,0,0],[0,0,0,0]);
	a[1]=new Array([1,1,0,0],[1,1,0,0],[0,0,0,0],[0,0,0,0]);
	a[2]=new Array([1,1,1,0],[0,1,0,0],[0,0,0,0],[0,0,0,0]);
	a[3]=new Array([0,1,1,0],[1,1,0,0],[0,0,0,0],[0,0,0,0]);
	a[4]=new Array([1,0,0,0],[1,1,1,0],[0,0,0,0],[0,0,0,0]);
	a[5]=new Array([0,0,1,0],[1,1,1,0],[0,0,0,0],[0,0,0,0]);
	zhong=Math.floor(Math.random()*a.length);
	xzhong=Math.floor(Math.random()*a.length);
}

//键盘事件
function zhuan()
{
	document.documentElement.onkeydown = function(e){
		e = e||window.event;var ec = e.which||e.keyCode;
		switch(ec){
			case 38:shang();break;
			case 37:zuo();break;
			case 39:you();break;
			case 40:xia();break;
			default:break
		}
	};	
}
//键盘上
function shang()
{
		tempkuai=new Array([0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]);
		tempkuai=fangkuai;
		tempkuai=xuanzhuan(tempkuai);
		tempkuai=dingwei(tempkuai);
		getfkc(tempkuai);
		if(chujie(tempkuai) && chongdie(xdx,xdy,tempkuai))
		{
			fangkuai=tempkuai;
		}
		getfkc(fangkuai);
		kuaitotemp();
		xianshi();
}
function zuo()
{
	if(xdx-1>=0 && chongdie(xdx-1,xdy,fangkuai))
	{xdx--;}
	kuaitotemp();
	xianshi();
}
function you()
{
	if(xdx+fkk<10 && chongdie(xdx+1,xdy,fangkuai))
	{xdx++;}
	kuaitotemp();
	xianshi();
}
function xia()
{
	gaodu=getId("table");
	if(xdy+fkg<gaodu.rows.length && chongdie(xdx,xdy+1,fangkuai))
	{
		xdy++;
	}else{
		luoshi();
		xiaokuai();
		xdy=0;
		xdx=4;
		zaofangkuai();
	}
		kuaitotemp();
		xianshi();
}


//旋转函数
function xuanzhuan(kuais)
{
	tempkuai=new Array([0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]);
	for(h=0;h<4;h++)
	{
		for(l=0;l<4;l++)
		{
			tempkuai[h][l]=kuais[3-l][h];
		}
	}
	return tempkuai;
}

//旋转重定位
function dingwei(kuai)
{
	tempkuai=new Array([0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]);
	minx=4;
	miny=4;
	for(h=0;h<4;h++)
	{
		for(l=0;l<4;l++)
		{
			if(kuai[h][l]==1)
			{
				if(h<miny)
				{
					miny=h;
				}
				if(l<minx)
				{
					minx=l;
				}
			}
		}
	}
	for(h=0;h<4;h++)
	{
		for(l=0;l<4;l++)
		{
			if(kuai[h+miny][l+minx]=="")
			{
				tempkuai[h][l]=0;
			}else
			{
				tempkuai[h][l]=kuai[h+miny][l+minx];
			}
		}
	}
	return tempkuai;
}
//将生成的块装入移动数组
function kuaitotemp()
{
	tempmap=newtempmap();
	for(h=0;h<4;h++)
	{
		for(l=0;l<4;l++)
		{
			if(fangkuai[h][l]==1)
			{
				tempmap[h+xdy][l+xdx]=fangkuai[h][l];
			}
		}
	}
}
//落实
function luoshi()
{
	for(h=0;h<4;h++)
	{
		for(l=0;l<4;l++)
		{
			if(fangkuai[h][l]==1)
			{
				map[h+xdy][l+xdx]=fangkuai[h][l];
			
			}
		}
	}
}
//出界判断
function chujie(s)
{
	for(h=0;h<4;h++)
	{
		for(l=0;l<4;l++)
		{
			if(s[h][l]==1)
			{
				if(l+xdx>=10)
				{return false;}
			}
		}
	}
	return true;
}

//重叠判断
function chongdie(x,y,f)
{
	for(h=0;h<4;h++)
	{
		for(l=0;l<4;l++)
		{
			if(f[h][l]==1 &&  map[h+y][l+x]==1)
			return false;		
		}
	}
	return true;
}
//定时移动
function yidong()
{
	gaodu=getId("table");
	tempmap=newtempmap();
	if(xdy+fkg<gaodu.rows.length && chongdie(xdx,xdy+1,fangkuai))
	{
		xdy++;
	}else{
		luoshi();
		xiaokuai();
		xdy=0;
		xdx=4;
		zaofangkuai();
	}
	for(h=0;h<4;h++)
	{
		for(l=0;l<4;l++)
		{
			if(fangkuai[h][l]==1)
			tempmap[h+xdy][l+xdx]=fangkuai[h][l];		
		}
	}
	xianshi();
}
//消除方块
function xiaokuai()
{
	gaodu=getId("table");
	h=gaodu.rows.length-1;
	while(h>=0)
	{
		zongshu=0;
		for(l=0;l<10;l++)
		{
			if(map[h][l]==1)
			{
				zongshu++;
			}
		}
		if(zongshu==10)
		{
			fenshu=fenshu+10;
			fen()
			for(xh=h;xh>=0;xh--)
			{
				if(xh==0)
				{
					for(l=0;l<10;l++)
					{
						map[xh][l]=0;
					}
				}else{
					for(l=0;l<10;l++)
					{
						map[xh][l]=map[xh-1][l];
					}
				}
			}
			h=gaodu.rows.length-1;
		}else{
			h--;
		}
	}
}
//得到方块长度.宽度
function getfkc(f)
{
	fkg=0;
	fkk=0;
	for(h=0;h<4;h++)
	{
		for(l=0;l<4;l++)
		{
			if(f[h][l]==1)
			{
				if(h>=fkg)
				{
					fkg=h+1;
				}
				if(l>=fkk)
				{
					fkk=l+1;
				}
			}
		}
	}
}

//刷新移动数组
function newtempmap()
{
	newmap=new Array();
	gaodu=getId("table");
	for(h=0;h<gaodu.rows.length;h++)
	{
		newmap[h]=new Array()
		for(l=0;l<10;l++)
		{
			newmap[h][l]=0;
		}
	}
	return newmap;
}
//显示预览框方块
function xianshiyl()
{
	gaodu=getId("yl");
	for(h=0;h<4;h++)
	{
		for(l=0;l<4;l++)
		{
			if(a[xzhong][h][l]==1)
			{
				gaodu.rows[h].cells[l].style.background="#FF0000";
			}else
			{
				gaodu.rows[h].cells[l].style.background="#FFFFFF";				
			}
		}
	}
}
//显示游戏
function xianshi()
{
	gaodu=getId("table");
	for(h=0;h<gaodu.rows.length;h++)
	{
		for(l=0;l<10;l++)
		{
			if(map[h][l]==1 || tempmap[h][l]==1)
			{
				gaodu.rows[h].cells[l].style.background="#FF0000";
			}else
			{
				gaodu.rows[h].cells[l].style.background="#FFFFFF";				
			}
		}
	}
}
//判断游戏失败
function shibai()
{
	for(h=0;h<4;h++)
	{
		for(l=0;l<4;l++)
		{
			if(fangkuai[h][l]==1 &&  map[h+xdy][l+xdx]==1)
			return true;		
		}
	}
	return false;	
}

//显示分数
function fen()
{
	s=getId("f");
	s.rows[0].cells[0].innerHTML="得分："+fenshu;
}

function getId(a) 
{
	return document.getElementById(a);
}

function dingSi() 
{
	dingshiqi=setInterval("yidong()",700);
}

</script>
</body>
</html>

632423
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
俄罗斯方块网页版JS
11-20
俄罗斯方块2、键盘操作：系统缺省设置使用右边的窗口，用光标操作,"←"左移一格;"→"右移一格;"↑"旋转方块;↓ 方块丢下(方块下落到底)，"End"健可以一格格的下落，用户还可以自定义习惯的按键来操作游戏。 3、计分...
js版俄罗斯方块（二）
斌斌(Java)
03-27 2259
之前曾发过一个js版的俄罗斯方块，界面比较简单，Bug也不少。抽空重构了一下，加入了javaScript面向对象的知识，修复了一些明显的BUG。 斌斌 (给我写信) 原创博文（http://blog.csdn.net/binbinxyz），转载请注明出处！ 源码（下载：http://download.csdn.net/detail/binbinxyz/5186774）公开如下：
web前端 js写的俄罗斯方块
翟浩浩Android专栏
08-30 2241
效果图： 代码： html： html> html> head lang="en"> meta charset="UTF-8"> title>俄罗斯方块title> script src="js01Dia.js">script> head> body> body> html> js: /** * Created by hao on 2015/8/29
B站学习---js面向对象应用（俄罗斯方块游戏的实现）
belle_mei的博客
01-04 417
这是本人在B站学习上跟着老师做的一个小游戏—俄罗斯方块，里面的内容跟老师的视频几乎一样。 视频来源 https://www.bilibili.com/video/BV1Rv41147GP?p=10 采用的技术主要是JavaScript。 全部代码，本人也放在了gitee上了，这是国内的GitHub，速度比较快。 仓库地址，此地址短期内有效 https://gitee.com/jjm1/tetris 1.1 初始化布局 代码 //采用这样的形式是为了防止全局污染 (function () { wi
Javascript实现俄罗斯方块
qq_24293765的博客
04-07 3146
JS实现俄罗斯方块 视频教程： JavaScript开发俄罗斯方块 代码地址： Tetris-based-on-JS 1.初始化布局 我们设置Game为中介者类 你会发现我们的Game.js文件的最外层是用IIFE包裹起来的，因为我们需要知道实际工作中都是多个类进行并行开发的，由于为了上生产，会将代码进行打包部署，也就是将所有的js文件打包为个js文件，如果没有IIEF会造成作用域和命名的冲突，所以我们用IIFE隔离作用域。 (function () { window.Game = function (
俄罗斯方块(纯JavaScript)
ilovejsj001的专栏
01-04 893
 俄罗斯方块BODY{}.MB{    BACKGROUND-COLOR: firebrick;    CURSOR: default;    HEIGHT: 22px;    WIDTH: 22px}.SB{    BACKGROUND-COLOR: slategray;    CURSOR: default;    HEIGHT: 22px;    WIDTH: 22px}.BK{    BA
minetgm:扫雷x俄罗斯方块
05-23
扫雷x俄罗斯方块：TGM 与《俄罗斯方块TGM》起步相对困难并且变得越来越困难类似，此处的目标是提供一个版本，该版本需要解决多个难度不断增加的电路板。 生成的每个板在逻辑上都是可解决的，并且从开口开始。 第一次...
java俄罗斯方块源码-Tetris-SFML:使用C++和SFML库制作的俄罗斯方块
06-05
我的第二个选择是 Javascript。 我很难在两者之间做出决定。 俄罗斯方块是一款非常适合在浏览器中运行的游戏，Javascript 本身非常轻量级，不需要任何额外的（图形）库来显示游戏，因为您只需使用其内置画布即可。 ...
疯狂HTML 5+CSS 3+JavaScript讲义（第2版）+源代码
11-19
目录 第1章　HTML 5简介 1 ...第20章　HTML 5的疯狂俄罗斯方块 637 20.1　俄罗斯方块简介 638 20.2　开发游戏界面 639 20.3　俄罗斯方块的数据模型 640 20.4　实现游戏逻辑 644 20.5　本章小结 654
达内java培训目录
02-06
2.开班 2周内，贯穿着 Java 语言基础及 Java 面向对象的学习，学员将完成专业版的俄罗斯方块项目 3. 开班一个半月内，贯穿 JavaSE及数据库的学习将完成 T-DMS 数据 采集系统项目 • 整个系统由 DMS 采集端、DMS ...
用JS实现的俄罗斯方块
weixin_33813128的博客
06-13 85
一边练习一下javascript，一边搞的稍微有趣一点。这次的界面就是个table表格。其实所有的操作只要操作tabel的class就可以了。我这里把颜色直接用 cell.style.backgroundColor 来设置内联样式的属性了。完整代码如下，预先显示下一个方块的功能没做。Game Over也没有写。 <!DOCTYPE html> <html lang="en"&gt...
javascript 做的俄罗斯方块
12-24 386
俄罗斯方块BODY {BACKGROUND: black; MARGIN: 0px}TD {COLOR: #ffffff; FONT-FAMILY: 宋体; FONT-SIZE: 9pt; HEIGHT: 20px; WIDTH: 20px}#block_div {POSITION: absolute; WIDTH: 80px; Z-INDEX: 1}#table_div {POSITION: a
JS/Jquery版本的俄罗斯方块(附源码分析)
weixin_30267785的博客
03-18 167
转载于 http://blog.csdn.net/unionline/article/details/63250597且后续更新于此 1.前言 写这个jQuery版本的小游戏的缘由在于我想通过从零到有，自己写一个Jquery版本的游戏用来练手，没参考过其他人代码，这样子才不会影响自己的思路。 经历了V1，V2版本，当前版本是V3，版本说明如下： V1: Use two meth...
javascript俄罗斯方块
东南隅
07-23 1604
初学javascript，写了个简单的俄罗斯方块，但是有个问题一直解决不了，就是响应速度超慢。。这究竟是为什么呢？javascript没有给提供绘图的api，就学着网上的做法用talbe来画图，恰好俄罗斯方块绘图简单，而且所有图形都是方块组成的，于是每个方格用一个table。莫非是由于不断重绘这些talbe导致了程序速度如此之慢？当初用mfc写过一个类似的方块，同样的重绘频率，但程序速
Javascript写的俄罗斯方块
feng_sundy 的专栏
05-13 1135
Javascript写的俄罗斯方块俄罗斯方块BODY{}.MB{    BACKGROUND-COLOR: firebrick;    CURSOR: default;    HEIGHT: 22px;    WIDTH: 22px}.SB{    BACKGROUND-COLOR: slategray;    CURSOR: default;    HEIGHT: 22px;    WIDTH:
JS实现的简单俄罗斯方块
LOHAS的博客
09-16 392
写了个简单的俄罗斯方块儿游戏，算个笔记吧 关于在边界的图形转换还存在一些问题，待优化。 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>俄罗斯方块</title> <script type="text/javascri...
纯js实现俄罗斯方块[效率待优化]
想飞的鱼
12-28 793
var mapObject=null;var baseShapObject=null;var timeInterval=null;$(document).ready(function(){ mapObject=new MapClass(); mapObject.createMap();   createTable(mapObject);  baseShapObject=new BaseShapCl
html俄罗斯方块是实现原理,用JS实现的俄罗斯方块
weixin_29086203的博客
06-02 249
一边练习一下javascript，一边搞的稍微有趣一点。这次的界面就是个table表格。其实所有的操作只要操作tabel的class就可以了。我这里把颜色直接用 cell.style.backgroundColor 来设置内联样式的属性了。完整代码如下，预先显示下一个方块的功能没做。Game Over也没有写。俄罗斯方块p.tips {margin-top: 20px; text-align: c...
使用 Docker 自建一款怀旧游戏之 - 超级马里奥
最新发布
Toasten
04-25 469
《 超级马里奥 》（Super Mario）是任天堂公司创造的一款经典游戏系列，是世界上最知名、最成功的游戏之一。这个系列由日本设计师宫本茂于 1985 年创造，最初的游戏名为《超级马里奥兄弟》（Super Mario Bros.），推出后风靡全球。
JavaScript 俄罗斯方块
04-01
JavaScript 俄罗斯方块是一种在 Web 网页上运行的俄罗斯方块游戏。它利用了 JavaScript 语言的特性和 HTML、CSS 技术，实现了一个简单的游戏界面和游戏逻辑。 在 JavaScript 俄罗斯方块游戏中，玩家需要控制一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值