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

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

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

既然是使用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. 在Ubuntu系统安装Anaconda及Python

      本文介绍在Linux Ubuntu操作系统的电脑中,安装Anaconda环境与Python语言的方法.   在之前的文章Anaconda与Python环境在Windows中的部署中,我们介绍了在W ...

  2. MoneyPrinterPlus:AI自动短视频生成工具-微软云配置详解

    MoneyPrinterPlus可以使用大模型自动生成短视频,我们可以借助Azure提供的语音服务来实现语音合成和语音识别的功能. Azure的语音服务应该是我用过的效果最好的服务了,微软还得是微软. ...

  3. SERSYNC服务

    inotiry图片参考 sersync图片参考 inotify文字教程 该软件对系统有要求,内核2.6以上,并且有如下目录,后面会讲解三个文件用途 [root@jokerpro ~]# uname - ...

  4. 动环监控方案，为什么推荐79元全志T113-i国产平台？

    什么是动环监控系统? 通信电源及机房环境监控系统(简称"动环监控系统"),是对分布在各机房的电源柜.UPS.空调.蓄电池等多种动力设备,及门磁.红外.窗破.水浸.温湿度.烟感等机房 ...

  5. 【Redis】BigKey问题

    面试题 海量数据里查询某一固定前缀的key 生产上如何限制 keys * / flushdb / flushall 等危险命令以防止误删误用? MEMORY USAGE 命令用过吗? BigKey问题 ...

  6. win10彻底关闭windows defender，解决无故占用大量CPU问题

    win10彻底关闭defender的方法 首先右键开始菜单按钮,点击"运行",输入"gpedit.msc",打开"本地组策略编辑器". 依次 ...

  7. 解决php提示Maximum execution time of 30 seconds exceeded错误

    如何解决错误? 基本上,有3种方法可以处理此错误: 修改php配置文件php.ini文件 使用 ini_set() 函数 使用set_time_limit()函数 1)修改php配置文件php.ini ...

  8. 014_用vim复制粘贴_保持双手正位

    [oeasy]python0014_用vim复制粘贴_保持双手正位 继续运行 回忆上次内容 程序员 还是 很可爱的 要关心 身边的程序员 啊 毕竟是新时代的 典型新职业     文明 主流职业 血型 ...

  9. .NET科普：.NET简史、.NET Standard以及C#和.NET Framework之间的关系

    最近在不少自媒体上看到有关.NET与C#的资讯与评价,感觉大家对.NET与C#还是不太了解,尤其是对2016年6月发布的跨平台.NET Core 1.0,更是知之甚少.在考虑一番之后,还是决定写点东西 ...

  10. 英伟达又向开源迈了一步「GitHub 热点速览」

    大家是否还记得 2012 年,Linux 之父 Linus Torvalds 在一次活动中"愤怒"地表达了对英伟达闭源 Linux GPU 驱动的不满?这个场景曾是热门表情包,程序 ...