JavaScript 俄罗斯方块游戏实现方法与代码解释

本俄罗斯方块代码采用 JavaScript 脚本代码写成,简单易懂;

全代码采用静态类及静态变量成员组成;

全脚本通过实现代码全局配置 OLSFK.Options = {...}

定义方块起始坐标及定义各自的旋转点;

从初始化俄罗斯方块界面开始,再监听键盘事件;以及左右,向下及旋转动作判断,重新渲染方块位置;

判断是否消行,以及相应的加级判断,执行速度,加分操作来执行;

最后以判断是否当前级别大于所定义的最大级别来判断是否结束;

代码说明讲解

OLSFK.Options = { //相关参数 width:12,//界面横向方块数 height:20,//界面纵向方块数 boxWidth : '16px', curLevel:1, speed : 1000, //setInterval,setTimeout direct : { //可以设定是A S D W, 还是← ↓ → Down: 40 , /*run speed*/ Left: 37, Right: 39, Rotate: 38 }, Move:true,//是否正在移动 Eventing:false, Levels: { 1:1000, 2:900, 3:800, 4:700, 5:600, 6:500, 7:400, 8:300, 9:200, 10:100 }, curBlock:4, //当前移动的图形名称 nextBlock:0, GampMap:new Object(), Timer:null, deline:0, Score:0, Deling:false, Start:false, lineNum:10, //删除几行了,加级 ScoreNum:40 //消一行加分 }

direct 表示 使用键盘方位键来操作方块的移动方向;

使用哪种方向键按自由喜欢配置,比如字母键的A, S, D, W; 或右边小数字键盘的数字键各自的键盘编码;

比如 上(旋转)、下、左、右 方向键的编码分别为:38、40、37、39;

Levels:表示级别配置,本配置共分为10级,每个级别所对应的下落速度,即定时执行间隔;

curBlock:表示当前活动的方块;

nextBlock:表示接下来执行的方块索引,并显示界面右上角的预览框中;

GampMap:用于保存在根据定义行列数形成的游戏表格中保存每个格的数据信息;

OLSFK.Options.GampMap[x+'_'+y] = 0;

对象表格为: id: "box_"+x+"_"+y;

初始化数据为 ‘0';  表示该表格还未占用;当有占用时,设置值为 ‘1';

Timer:为定时执行器;setTimeout 定时执行方块下落的的频率;定时时间越小,速度越快;

Deling:当正在执行消行操作时,下次暂不显示并下落;

lineNum:表示消超过 10 行,加一级;

ScoreNum:表示每消一行所加的分数;

OLSFK.ReItems = function (cur){ //key旋转点 switch (cur) { case 1: OLSFK.Items[1] = {//长块 LongBlock 1:{x:4,y:0}, 2:{x:5,y:0}, 3:{x:6,y:0}, 4:{x:7,y:0}, 5:{x:5,y:0} //旋转点 }; break; //.... } }

该方法用于恢复方块的初始设置;

OLSFK.Next = { //key旋转点 //长块 LongBlock 1: { 1:{x:0,y:1}, 2:{x:1,y:1}, 3:{x:2,y:1}, 4:{x:3,y:1} }, //... }

为不了不与游戏方块的设置冲突,独立出来下次随机方块的对象配置;

OLSFK.Items = { //key旋转点 //长块 LongBlock 1: { 1:{x:4,y:0}, 2:{x:5,y:0}, 3:{x:6,y:0}, 4:{x:7,y:0}, 5:{x:5,y:0} }, //方块Box 2: { 1:{x:4,y:0}, 2:{x:5,y:0}, 3:{x:4,y:1}, 4:{x:5,y:1}, 5:{x:0,y:0} }, //凸块 TuBlock 3: { 1:{x:4,y:1}, 2:{x:5,y:0}, 3:{x:5,y:1}, 4:{x:6,y:1}, 5:{x:5,y:1} }, //L块 LBlock 4: { 1:{x:5,y:0}, 2:{x:5,y:1}, 3:{x:5,y:2}, 4:{x:6,y:2}, 5:{x:5,y:2} }, 5: { //反向L块 FLBlock 1:{x:5,y:2}, 2:{x:6,y:2}, 3:{x:6,y:1}, 4:{x:6,y:0}, 5:{x:6,y:2} }, //Z块 ZBlock 6: { 1:{x:4,y:0}, 2:{x:5,y:0}, 3:{x:5,y:1}, 4:{x:6,y:1}, 5:{x:5,y:0} }, 7: {//反向Z块 FZBlock 1:{x:4,y:1}, 2:{x:5,y:1}, 3:{x:5,y:0}, 4:{x:6,y:0}, 5:{x:5,y:1} } }

方块共分为:长条块,方块,凸块(T块),L块,反L块,Z块,反Z块几种;

共7种方块,以1,2,3,4,5,6,7 索引键表示,方块是四个小块组成,每块都有各自的坐标,1-4表示组成该块的初始坐标位置,5表示旋转点;

OLSFK.Init = function() { //初始化界面 //... }

俄罗斯方块的界面初始化方法;将在 window.onload 中调用执行;

var w = OLSFK.Options.width; var h = OLSFK.Options.height; var total = w * h; var x=0,y=0; for (var i=0; i<total; i++) { OLSFK.Options.GampMap[x+'_'+y] = 0; Lib.Tag('SPAN',{id:"box_"+x+"_"+y,name:"cbox",style:{ width:OLSFK.Options.boxWidth, height:OLSFK.Options.boxWidth, border:"2px outset #669", background:"#ddd", float:"left", overflow:"hidden" },innerHTML:"&nbsp;",className:"cssbox"},back); var end = i + 1; x++; if (end >= w && end % w == 0) { x=0; y++; Lib.Tag('DIV',{style:{ clear:"both" }},back); } }

通过设置的 Options.width, Options.height 列数与行数,以及设置的小方格宽度,初始化了一个宽:Options.width列,高为 Options.height 的表格界面出来;

Lib.Tag 用于创建标签对象;

Lib.Tag = function(TAG,json,pnode) { //... }

TAG为标签名,比如: div, span 等;

json为设置标签样式 style;

pnode 是该创建所在的父容器;

OLSFK.Init = function() {} 还创建主游戏区域旁边的下次随机方块预览区,当前级别,及分数,以及操作“开始”,“暂停”按钮等;

JavaScript 俄罗斯方块游戏实现方法与代码解释

游戏初始入口点

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/d58d1c16275c5fb838297a2f7eff20b6.html