我又来啦！上一篇有点水，本篇我们来干货！

嘿嘿，首先我们先搭建游戏世界------网格

所有的操作包括左移右移下移旋转都是在这个网格中

既然是使用js来写当然跑不了html啦，实现网格最简单的

方法就是用html的表格了！那么：

第一步：画表格（画一个长宽相等的表格）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            #board tr td{

                width: 20px;

                height: 20px;

            }

            #main{

                float: left;

            }  

        </style>

        <script src="js/jquery-1.6.4.js"></script>

    </head>

    <body>

        <table id="board" cellspacing=0 cellpadding=0 border=1 style="border-collapse:collapse;">    

        </table>

    </body>

    <script>

        /*上面代码画格子*/

        var line = 30;//行数

        var size = 20;//列数

           for(i=0; i<line; i++){

               var tr = tr + "<tr>";

               var td = "";

               for(j=0; j<size; j++){

                td =td + "<td></td>";

               }

               tr =tr+td+"</tr>";

           }

           html = tr;

           $("#board").append(html);

           </script>

</html>

好啦！快看看效果~是不是感觉已经做好一半了嘛！嘿嘿

下面我们要准备基本图形啦！

首先，我们先来个“点”：

怎么实现呢？

很简单我们先来分析下吧~

通过代码我们知道我用js画了一个30行20列的表格我们通过样式限制了

表格长宽相同，这样就是一个正方形了。

然后我们通过对行列的操作就可以显示出各种不同的形状了！比如上图我们让第10行第10列

的方块的背景换成红色。这就是一个基础图形的元素了！下面我们来画基础图形吧~

首先画一个坐标系：

箭头标注点为原点（0,0）

沿着箭头方向依次增大X或者Y。有了这个规则我们就可以画出来基本图形了！

首先来个简单的：

很明显这是4个点连成一条线构成的，我们从（0，0）点开始

那么这个图形就是这样一组数组：

（0,0）

（0,1）

（0,2）

（0,3）

画好后整体向右平移（只要全体x+固定值就好了）

假设向右平移3个格子坐标：

（0，3）

（0，4）

（0，5）

（0，6）

同理 我们就可以得到 其他图形样式了 ！

大家加油！~~

js 实现俄罗斯方块（三）的更多相关文章

  1. 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

    原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...

  2. 研究分析JS中的三种逻辑语句

    JS中的三种逻辑语句:顺序.分支和循环语句. 一.顺序语句 代码规范如下:1. <script type="text/javascript"> var a = 10;  ...

  3. js中事件三阶段

    js中事件三阶段 先贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

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

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

  5. js中的三种函数写法

    js中的三种函数写法 <script type="text/javascript"> //普通的声明方式 function myFun(m,n){ alert(m+n) ...

  6. JS笔记（三）：函数与对象

    镇楼图 Pixiv:torino 四.Function类型 Rest语法 一些函数如Math.max可以支持任意数量的参数,JS中对于这样的参数可以简单使用...来实现,使用剩余参数,它支持收集剩余的 ...

  7. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  8. 小兔JS教程（三）-- 彻底攻略JS回调函数

    这一讲来谈谈回调函数. 其实一句话就能概括这个东西: 回调函数就是把一个函数当做参数,传入另一个函数中.传进去的目的仅仅是为了在某个时刻去执行它. 如果不执行,那么你传一个函数进去干嘛呢? 就比如说对 ...

  9. JS原生第三篇 （帅哥）

    1.1 数 组 1. 数组           看电影    电影院  座位 大的变量     里面可以放很多的值 var  arr = [1,3,57]; var ar = new Array(); ...

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

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

随机推荐

  1. 一个简单可分享的web数据透视分析

    我推荐一个简单可分享的在线数据透视分析网站,首先看效果: 在线数据透视展示 用户上传一个Excel或csv文件后,把指标拖拽到左右两侧,再选择合适的分析方式,在中间展示区域就会出现分析数据或者图形了, ...

  2. flutter+Springboot的结合

    我们团队的开发 前端采用flutter 后端采用spring boot 首先 完成了app的图标名字的修改 在app/src/main/res/mipmap 目录中 存放app图标 图片 在Andro ...

  3. Spring之webMvc异常处理

    异常处理可以前端处理,也可以后端处理. 从稳妥的角度出发,两边都应该进行处理. 本文专门阐述如何在服务端进行http请求异常处理. 一.常见的异常类型 当我们做http请求的时候,会有各种各样的可能错 ...

  4. xshell+ssh+网络+加密

    使用xshell+ssh用于管理linux服务器,大概是目前最为流行的方式. 这个工具和技术涉及到: 计算机网络 加密解密 虽然不是专门的系统工程师,但还是相对频繁使用这套工具,有时候难免遇到一些不知 ...

  5. mysql数据迁移-8.0.25

    本文只简单描述一些逻辑迁移的问题,而且主要是针对开发过程中,小批量数据(例如100m之下的). 这几天装了个新的mysql8.0.25 64bit windows版本的. -- 看的出来oracle公 ...

  6. Java 把多个音频拼接成一个

    在Java中,将多个音频文件拼接成一个通常需要使用一些专门的音频处理库,因为Java标准库并不直接支持音频文件的合并.一个常用的库是JAVE2(Java Audio Video Encoder)或JL ...

  7. Go 如何对多个网络命令空间中的端口进行监听

    Go 如何对多个网络命令空间中的端口进行监听 需求为 对多个命名空间内的端口进行监听和代理. 刚开始对 netns 的理解不够深刻,以为必须存在一个新的线程然后调用 setns(2) 切换过去,如果有 ...

  8. HTTP常见的状态码？

    100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息 200 OK 正常返回信息 201 Created 请求 ...

  9. null 和 undefined 的区别？

    null 表示一个对象被定义了,值为"空值":undefined 表示不存在这个值.(1)变量被声明了,但没有赋值时,就等于undefined. (2) 调用函数时,应该提供的参数 ...

  10. yb课堂之用户下单模块开发 《十四》

    开发用户下单购买视频接口 VideoOrder模块下单接口开发 VideoOrderController.java package net.ybclass.online_ybclass.control ...