web前端|js教程
javascript俄罗斯方块,俄罗斯方块,js实现俄罗斯方块
web前端-js教程
俄罗斯方块方块是小时候的一个回忆，从最开始的掌上的黑白游戏机，到电视游戏机，到电脑，无不有它的痕迹，今天我们来一起重温它的一种实现方法，也算是整理一下我的思路吧……
二维码扫描登录源码,vscode配置格式化,ubuntu查看节点,修改tomcat启动参数,重庆爬虫乐园,php 导出csv 逗号,免费的seo查询工具广告,网站 手机站开发 cms,织梦动态教育模板lzw
HTML+CSS+JS实现俄罗斯方块完整版，素材只有图片，想要的下载图片按提示名字保存，css中用的时候注意路径！！主要在JS中！JS附有详细注释
微官网 源码模板,ubuntu编辑启动配置,灭小爬虫技巧,php求数组中最大值的下标,seo怎么裂变lzw
效果：
修改opencv源码,vscode可以运行vue吗,ubuntu 无法下载,tomcat 启动源码,sqlite本地,旅游网页设计教程,织梦怎么进入数据库,轻服务器,js toolbar 插件,java 前端 框架,爬虫电影下载,php 设置执行时间,seo发展历史,springboot商城功能,标签云控件,教学网站前台模板,易语言 网页 一样 索引,php app模板下载,网站后台如何开发,购物个人中心页面jsp,php 分销管理系统源码,源程序模板lzw
按键提示：[键盘按键]
素材：图片名字与代码里对应
1、背景图片：tetris.jpg
2、失败时候的弹出框图片：game-over.jpg
3、七种色彩小方块图片：
I.jpg：
J.jpg：
L.jpg：
O.jpg：
S.jpg：
T.jpg：
Z.jpg：
HTML代码
SCORE:0
LINES:0
LEVEL:1
CSS代码
.playground { width: 525px; height: 550px; margin: 20px auto 0 auto; position: relative; background-image:url("tetris.jpg");}.playground img { position: absolute;}.playground p {font-size: 30px; font-family: SimHei; font-weight: bold; color: #667799; position: absolute; left:305px; top:120px;}.playground p+p { top:176px; }.playground p+p+p { top:232px; }
JAVASCRIPT代码：分两段附有详细步骤解释
1、tetris.js
window.$=HTMLElement.prototype.$=function(selector){ return (this==window?document:this).querySelectorAll(selector);}var tetris={ RN:20,//总行数 CN:10,//总列数 CSIZE:26,//每个格子的宽高都是26px OFFSET_X:15,//每个单元格的左侧都要加15px OFFSET_y:15,//每个单元格的上面都要加15px pg:null,//保存游戏主界面对象 currShape:null,//专门保存正在移动的图形对象 nextShape:null,//H、专门保存下一个图形 interval:500,//每秒重绘一次==>下落的速度 timer:null, wall:[],//F、保存所有停止的下落的方块 state:1,//K、保存游戏当前状态 STATE_RUNNING:1,//K、游戏正在运行 STATE_GAMEOVER:0,//K、游戏结束 STATE_PAUSE:2,//K、游戏暂停 IMG_GAMEOVER:"img/game-over.jpg", IMG_PAUSE:"img/pause.jpg", SCORES:[0,10,50,80,200],//十三,要加的分数档位 score:0,//十C、当前总分 lines:0,//十C、当前总行数 //K、为游戏添加不同状态的图片 paintState:function(){//根据当前游戏状态，为游戏添加不同的图片 var img=new Image(); switch(this.state){ //如果当前状态是STATE_GAMEOVER case this.STATE_GAMEOVER: // img.src设置为IMG_GAMEOVERimg.src=this.IMG_GAMEOVER;break; //如果当前状态是STATE_PAUSE case this.STATE_PAUSE: // img.src设置为IMG_PAUSEimg.src=this.IMG_PAUSE; } //将img追加到pg中 this.pg.appendChild(img); }, init:function(){ this.pg=$(".playground")[0]; //创建一个随机图形的对象存在currShape中 this.currShape=this.randomShape(); this.nextShape=this.randomShape(); //F、将wall数组初始化为RN的空数组对象 for(var i=0;i<this.RN;i++){this.wall[i]=[]; } this.score=0;//十F、初始化 this.lines=0;//十F、初始化 this.state=1;//十F、初始化 this.paint(); //C、 this.timer=setInterval(function(){//调用tetris的drop方法tetris.drop();//再调用tetris的paint方法;tetris.paint(); },this.interval); //十A、 document.onkeydown=function(){var e=window.event||arguments[0];switch(e.keyCode){ case 37: tetris.moveL();break;//左 case 39: tetris.moveR();break;//右 case 40: tetris.drop();break;//下 //十五步、 case 38: tetris.rotateR();break;//上键控制右边旋转 case 90: tetris.rotateL();break;//字母Z键控制控制左边旋转 //十六步 case 80: tetris.pause();break;//字母P键：暂停 case 81: tetris.gameOver();break;//字母Q：结束游戏 case 67: tetris.myContinue();break;//字母C，在暂停后有效：暂停后，继续游戏 case 83: //游戏结束后，重新开始if(this.state==this.STATE_GAMEOVER){ tetris.init();}//字母S键：重新开始游戏} } },//init的结束 //十F、暂停，开始，继续、结束 gameOver:function(){ this.state=this.STATE_GAMEOVER; clearInterval(this.timer); this.timer=null; this.paint(); }, pause:function(){ if(this.state==this.STATE_RUNNING){this.state=this.STATE_PAUSE; } }, myContinue:function(){ if(this.state==this.STATE_PAUSE){this.state=this.STATE_RUNNING; } }, //十E、变形 rotateR:function(){//按键上，向右旋转 if(this.state==this.STATE_RUNNING){//十六this.currShape.rotateR();if(this.outOfBounds()||this.hit()){//验证不通过 this.currShape.rotateL();} } }, rotateL:function(){//按键Z，向左旋转 if(this.state==this.STATE_RUNNING){this.currShape.rotateL();if(this.outOfBounds()||this.hit()){//验证不通过 this.currShape.rotateR();} } }, //十A、 moveR:function(){ this.currShape.moveR(); if(this.outOfBounds()||this.hit()){//验证不通过this.currShape.moveL(); } }, moveL:function(){ this.currShape.moveL(); if(this.outOfBounds()||this.hit()){//验证不通过this.currShape.moveR(); } }, outOfBounds:function(){//检查当前图形是否越界 //当前shape中任意一个单元格的col=CN var cells=this.currShape.cells; for(var i=0;i<cells.length;i++){if(cells[i].col=){ return true;} } return false; }, hit:function(){//检查当前图形是否碰撞 //当前shape中任意一个单元格在wall中相同位置有格 var cells=this.currShape.cells; for(var i=0;i<cells.length;i++){if(this.wall[cells[i].row][cells[i].col]){ return true;} } return false; }, //D、重绘所有的格子，分数等的方法 paint:function(){ //把所有的img格子删除，再重绘 /*结尾的4个/*/ this.pg.innerHTML=this.pg.innerHTML.replace(//g,""); this.paintShape(); this.paintWall(); this.paintNext(); //十三 this.paintScore(); this.paintState();//K、 }, //十C、计分 paintScore:function(){//找到span元素 //第一个span中放this.score $("span")[0].innerHTML=this.score; //第二个放this.lines $("span")[1].innerHTML=this.lines; }, drop:function(){ //判断能否下落 if(this.state==this.STATE_RUNNING){//该行是第十六步加的if(this.canDrop()){ this.currShape.drop();}else{//F、否则 //F、如果不能下落，就将图形中每个cell，放入wall数组中 this.landIntoWall(); //十B、消行、并计分 var ln=this.deleteLines();//消除并返回本次删除的行数 //十C、计分 this.score+=this.SCORES[ln]; this.lines+=ln; //J、如果游戏没有结束才。。 if(!this.isGameOver()){//G、将等待的nextShape，换到currShapethis.currShape=this.nextShape;//G、this.nextShape=this.randomShape(); }else{//K、否则，一级结束clearInterval(this.timer);this.timer=null;this.state=this.STATE_GAMEOVER;this.paint();//手动绘制一次 }} } }, //十B、消行，并计分 deleteLines:function(){//检查wall中每一行是否要消除 //遍历wall中每一行,定义lines变量存本次共删除的行数line for(var row=0,lines=0;row<this.RN;row++){//如果当前行是满的:isFull(row)if(this.isFull(row)){ // 就删除当前行： this.deleteL(row); // 每删除一行，lines++ lines++;} } return lines; }, isFull:function(row){//判断指定行是否已满 //取出wall中第row行，存在line变量中 var line=this.wall[row];//遍历line中每个cell for(var c=0;c0;r--){// 从0开始遍历当前行每个格for(var c=0;c<;c++){//如果当前格有效 if(this.wall[r][c]){ // 将当前格的row++this.wall[r][c].row++; }} } }, //J、判断游戏是否结束 isGameOver:function(){ //获取nextShape中所有cell，保存在cells中 var cells=this.nextShape.cells; //遍历cells中每个cell for(var i=0;i<cells.length;i++){//取出wall中和当前cell相同row，col位置的格子var cell=this.wall[cells[i].row][cells[i].col];//只要碰到有效的if(cell){ return true;} }//for的结束 return false; }, //H、 paintNext:function(){ var cells=this.nextShape.cells; for(var i=0;i<cells.length;i++){//先将当前cell的row+1,存在r变量中var r=cells[i].row+1;//再将当前cell的col+11,存在c变量中var c=cells[i].col+11;var x=c*this.CSIZE+this.OFFSET_X;var y=r*this.CSIZE+this.OFFSET_y;var img=new Image();img.src=cells[i].img;img.style.left=x+"px";img.style.top=y+"px";this.pg.appendChild(img); } }, //G、 paintWall:function(){ //G、遍历二维数组wall中每个格 for(var r=0;r<this.RN;r++){for(var c=0;c<;c++){ var cell=this.wall[r][c]; // 如果当前cell有效 if(cell){var x=cell.col*this.CSIZE+this.OFFSET_X;var y=cell.row*this.CSIZE+this.OFFSET_y;var img=new Image();img.src=cell.img;img.style.left=x+"px";img.style.top=y+"px";this.pg.appendChild(img); }} } }, //F、把所有停止下落的方块放入wall中 landIntoWall:function(){ //遍历当前图形中每个cells // 每遍历一个cell // 就将cell放入wall中相同row，col的位置:this.wall[?][?]=? var cells=this.currShape.cells; for(var i=0;i<cells.length;i++){this.wall[cells[i].row][cells[i].col]=cells[i]; } }, //E、//判断是否继续可以下落 canDrop:function(){ //遍历当前currShape中的cells // 只要发现任意一个的cell的row==RN-1 // 就返回false // var cells=this.currShape.cells; for(var i=0;i<cells.length;i++){if(cells[i].row==this.RN-1){ return false;}//G、wall中，当前cell的下一行位置有效if(this.wall[cells[i].row+1][cells[i].col]){ return false} }//遍历结束后 //G、currShape中，任意一个cell的下方有wall中的cell return true; }, //4、随机生成一种图形--二 randomShape:function(){ switch(parseInt(Math.random()*7)){case 0: return new O();case 1: return new L();case 2: return new J();case 3: return new S();case 4: return new Z();case 5: return new I();case 6: return new T(); } }, //3 paintShape:function(){//3、专门绘制当前图形的方法 var cells=this.currShape.cells; for(var i=0;i<cells.length;i++){var x=cells[i].col*this.CSIZE+this.OFFSET_X;var y=cells[i].row*this.CSIZE+this.OFFSET_y;var img=new Image();img.src=cells[i].img;img.style.left=x+"px";img.style.top=y+"px";this.pg.appendChild(img); } },//paintShape的结束}//tetris结束window.onload=function(){ tetris.init();}
2、shapes.js
function Cell(row,col,img){ this.row=row; this.col=col; this.img=img; //三下落 if(!Cell.prototype.drop){ Cell.prototype.drop=function(){this.row++; } } if(!Cell.prototype.moveR){//十一 Cell.prototype.moveR=function(){this.col++; } } if(!Cell.prototype.moveL){//十一 Cell.prototype.moveL=function(){this.col--; } }}//十D、下落的各种变化状态function State(r0,c0,r1,c1,r2,c2,r3,c3){ //第0个cell相对于参照cell的下标偏移量 this.r0=r0; this.c0=c0; //第1个cell相对于参照cell的下标偏移量 this.r1=r1; this.c1=c1; //第2个cell相对于参照cell的下标偏移量 this.r2=r2; this.c2=c2; //第3个cell相对于参照cell的下标偏移量 this.r3=r3; this.c3=c3;}function Shape(img,orgi){ this.img=img; this.states=[];//十D、保存每个图形不同状态的数组 i=orgi;//十D、以它为固定不变的参照点，去旋转变形，就是数组states的下标 this.statei=0;//默认所有图形的最初状态都是0 //三 if(!Shape.prototype.drop){ Shape.prototype.drop=function(){//遍历当前对象的cells中的每个cell对象// 调用当前cell对象的drop方法for(var i=0;i<this.cells.length;i++){ this.cells[i].drop();} } } if(!Shape.prototype.moveR){//十一 Shape.prototype.moveR=function(){//遍历当前对象的cells中的每个cell对象for(var i=0;i<this.cells.length;i++){// 调用当前cell对象的drop方法 this.cells[i].moveR();} } } if(!Shape.prototype.moveL){//十一 Shape.prototype.moveL=function(){//遍历当前对象的cells中的每个cell对象for(var i=0;i=this.states.length&&(this.statei=0); //获得下一个状态对象 var state=this.states[this.statei]; var orgr=this.cells[i].row; var orgc=this.cells[i].col; //遍历当前图形中的每个cell //按state中偏移量，设置每个cell的新位置 for(var i=0;i<this.cells.length;i++){this.cells[i].row=orgr+state["r"+i];this.cells[i].col=orgc+state["c"+i]; }//for的结束}//if的结束 }//function的结束 }//if的结束 if(!Shape.prototype.rotateL){ Shape.prototype.rotateL=function(){//if(Object.getPrototypeOf(this)!O.prototype){if(this.constructor!=O){ this.statei--; this.statei<0&&(this.statei=this.states.length-1); //获得下一个状态对象 var state=this.states[this.statei]; var orgr=this.cells[i].row; var orgc=this.cells[i].col; //遍历当前图形中的每个cell //按照state中偏移量，设置每个cell的心位置 for(var i=0;i<this.cells.length;i++){this.cells[i].row=orgr+state["r"+i];this.cells[i].col=orgc+state["c"+i]; }//for的结束}//if的结束 }//function的结束 }//if的结束}//function Shape(img,orgi)的结束//二function O(){//1 Shape.call(this,"img/O.jpg"); if(!Shape.prototype.isPrototypeOf(O.prototype)){ Object.setPrototypeOf(O.prototype,Shape.prototype);//继承 } this.cells=[ new Cell(0,4,this.img),new Cell(0,5,this.img), new Cell(1,4,this.img),new Cell(1,5,this.img) ];}function T(){//2 Shape.call(this,"img/T.jpg",1); if(!Shape.prototype.isPrototypeOf(T.prototype)){ Object.setPrototypeOf(T.prototype,Shape.prototype);//继承 } this.cells=[ new Cell(0,3,this.img),new Cell(0,4,this.img), new Cell(0,5,this.img),new Cell(1,4,this.img) ]; //十四 this.states[0]=new State(0,-1, 0,0, 0,1, 1,0); this.states[1]=new State(-1,0, 0,0, 1,0, 0,-1); this.states[2]=new State(0,1, 0,0, 0,-1, -1,0); this.states[3]=new State(1,0, 0,0, -1,0, 0,1); // [0] [1] [2] [3]} function I(){//3 Shape.call(this,"img/I.jpg",1); if(!Shape.prototype.isPrototypeOf(I.prototype)){ Object.setPrototypeOf(I.prototype,Shape.prototype);//继承 } this.cells=[ new Cell(0,3,this.img),new Cell(0,4,this.img), new Cell(0,5,this.img),new Cell(0,6,this.img) ]; this.states[0]=new State(0,-1, 0,0, 0,1, 0,2); // [0] [1] [2] [3] this.states[1]=new State(-1,0, 0,0, 1,0, 2,0);}function S(){//4 Shape.call(this,"img/S.jpg",3); if(!Shape.prototype.isPrototypeOf(S.prototype)){ Object.setPrototypeOf(S.prototype,Shape.prototype);//继承 } this.cells=[ new Cell(0,4,this.img),new Cell(0,5,this.img), new Cell(1,3,this.img),new Cell(1,4,this.img) ]; //十四 this.states[0]=new State(-1,0, -1,1, 0,-1, 0,0); this.states[1]=new State(0,1, 1,1, -1,0, 0,0); // [0] [1] [2] [3]}function Z(){//5 Shape.call(this,"img/Z.jpg",1); if(!Shape.prototype.isPrototypeOf(Z.prototype)){ Object.setPrototypeOf(Z.prototype,Shape.prototype);//继承 } this.cells=[ new Cell(0,3,this.img),new Cell(0,4,this.img), new Cell(1,4,this.img),new Cell(1,5,this.img) ]; this.states[0]=new State(0,-1, 0,0, 1,0, 1,1); this.states[1]=new State(-1,0, 0,0, 0,-1, 1,-1); // [0] [1] [2] [3]}function L(){//6 Shape.call(this,"img/L.jpg",1); if(!Shape.prototype.isPrototypeOf(L.prototype)){ Object.setPrototypeOf(L.prototype,Shape.prototype);//继承 } this.cells=[ new Cell(0,3,this.img),new Cell(0,4,this.img), new Cell(0,5,this.img),new Cell(1,3,this.img) ]; this.states[0]=new State(0,-1, 0,0, 0,1, 1,-1); this.states[1]=new State(-1,0, 0,0, 1,0, -1,-1); this.states[2]=new State(0,1, 0,0, 0,-1, -1,1); this.states[3]=new State(1,0, 0,0, -1,0, 1,1); // [0] [1] [2] [3]}function J(){//7 Shape.call(this,"img/J.jpg",1); if(!Shape.prototype.isPrototypeOf(J.prototype)){ Object.setPrototypeOf(J.prototype,Shape.prototype);//继承 } this.cells=[ new Cell(0,3,this.img),new Cell(0,4,this.img), new Cell(0,5,this.img),new Cell(1,5,this.img) ]; this.states[0]=new State(-1,0, 0,0, 1,-1, 1,0); this.states[1]=new State(0,1, 0,0, -1,-1, 0,-1); this.states[2]=new State(1,0, 0,0, -1,1, -1,0); this.states[3]=new State(0,-1, 0,0, 1,1, 0,1); // [0] [1] [2] [3]}
最终效果图如下所示：
————————————————————————————>为了生活而改变，为了改变而创造.
以上就是小编给大家分享的关于基于javascript代码编写的网页版俄罗斯方块。希望大家喜欢。
