<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俄罗斯方块的更多相关文章

  1. 原生js俄罗斯方块

    效果图 方块定位原理通过16宫格定位坐标,把坐标存到数组中去 [ [[2,0],[2,1],[2,2],[1,2]],//L [[1,1],[2,1],[2,2],[2,3]], //左L [[2,0 ...

  2. js 俄罗斯方块源码，简单易懂

    1.自己引入jquery <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. 纯JS实现俄罗斯方块，打造属于你的游戏帝国

    纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...

  4. 使用JS实现俄罗斯方块游戏

    简单的JS俄罗斯方块游戏源码 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&q ...

  5. 用纯JS做俄罗斯方块 - 简要思路介绍（1）

    大家都知道俄罗斯方块是一款大众化的游戏了,我很小的时候就玩过,今年已经25岁了,可以说俄罗斯方块确实是历史悠久,做俄罗斯方块是我上个星期开始的想法.也许是由于自己从来没有写过这种东西吧,所以有生疏.代 ...

  6. JS/Jquery版本的俄罗斯方块(附源码分析)

    转载于http://blog.csdn.net/unionline/article/details/63250597 且后续更新于此 1.前言 写这个jQuery版本的小游戏的缘由在于我想通过从零到有 ...

  7. 俄罗斯方块（JS+CSS）

    这是一个用 js + css 写的网页版俄罗斯方块. 具体代码与示例可访问我的另一个博客查看,源码与示例.

  8. js手写俄罗斯方块

    代码如下 html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  9. d3.js 制作简单的俄罗斯方块

    d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏--俄罗斯方块.话不多说先上图片. 1. js tetris类 由于方法拆分 ...

随机推荐

  1. hdu 4707 bellman

    最短路的优先队列做法: #include<stdio.h> #include<queue> #include<string.h> #define N  100010 ...

  2. Spring Boot静态资源处理

    Spring Boot静态资源处理 8.8 Spring Boot静态资源处理 当使用Spring Boot来开发一个完整的系统时,我们往往需要用到前端页面,这就不可或缺地需要访问到静态资源,比如图片 ...

  3. RDS for MySQL Online DDL 使用

    https://help.aliyun.com/knowledge_detail/41733.html?spm=5176.7841698.2.17.u67H3h

  4. 【Hibernate学习】 ——ORM（四）再次认识实体继承

    在信用办时.做失信.守信.黑名单这一块的时候.先把原来的需求看了看.紧接着就開始设计实体,这一块大部分都是同样的信息,所以就设计了一个实体,而且用一个状态标识出来是失信.守信还是黑名单. 在之后的改动 ...

  5. 苹果的编程语言--Swift

    今天(2014-6-3)凌晨WWDC2014揭幕了,带来了新语言Swift,据说非常牛逼...所以就找了几个不错的link跟大家分享. 1.Swift的简单介绍,主要介绍了Swift的简单而经常使用的 ...

  6. 怎样使用ListView实现一个带有网络请求，解析，分页，缓存的公共的List页面来大大的提高工作效率

    在寻常的开发中常常会有非常多列表页面.每做一个列表页就须要创建这个布局文件那个Adapter适配器文件等等一大堆与之相关的附属的不必要的冗余文件. 假设版本号更新迭代比較频繁,如此以往,就会使项目pr ...

  7. HibernateBaseDAO

    HibernateBaseDAO接口 package com.iotek.homework.dao; import java.io.Serializable; import java.util.Lis ...

  8. kafka的topic和分区策略——log entry和消息id索引文件

    Topic在逻辑上可以被认为是一个在的queue,每条消费都必须指定它的topic,可以简单理解为必须指明把这条消息放进哪个queue里. 为了使得Kafka的吞吐率可以水平扩展,物理上把topic分 ...

  9. python 10：len(list)（获取列表长度）以及负访问性

    bicycles = ['trek', 'cannondale', 'redline', 'specialized'] print(len(bicycles)) #获取某列表长度,即列表元素个数 pr ...

  10. PHP序列化 反序列化

    序列化是将变量转换为可保存或传输的字符串的过程:反序列化就是在适当的时候把这个字符串再转化成原来的变量使用.这两个过程结合起来,可以轻松地存储和传输数据,使程序更具维护性. 1. serialize和 ...