欧美网站欣赏,深圳东门老街游玩攻略推荐,网站建设参考文献作者,十大不收费看盘软件网站导读#xff1a;小时候我们经常打游戏玩俄罗斯方块#xff0c;用的是游戏机。 现在我们学会了敲代码#xff0c;简单用JS实现一下这个游戏把。
目录
先看效果
操作说明
代码实现
完整代码 先看效果 操作说明
打开编译器#xff0c;讲代码复制进去#xff0c;在浏览… 导读小时候我们经常打游戏玩俄罗斯方块用的是游戏机。 现在我们学会了敲代码简单用JS实现一下这个游戏把。
目录
先看效果
操作说明
代码实现
完整代码 先看效果 操作说明
打开编译器讲代码复制进去在浏览器打开即可通过键盘上下左右控制一个人就可以玩耍。
↑控制方块的形态可以使方块旋转←向左平移→向右平移↓加速下落。方块铺满可以消失方块排列到顶部游戏gameover.
代码实现
CSS
style typetext/css.c{margin:1px; width:19px; height:19px; background:red; position:absolute;}.d{margin:1px; width:19px; height:19px; background:gray; position:absolute;}.f{top:0px; left:0px; background:black; position:absolute;}.e{top:0px; background:#151515; position:absolute;}.g{width:100px; height:20px; color:white; position:absolute;}
/style JS
script typetext/javascript
var row 18;
var col 10;
var announcement 6;
var size 20;
var isOver false;
var shapes (0,1,1,1,2,1,3,1;1,0,1,1,1,2,2,2;2,0,2,1,2,2,1,2;0,1,1,1,1,2,2,2;1,2,2,2,2,1,3,1;1,1,2,1,1,2,2,2;0,2,1,2,1,1,2,2).split(;);
var tetris;
var container;
function createElm(tag,css)
{var elm document.createElement(tag);elm.className css;document.body.appendChild(elm);return elm;
}
function Tetris(css,x,y,shape)
{// 创建4个div用来组合出各种方块var myCss css?css:c;this.divs [createElm(div,myCss),createElm(div,myCss),createElm(div,myCss),createElm(div,myCss)];if(!shape){this.divs2 [createElm(div,myCss),createElm(div,myCss),createElm(div,myCss),createElm(div,myCss)];this.score createElm(div,g);this.score.style.top 10*sizepx;this.score.style.left (col- -1)*sizepx;this.score.innerHTML score:0;}this.container null;this.refresh function(){this.x (typeof(x)!undefined)?x:3;this.y (typeof(y)!undefined)?y:0;// 如果有传参优先使用参数的如果有预告优先使用预告都没有就自己生成if(shape)this.shape shape;else if(this.shape2)this.shape this.shape2;elsethis.shape shape?shape:shapes[Math.floor((Math.random()*shapes.length-0.000000001))].split(,);this.shape2 shapes[Math.floor((Math.random()*shapes.length-0.000000001))].split(,);if(this.container !this.container.check(this.x,this.y,this.shape)){isOver true;alert(游戏结束);}else{this.show();this.showScore();this.showAnnouncement();}}// 显示方块this.show function(){for(var i in this.divs){this.divs[i].style.top (this.shape[i*21]- -this.y)*sizepx;this.divs[i].style.left (this.shape[i*2]- -this.x)*sizepx;}}// 显示预告this.showAnnouncement function(){for(var i in this.divs2){this.divs2[i].style.top (this.shape2[i*21]- -1)*sizepx;this.divs2[i].style.left (this.shape2[i*2]- -1- -col)*sizepx;}}// 显示分数this.showScore function(){if(this.container this.score){this.score.innerHTML score: this.container.score;}}// 水平移动方块的位置this.hMove function(step){if(this.container.check(this.x- -step,this.y,this.shape)){this.x step;this.show();}}// 垂直移动方块位置this.vMove function(step){if(this.container.check(this.x,this.y- -step,this.shape)){this.y step;this.show();}else{this.container.fixShape(this.x,this.y,this.shape);this.container.findFull();this.refresh();}}// 旋转方块this.rotate function(){var newShape [this.shape[1],3-this.shape[0],this.shape[3],3-this.shape[2],this.shape[5],3-this.shape[4],this.shape[7],3-this.shape[6]];if(this.container.check(this.x,this.y,newShape)){this.shape newShape;this.show();}}this.refresh();
}
function Container()
{this.init function(){// 绘制方块所在区域var bgDiv createElm(div,f);bgDiv.style.width size*colpx;bgDiv.style.height size*rowpx;// 绘制预告所在区域var bgDiv createElm(div,e);bgDiv.style.left size*colpx;bgDiv.style.width size*announcementpx;bgDiv.style.height size*rowpx;// 清空积分this.score 0;}this.check function(x,y,shape){// 检查边界越界var flag false;var leftmostcol;var rightmost0;var undermost0;for(var i0;i8;i2){// 记录最左边水平坐标if(shape[i]leftmost)leftmost shape[i];// 记录最右边水平坐标if(shape[i]rightmost)rightmost shape[i];// 记录最下边垂直坐标if(shape[i1]undermost)undermost shape[i1];// 判断是否碰撞if(this[(shape[i1]- -y)*100- -(shape[i]- -x)])flag true;}// 判断是否到达极限高度for(var m0;m3;m)for(var n0;ncol;n)if(this[m*100n])flag true;if((rightmost- -x1)col || (leftmost- -x)0 || (undermost- -y1)row || flag)return false;return true;}// 用灰色方块替换红色方块并在容器中记录灰色方块的位置this.fixShape function(x,y,shape){var t new Tetris(d,x,y,shape);for(var i0;i8;i2)this[(shape[i1]- -y)*100- -(shape[i]- -x)] t.divs[i/2];}// 遍历整个容器判断是否可以消除this.findFull function(){var s 0;for(var m0;mrow;m){var count 0;for(var n0;ncol;n)if(this[m*100n])count;if(countcol){s;this.removeLine(m);}}this.score - -this.calScore(s);}this.calScore function(s){if(s!0)return s- -this.calScore(s-1)elsereturn 0;}// 消除指定一行方块this.removeLine function(row){// 移除一行方块for(var n0;ncol;n)document.body.removeChild(this[row*100n]);// 把所消除行上面所有的方块下移一行for(var irow;i0;i--){for(var j0;jcol;j){this[i*100- -j] this[(i-1)*100- -j]if(this[i*100- -j])this[i*100- -j].style.top i*size px;}}}
}
function init()
{container new Container();container.init();tetris new Tetris();tetris.container container;document.onkeydown function(e){if(isOver) return;var e window.event?window.event:e;switch(e.keyCode){case 38: //uptetris.rotate();break;case 40: //downtetris.vMove(1);break;case 37: //lefttetris.hMove(-1);break;case 39: //righttetris.hMove(1);break;}}setInterval(if(!isOver) tetris.vMove(1),500);
}
/script 这样就把项目搞完了一个简单的俄罗斯方块就完成了女朋友玩的很快乐
完整代码
《JavaScript100例|01》之javaScript实现俄罗斯方块源代码
