javascript实现俄罗斯方块游戏的思路和方法


Posted in Javascript onApril 27, 2015

观摩一下《编程之美》:“程序虽然很难写,却很美妙。要想把程序写好,需要写好一定的基础知识,包括编程语言、数据结构与算法。程序写得好,需要缜密的逻辑思维能力和良好的梳理基础,而且熟悉编程环境和编程工具。”

学了几年的计算机,你有没有爱上编程。话说,没有尝试自己写过一个游戏,算不上热爱编程。

俄罗斯方块曾经造成的轰动与造成的经济价值可以说是游戏史上的一件大事,它看似简单但却变化无穷,令人上瘾。相信大多数同学,曾经为它痴迷得茶不思饭不想。

游戏规则

1、一个用于摆放小型正方形的平面虚拟场地,其标准大小:行宽为10,列高为20,以每个小正方形为单位。

2、一组由4个小型正方形组成的规则图形,英文称为Tetromino,中文通称为方块共有7种,分别以S、Z、L、J、I、O、T这7个字母的形状来命名。

javascript实现俄罗斯方块游戏的思路和方法

I:一次最多消除四层

J(左右):最多消除三层,或消除二层

L:最多消除三层,或消除二层

O:消除一至二层

S(左右):最多二层,容易造成孔洞

Z (左右):最多二层,容易造成孔洞

T:最多二层

方块会从区域上方开始缓慢继续落下。玩家可以以90度为单位旋转方块,以格子为单位左右移动方块,让方块加速落下。方块移到区域最下方或是着地到其他方块上无法移动时,就会固定在该处,而新的方块出现在区域上方开始落下。当区域中某一列横向格子全部由方块填满,则该列会消失并成为玩家的得分。同时删除的列数越多,得分指数上升。

分析与解法

每块方块落下的过程中,我们可以做:

1)旋转到合适的方向

2)水平移动到某一列

3)垂直下落到底部

首先,需要用一个二维数组,area[18][10]表示18*10的游戏区域。其中,数组中值为0表示空,1表示有方块。

方块一共7种,每种有4种方向。定义activeBlock[4],在编译之前这个数组的值预定算好,在程序中直接使用。

难点

1)边界检查。

//检查左边界,尝试着朝左边移动一个,看是否合法。
function checkLeftBorder(){ 
  for(var i=0; i<activeBlock.length; i++){ 
    if(activeBlock[i].y==0){ 
      return false; 
    } 
    if(!isCellValid(activeBlock[i].x, activeBlock[i].y-1)){ 
      return false; 
    } 
  } 
  return true; 
} //同理,需要检测右边界和底边界

2)旋转, 需要数理逻辑, 一个点相对另外一个点旋转90度的问题。
3)定时和监听键盘事件机制让游戏自动运行下去。

//开始 
function begin(e){ 
  e.disabled = true; 
  status = 1; 
  tbl = document.getElementById("area"); 
  if(!generateBlock()){ 
    alert("Game over!"); 
    status = 2; 
    return; 
  } 
  paint(); 
  timer = setInterval(moveDown,1000); 
} 
document.onkeydown=keyControl;

程序过程

1)用户点开始->构造一个活动图形, 设置定时器。

//当前活动的方块, 它可以左右下移动, 变型。当它触底后, 将会更新area; 
var activeBlock; 
//生产方块形状, 有7种基本形状。 
function generateBlock(){ 
  activeBlock = null; 
  activeBlock = new Array(4); 
  //随机产生0-6数组,代表7种形态。
  var t = (Math.floor(Math.random()*20)+1)%7; 
  switch(t){ 
    case 0:{ 
      activeBlock[0] = {x:0, y:4}; 
      activeBlock[1] = {x:1, y:4}; 
      activeBlock[2] = {x:0, y:5}; 
      activeBlock[3] = {x:1, y:5}; 

      break; 
    } 
    //省略部分代码..............................
    case 6:{ 
      activeBlock[0] = {x:0, y:5}; 
      activeBlock[1] = {x:1, y:4}; 
      activeBlock[2] = {x:1, y:5}; 
      activeBlock[3] = {x:1, y:6}; 
      break; 
    } 
  } 
  //检查刚生产的四个小方格是否可以放在初始化的位置. 
  for(var i=0; i<4; i++){ 
    if(!isCellValid(activeBlock[i].x, activeBlock[i].y)){ 
        return false; 
      } 
    } 
  return true; 
}

2)每次向下移动后, 都检查是否触底, 如果触底了, 则尝试消行。

//消行 
function deleteLine(){ 
  var lines = 0; 
  for(var i=0; i<18; i++){ 
    var j=0; 
    for(; j<10; j++){ 
      if(area[i][j]==0){ 
        break; 
    } 
  } 
  if(j==10){ 
    lines++; 
    if(i!=0){ 
      for(var k=i-1; k>=0; k--){ 
        area[k+1] = area[k]; 
      } 
    } 
    area[0] = generateBlankLine(); 
    } 
  } 
  return lines; 
}

3)完了之后再构造一个活动图形, 再设置定时器。

效果图

javascript实现俄罗斯方块游戏的思路和方法

javascript实现俄罗斯方块游戏的思路和方法

javascript实现俄罗斯方块游戏的思路和方法

有待优化

1)设置不同形状方块的颜色。

思路:在创建方块函数内,设定activeBlockColor颜色,七种不同形态方块颜色各异(除了修改generateBlock方法之外,还需要修改paintarea方法。因为一开始考虑不周全,消除一行后,重绘方块的同时将颜色统一,因此可以考虑移除表格n行,然后在顶部增添n行,以保证没消除方块的完整性)。

2)当当前方块下落时,可以提前查看下一个方块。

思路:将generateBlock方法拆分成两部分,一部分用于随机尝试下一个方块,一部分用于缓存当前所要描绘的方块。当当前方块碰到底部被固定后,下一方块开始描绘,同时又再次随机产生新方块。如此反复。

以上所述就是本文给大家分享的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
微信运维交互机器人的示例代码
Nov 12 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 #Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 #Javascript
使用console进行性能测试
Apr 27 #Javascript
浅谈javascript实现八大排序
Apr 27 #Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 #Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 #Javascript
javascript关于运动的各种问题经典总结
Apr 27 #Javascript
You might like
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
几种响应式文字详解
2017/05/19 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
python实现京东秒杀功能
2018/07/30 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
flask开启多线程的具体方法
2020/08/02 Python
python zip()函数的使用示例
2020/09/23 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
军训心得体会
2013/12/31 职场文书
工会工作先进事迹
2014/08/18 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
初三英语教学计划
2015/01/23 职场文书
自荐信模板大全
2015/03/27 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书