js 实现俄罗斯方块（三）
我又来啦！上一篇有点水，本篇我们来干货！
嘿嘿，首先我们先搭建游戏世界------网格
所有的操作包括左移右移下移旋转都是在这个网格中
既然是使用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 实现俄罗斯方块（三）的更多相关文章
- 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...
- 研究分析JS中的三种逻辑语句
JS中的三种逻辑语句:顺序.分支和循环语句. 一.顺序语句 代码规范如下:1. <script type="text/javascript"> var a = 10; ...
- js中事件三阶段
js中事件三阶段 先贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 使用JS实现俄罗斯方块游戏
简单的JS俄罗斯方块游戏源码 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&q ...
- js中的三种函数写法
js中的三种函数写法 <script type="text/javascript"> //普通的声明方式 function myFun(m,n){ alert(m+n) ...
- JS笔记（三）：函数与对象
镇楼图 Pixiv:torino 四.Function类型 Rest语法 一些函数如Math.max可以支持任意数量的参数,JS中对于这样的参数可以简单使用...来实现,使用剩余参数,它支持收集剩余的 ...
- node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
- 小兔JS教程（三）-- 彻底攻略JS回调函数
这一讲来谈谈回调函数. 其实一句话就能概括这个东西: 回调函数就是把一个函数当做参数,传入另一个函数中.传进去的目的仅仅是为了在某个时刻去执行它. 如果不执行,那么你传一个函数进去干嘛呢? 就比如说对 ...
- JS原生第三篇 （帅哥）
1.1 数 组 1. 数组 看电影 电影院 座位 大的变量 里面可以放很多的值 var arr = [1,3,57]; var ar = new Array(); ...
- 纯JS实现俄罗斯方块，打造属于你的游戏帝国
纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...
随机推荐
- 记一次 .NET某工厂报警监控设置 崩溃分析
一:背景 1. 讲故事 前些天有位朋友在微信上丢了一个崩溃的dump给我,让我帮忙看下为什么出现了崩溃,在 Windows 的事件查看器上显示的是经典的 访问违例 ,即 c0000005 错误码,不管 ...
- 在线HMAC加密工具
在线HMAC加密工具提供一站式服务,支持MD5至SHA512.RIPEMD160及SM3等多种哈希算法,用户可便捷选择算法并生成安全的HMAC散列值,确保消息完整性与验证来源.适用于开发调试.网络安全 ...
- Qt 应用程序中自定义鼠标光标
在 Qt 应用程序中,你可以自定义鼠标光标.你可以使用 `QCursor` 类来设置不同类型的鼠标光标,比如内置样式或者自定义的图片.以下是一些使用示例: 使用内置光标样式 Qt 提供了一些内置的光标 ...
- Prometheus监控系统（一）Prometheus介绍
1. Prometheus简介 Prometheus受启发于Google的Brogmon监控系统(类似kubernetes是从Google的Brog系统演变而来).于2012年以开源形式发布,在201 ...
- vue+thinkphp5实现微信扫码支付(NATIVE支付)
前言 统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单,返回预支付订单号的接口,目前微信支付所有场景均使用这一接口.下面介绍的是其中NATIVE的支付实现流程与PC端实现扫码支付流 ...
- 计算订单签收率的sql查询思路与过程(涉及百分比和四舍五入)
领导提出一个签收率需求,想要通过数据库达到excel中表现的形式,提高计算速度和工作效率, 如下形式: 数据库中表数据结构: 部分数据如下: sql语句思路如下: -- 1.已签收:以物流反馈管道,状 ...
- 从安装到配置，教你用Argo CD对接CCE集群完成测试、生产部署
本文分享自华为云社区<Argo CD对接CCE完成不同测试.生产环境业务部署>,作者: 可以交个朋友. 一 背景说明 Argo CD是用于Kubernetes的声明性GitOps持续交付工 ...
- Java反射机制原理详解
什么是反射? Java反射机制的核心是在程序运行时动态加载类并获取类的详细信息,从而操作类或对象的属性和方法.本质是JVM得到class对象之后,再通过class对象进行反编译,从而获取对象的各种信息 ...
- Java 集合元素排序接口Comparable
什么是Comparable public interface Comparable<T> { /** * Compares this object with the specified o ...
- Mysql的Innodb和MyISAM引擎的区别
区别项 Innodb MyISAM 事务 支持 不支持 锁粒度 行锁,适合高并发 表锁,不适合高并发 是否默认 默认 非默认 支持外键 支持外键 不支持 适合场景 读写均衡,写 ...