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

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

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

既然是使用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. vue.config.js配置优化

    vue.config.js完整代码如下: 'use strict'; // Template version: 1.3.1 // see http://vuejs-templates.github.i ...

  2. Go语言中Kill子进程的正确姿势

    场景 我们在编写部署系统的时候,通常需要在机器上部署一个agent,用来执行部署脚本,为了防止部署脚本写的有问题,长时间hang住,我们通常会为脚本的执行设置一个超时时间,到了时间之后就kill掉该脚 ...

  3. CF1854E Games Bundles

    乱搞题 设个 \(dp[i]\) 表示和为 \(i\) 的子序列个数,那么转移是容易的, \(dp[j]+=dp[j-i]\) ,然后就判下 \(dp[60]+dp[60-i]\) 是否大于 \(m\ ...

  4. Linux的访问权限详解

    题目 解读访问权限 rw-r--r--分别代表什么东西 r:代表可读 w:可写 e:可执行 方便起见进行拆分 rw- 代表文件所属用户的权限 r-- 代表同组用户的权限 r-- 代表其他用户的权限 同 ...

  5. Linux Centos7搭建RabbitMQ

    下载依赖 yum -y install epel-release yum -y update 安装Erlang yum -y install erlang socat 测试安装成功 erl -vers ...

  6. Oracle自定义数据类型

    1 CREATE OR REPLACE FUNCTION split(p_str IN clob, 2 p_delimiter IN VARCHAR2 default (',') --分隔符,默认逗号 ...

  7. 最近很火的Vue Vine是如何实现一个文件中写多个组件

    前言 在今年的Vue Conf 2024大会上,沈青川大佬(维护Vue/Vite 中文文档)在会上介绍了他的新项目Vue Vine.Vue Vine提供了全新Vue组件书写方式,主要的卖点是可以在一个 ...

  8. 机器学习策略篇：详解数据分布不匹配时，偏差与方差的分析（Bias and Variance with mismatched data distributions）

    详解数据分布不匹配时,偏差与方差的分析 估计学习算法的偏差和方差真的可以帮确定接下来应该优先做的方向,但是,当训练集来自和开发集.测试集不同分布时,分析偏差和方差的方式可能不一样,来看为什么. 继续用 ...

  9. [oeasy]python0007-Guido的简历

    ​ 执行 esc 退回到正常模式 ​ 编辑 esc退出插入模式 准备底行命令模式运行当前py文件 保存执行 ​:w|!python3 %​ 保存并用 python3 解释当前程序(%) ​ 编辑 可以 ...

  10. Nuxt.js 中使用 useHydration 实现数据水合与同步

    title: Nuxt.js 中使用 useHydration 实现数据水合与同步 date: 2024/7/18 updated: 2024/7/18 author: cmdragon excerp ...