js俄罗斯方块


<html>
<style>.c {margin :1px;width:19px;height:19px;background:red;position:absolute;}
.d {margin :1px;width:19px;height:19px;background:gray;position:absolute;}
.f {top:0px;left:0px;background:black;position:absolute;}
</style>
<body></body><html>
<script>
var over=false,shapes=("0,1,1,1,2,1,3,1;1,0,1,1,1,2,2,2;2,0,2,1,2,2,1,2;0,1,1,1,1,2,2,2;1,2,2,2,2,1,3,1;1,1,2,1,1,2,2,2;0,2,1,2,1,1,2,2").split(";");
function create(tag,css){
var elm=document.createElement(tag);
elm.className = css;
document.body.appendChild(elm);
return elm;}
function Tetris(c, t, x, y){
var c=c?c:"c";
this.divs = [create("div",c),create("div",c),create("div",c),create("div",c)];
this.reset = function(){
this.x = typeof x != ‘undefined‘?x:3;
this.y = typeof y != ‘undefined‘?y:0;
this.shape = t?t:shapes[Math.floor(Math.random()*(shapes.length-0.00001))].split(",");
this.show();
if(this.field&&this.field.check(this.shape,this.x,this.y,‘v‘)==‘D‘){
over=true;
this.field.fixShape(this.shape,this.x,this.y);
alert(‘game over‘);}}
this.show = function(){
for(var i in this.divs){
this.divs[i].style.left = (this.shape[i*2]*1+this.x)*20+‘px‘;
this.divs[i].style.top = (this.shape[i*2+1]*1+this.y)*20+‘px‘;}}
this.field=null;
this.hMove = function(step){
var r = this.field.check(this.shape,this.x- -step,this.y,‘h‘);
if(r!=‘N‘&&r==0){
this.x-=-step;
this.show();}}
this.vMove = function(){
if(this.field.check(this.shape,this.x,this.y- -1,‘v‘)==‘N‘){
this.y++;
this.show();}
else{
this.field.fixShape(this.shape,this.x,this.y);
this.field.findFull();
this.reset();}}
this.rotate = function(){
var s=this.shape;
var newShape=[3-s[1],s[0],3-s[3],s[2],3-s[5],s[4],3-s[7],s[6]];
var r = this.field.check(newShape,this.x,this.y,‘h‘);
if(r==‘D‘)return;
if(r==0){
this.shape=newShape;
this.show();}
else if(this.field.check(newShape,this.x-r,this.y,‘h‘)==0){
this.x-=r;
this.shape=newShape;
this.show();}}
this.reset();}
function Field(w,h){
this.width = w?w:10;
this.height = h?h:20;
this.show = function(){
var f = create("div","f")
f.style.width=this.width*20+‘px‘;
f.style.height=this.height*20+‘px‘;}
this.findFull = function(){
for(var l=0;l<this.height;l++){
var s=0;
for(var i=0;i<this.width;i++){
s+=this[l*this.width+i]?1:0;}
if(s==this.width){
this.removeLine(l);}}}
this.removeLine = function(line){
for(var i=0;i<this.width;i++){
document.body.removeChild(this[line*this.width+i]);}
for(var l=line;l>0;l--){
for(var i=0;i<this.width;i++){
this[l*this.width- -i]=this[(l-1)*this.width- -i];
if(this[l*this.width- -i])this[l*this.width- -i].style.top = l*20+‘px‘;}}}
this.check = function(shape, x, y, d){
var r1=0,r2=‘N‘;
for(var i=0;i<8;i+=2){
if(shape[i]- -x < 0 && shape[i]- -x <r1)
{r1 = shape[i]- -x;}
else if(shape[i]- -x>=this.width && shape[i]- -x>r1)
{r1 = shape[i]- -x;}
if(shape[i+1]- -y>=this.height || this[shape[i]- -x- -(shape[i+1]- -y)*this.width])
{r2=‘D‘}}
if(d==‘h‘&&r2==‘N‘)return r1>0?r1-this.width- -1:r1;
else return r2;}
this.fixShape = function(shape,x,y){
var d=new Tetris("d",shape,x,y);
d.show();
for(var i=0;i<8;i+=2){
this[shape[i]- -x- -(shape[i+1]- -y)*this.width]=d.divs[i/2];}}}
var f = new Field();
f.show();
var s = new Tetris();
s.field = f;
s.show();
window.setInterval("if(!over)s.vMove();",500);
document.onkeydown = function(e){
if(over)return;
var e = window.event ? window.event : e;
switch(e.keyCode){
case 38: //up
s.rotate();
break;
case 40: //down
s.vMove();
break;
case 37: //left
s.hMove(-1);
break;
case 39: //right
s.hMove(1);
break;}}
</script>

js俄罗斯方块

时间: 2024-10-28 08:29:47

js俄罗斯方块的相关文章

js 俄罗斯方块

纯JS实现俄罗斯方块,打造属于你的游戏帝国 纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏,它由俄罗斯人阿列克谢·帕基特诺夫发明,故得此名.俄罗斯方块的基本规则是移动.旋转和摆放游戏自动输出的各种方块,使之排列成完整的一行或多行并且消除得分.由于上手简单.老少皆宜,从而家喻户晓,风靡世界.那么,我们的问题来了,学挖掘机技术哪家强? 俄罗斯方块可

俄罗斯方块实现

废话都就不多说了,直接贴代码 <!DOCTYPE html>  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>JS俄罗斯方块-练习</title>  <st

CSS+js打造的网页版俄罗斯方块游戏

<HTML> <SCRIPT> parent.moveTo((screen.width-775)/2,(screen.height-540)/2); parent.resizeTo(775,540) </SCRIPT> <HEAD> <META NAME="Title" CONTENT="JScript Simple Tetris"> <TITLE>CSS+js打造的网页版俄罗斯方块游戏丨石家庄

HTML+JS版本的俄罗斯方块

<!doctype html><html><head></head><body> <div id="box" style="width:252px;font:25px/25px 宋体;background:#000;color:#9f9;border:#999 20px ridge;text-shadow:2px 3px 1px #0f0;"></div> <script>

用纯JS做俄罗斯方块 - 简要思路介绍(1)

大家都知道俄罗斯方块是一款大众化的游戏了,我很小的时候就玩过,今年已经25岁了,可以说俄罗斯方块确实是历史悠久,做俄罗斯方块是我上个星期开始的想法.也许是由于自己从来没有写过这种东西吧,所以有生疏.代码的话,只完成了一小部分,大概1/5左右吧.今天还是决定先写一部分思路. 至于俄罗斯方块的话,有很多的难点,如果有JS去写的话,要考虑到碰撞啊,边界啊,下落等问题,本文这些问题大部分不会考虑到,只是提供一部分思路而已,开始已经说了,因为自己还没写完这个游戏,但是又出于想写博客记录,所以才有了这一系列

JS 写的俄罗斯方块游戏

http://www.htmleaf.com/html5/html5youxi/201501201236.html https://github.com/Aerolab/blockrain.js/blob/gh-pages/src/blockrain.jquery.src.js <!doctype html> <html lang="zh"> <meta charset="UTF-8"> <link rel="st

JS编写的俄罗斯方块

IEEE Spectrum 杂志发布了一年一度的编程语言排行榜,这也是他们发布的第四届编程语言 Top 榜. 据介绍,IEEE Spectrum 的排序是来自 10 个重要线上数据源的综合,例如 Stack Overflow.Twitter.Reddit.IEEE Xplore.GitHub.CareerBuilder 等,对 48 种语言进行排行. 与其他排行榜不同的是,IEEE Spectrum 可以让读者自己选择参数组合时的权重,得到不同的排序结果.考虑到典型的 Spectrum 读者需求

用JS实现的俄罗斯方块

一边练习一下javascript,一边搞的稍微有趣一点.这次的界面就是个table表格.其实所有的操作只要操作tabel的class就可以了.我这里把颜色直接用 cell.style.backgroundColor 来设置内联样式的属性了.完整代码如下,预先显示下一个方块的功能没做.Game Over也没有写. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q

JS实现——俄罗斯方块

把以下代码保存成Tetris.html文件,使用Google或360浏览器打开 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="charset-8"/> <title> new doc