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

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

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

既然是使用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. discuz论坛个人空间自定义css样式

    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` discuz论坛个人空间自定义css样式 日期:2020- ...

  2. 高通LCD开发常见问题&分析

    reference : https://blog.csdn.net/sinat_34606064/article/details/77921323 https://www.cnblogs.com/bi ...

  3. 【仿真】Carla之Docker 运行 及 渲染相关 [6]

    参考与前言 carla官方对于docker 运行的描述: CARLA in Docker Docker的使用:[暂时没贴] 相关已知issue,欢迎补充 https://github.com/carl ...

  4. 【Grafana】Grafana模板自定义-1-创建选择框

    如何创建选择框 第一步:编辑模板 第二步:配置变量 配置说明: General: [Name]变量名,后面模板中如果要按条件筛选,会用到这个变量名. [Type]类型,目前没仔细研究,使用默认的Que ...

  5. Java进阶：HashMap底层原理（通俗易懂篇）

    1.底层结构 Java 7及之前版本 在Java 7及之前的版本中,HashMap的底层数据结构主要是数组加链表.具体实现如下: 数组:HashMap的核心是一个Entry数组(Entry<K, ...

  6. AT_abc215F 题解

    考虑二分答案. 假设当前二分的答案为 \(k\),那么对于每个点,距离大于等于 \(k\) 的点构成了平面上 \(4\) 个子平面. 那么只需查询子平面中是否存在点即可,类似于窗口的星星,把问题转换成 ...

  7. podman安装mysql容器

    前言 mysql如果正式安装,卸载起来比较麻烦.如果是自己测试用的话,可以用podman拉取一个镜像来使用. 这里使用的是mysql5.7版本,对应的docker镜像是mysql:5.7 (如果拉取较 ...

  8. SSM配置文件分类及总结

    配置组件通常涉及以下几个方面 数据访问配置 配置数据源.JdbcTemplate.事务管理器等,以支持数据库操作. 服务层与DAO层配置 定义服务类和服务实现类.数据访问对象(DAO)的bean,以及 ...

  9. yb课堂 前端项目技术组件概述 《三十》

    常用的技术组件的作用 学前必备基础:HTML.CSS.JavaScript.Vue基础知识 Vue:用于构建用户界面的渐进式JavaScript框架 什么是Cube-UI 基于Vue.js实现的精致移 ...

  10. MyBatis-Plus 整理

    # 前言 代码生成器插件选择去这里:https://www.cnblogs.com/zixq/p/16726534.html 相关插件在那里面已经提到了 # 上手 MyBatis-Plus 是一个 M ...