HTML5俄罗斯方块网页游戏代码

HTML5俄罗斯方块网页游戏代码非常好用代码如下

注意

把所有文件放在一个文件夹里!

把所有css文件夹里,命名'css'

把所有js文件夹里,命名'js'

先看'index.html'

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>俄罗斯方块</title><link rel="stylesheet" type="text/css" href="css/style.css"></head>
<body><div class="game"  id="game"></div><div class="gameOver" id="gameOver"><p>游戏结束啦</p></div><div class="info"><div class="next"  id="next"></div><div class="time"><p>已用时： <span id="time">0</span>s</p><p>已得分： <span id="recode">0</span>分</p></div></div><div class="tips"><p>游戏注释：</p><p>用键盘控制方块的下落和变形</p><p>↑：变形</p><p>←：左移</p><p>↓：下移（有自定义的下落速度）</p><p>→：右移</p><p>空格：速降（会直接到达最下层）</p></div>
</body>
<script type="text/javascript" src="js/square.js"></script>
<script type="text/javascript" src="js/squareFactory.js"></script>
<script type="text/javascript" src="js/game.js"></script>
<script type="text/javascript" src="js/local.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</html>

JS:

game.js

//游戏核心代码
var Game = function(){//dom元素var gameDiv,nextDiv,scoreDiv;//游戏矩阵var gameData = [[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]];//当前方块   下一个方块var cur,next;//渲染divvar nextDivs = [];var gameDivs = [];//初始化divvar initDiv = function(initData, initDivArray,elem){for(var i = 0; i < initData.length;  i++){var gameDiv = [];for(var j = 0; j <initData[0].length; j++){var newNode = document.createElement("div");newNode.className = "none";newNode.style.top = (i*20) + "px";newNode.style.left = (j*20) +"px";elem.appendChild(newNode);gameDiv.push(newNode);}initDivArray.push(gameDiv);}}//刷新divvar refresh = function(initData,initDivArray){for(var i = 0; i<initData.length; i++){for(var j = 0; j<initData[0].length; j++){switch(initData[i][j]){case 0:initDivArray[i][j].className = 'none'break;case 1:initDivArray[i][j].className = 'done';break;case 2:initDivArray[i][j].className = 'current';break;default:break;}}}}//检测点是否合法var check = function(pos,x,y){if(pos.x + x < 0){//上边界return false;}else if(pos.x + x >= gameData.length){//下边界return false;}else if(pos.y + y < 0){//左边界return false;}else if(pos.y + y >=gameData[0].length){//右边界return false;}else if(gameData[pos.x + x][pos.y + y] ==1){//位置上已经有完成的方块return false;}else{return true;}}//检测数据是否合理var isValid = function(pos,data){for(var i = 0; i < data.length; i++){for(var j = 0; j <data[0].length; j++){if(data[i][j] != 0){if(!check(pos,i,j)){return false;}}}}return true;}//清除数据var clearData = function(){for(var i = 0; i < cur.data.length; i++){for(var j = 0; j< cur.data[0].length; j++){if(check(cur.origin,i,j)){gameData[cur.origin.x + i][cur.origin.y + j] = 0;}}}}//设置数据，修改方块下落位置var setData = function (){for(var i = 0; i < cur.data.length; i++){for(var j = 0; j< cur.data[0].length; j++){if(check(cur.origin,i,j)){gameData[cur.origin.x + i][cur.origin.y + j] = cur.data[i][j];}}}}//旋转var rotate = function(){if(cur.canRotate(isValid)){clearData();cur.rotate();setData();refresh(gameData,gameDivs);}}//下移var down = function(){//初始化原点位置if(cur.canDown(isValid)){clearData();cur.down();setData();refresh(gameData,gameDivs);return true;}else{return false;}}//右移动var right = function(){if(cur.canRight(isValid)){clearData();cur.right();setData();refresh(gameData,gameDivs);}}//左移动var left = function(){if(cur.canLeft(isValid)){clearData();cur.left();setData();refresh(gameData,gameDivs);}}//方块移动到底部的时候，固定var fixed = function(){for(var i = 0; i <cur.data.length; i++){for(var j=0;j<cur.data[0].length; j++){if(check(cur.origin,i,j)){if(gameData[cur.origin.x + i][cur.origin.y + j] == 2){gameData[cur.origin.x + i][cur.origin.y + j] = 1}}}}refresh(gameData,gameDivs);}//使用下一个方块var performNext = function(){cur = next;setData();next = SquareFactory.prototype.make();refresh(gameData,gameDivs);refresh(next.data,nextDivs)}//消行方法var checkClear = function(){//从底部开始判断，从下往上，遇到一整排符合条件的，删除for(var i =gameData.length -1;i>=0;i--){var clear = true;for(var j =0;j<gameData[0].length; j++){if(gameData[i][j]!==1){clear = false;break;}}if(clear){for(var m=i; m>0;m--){for(var n =0;n<gameData[0].length;n++){gameData[m][n] = gameData[m-1][n]}}for(var n=0;n<gameData[0].length;n++){gameData[0][n] = 0;}setRecord();i++;}}}//判断游戏是否结束var checkGameOver = function(){var gameOver = false;for(var i = 0;i<gameData[0].length;i++){if(gameData[1][i] == 1){gameOver = true;}}return gameOver;       }//初始化var init = function(doms){gameDiv = doms.gameDiv;nextDiv = doms.nextDiv;scoreDiv=doms.recodeDiv;//实例化方块数据cur = SquareFactory.prototype.make();next = SquareFactory.prototype.make();//初始化游戏区的所有方块布局initDiv(gameData,gameDivs,gameDiv);//用div填充游戏区initDiv(next.data,nextDivs,nextDiv);//用div填充待出现方块区//在game游戏区更新掉落方块的位置。所以就是需要把当前方块的位置赋值到game游戏区的对应位置。setData();//刷新游戏区方块布局refresh(gameData,gameDivs);refresh(next.data,nextDivs);}//设置分数var record = 0;var setRecord = function(){record++;scoreDiv.innerHTML = record;}//导出APIthis.init = init;this.down = down;this.right = right;this.left = left;this.rotate = rotate;this.fall= function(){while(down()){down();}return false;}this.fixed = fixed;this.performNext = performNext;this.checkClear = checkClear;this.checkGameOver = checkGameOver;
}

local.js

// 本地游戏区
var Local = function(){//游戏对象var game;//定时器var timer = null;//时间间隔var INITERVAL = 600;//计时效果timeCount = 0;//时间var time = 0;//绑定键盘事件var bindKeyEvent = function(){document.onkeydown = function(e){switch(e.keyCode){case 32://space;game.fall();break;case 37://left;game.left();break;case 38://top 切换形态game.rotate();break;case 39://right；game.right();break;case 40://down;game.down();break;default :break;}}}//移动var move = function(){if(!game.down()){game.fixed();//判断是否固定游戏块game.checkClear();//判断是否清行if(game.checkGameOver()){//判断游戏是否结束stop();}else{game.performNext();}}}//计时函数var timeunc = null;var timeFunc = function(doms){timeunc = setInterval(function(){time++;doms.timeDiv.innerHTML = time;},1000) ;}//设置时间//开始var start = function(){var doms = {gameDiv :document.getElementById("game"),nextDiv :document.getElementById("next"),recodeDiv :document.getElementById("recode"),timeDiv :document.getElementById("time")}game = new Game();game.init(doms);bindKeyEvent();//计时系统timeFunc(doms);//定时器效果，方块自由下落效果timer = setInterval (move ,INITERVAL) }//结束var stop = function(){if(timer){clearInterval(timer);timer = null;}if(timeunc){clearInterval(timeunc);timeunc = null;}document.onkeydown = null;document.getElementById("gameOver").style.display = "block";}//导出APIthis.start = start;
}

remote.js 不要漏掉这个

// 对战玩家游戏区

script.js 不要漏掉这个

var local = new Local();
local.start();

square.js

// 方块处理 左移，右移，旋转，下落。
var Square = function(){//方块数据this.data = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];//原点this.origin = {x : 0,y : 3};//旋转数组this.totates =function(data){var sArray=[    [0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];for(var i = 0;i < data.length; i++){var newIndex =3-i;for(var j =0; j <data[0].length; j++){sArray[j][newIndex] = data[i][j]}}return sArray;}
}
Square.prototype.canRotate = function(isValid){
/*  this.data = this.totates(this.data);*/return isValid(this.origin,this.totates(this.data));
}
Square.prototype.rotate = function(isValid){this.data = this.totates(this.data);
}
Square.prototype.canDown = function(isValid){var test = {};test.x = this.origin.x + 1;test.y = this.origin.y;return isValid(test,this.data);
}
Square.prototype.down = function(){this.origin.x = this.origin.x+1;
}
Square.prototype.canRight = function(isValid){var test = {};test.x = this.origin.x ;test.y = this.origin.y +1;return isValid(test,this.data);
}
Square.prototype.right = function(){this.origin.y = this.origin.y + 1;
}
Square.prototype.canLeft = function(isValid){var test = {};test.x = this.origin.x ;test.y = this.origin.y - 1;return isValid(test,this.data);
}
Square.prototype.left = function(){this.origin.y = this.origin.y - 1;
}

squareFactory.js

//负责生成方块，代码生成工厂
//七种不同类型的方块/*** 口* 口* 口* 口*/var Square1 = function(){Square.call(this)//方块数据this.data = [[0,2,0,0],[0,2,0,0],[0,2,0,0],[0,2,0,0]];}Square1.prototype = Square.prototype;/*var square1 = [[0,2,0,0],[0,2,0,0],[0,2,0,0],[0,2,0,0]];*//***    口 * 口口口*//*var square2 = [[0,2,0,0],[2,2,2,0],[0,0,0,0],[0,0,0,0]];*/var Square2 = function(){Square.call(this)//方块数据this.data = [[0,2,0,0],[2,2,2,0],[0,0,0,0],[0,0,0,0]];}Square2.prototype = Square.prototype;/*** 口口* 口口*//*var square3 = [[0,0,0,0],[0,2,2,0],[0,2,2,0],[0,0,0,0]];*/var Square3 = function(){Square.call(this)//方块数据this.data = [[0,0,0,0],[0,2,2,0],[0,2,2,0],[0,0,0,0]];}Square3.prototype = Square.prototype;/***    口* 口口口*//*var square4 = [[0,0,2,0],[2,2,2,0],[0,0,0,0],[0,0,0,0]];*/var Square4 = function(){Square.call(this)//方块数据this.data = [[0,0,2,0],[2,2,2,0],[0,0,0,0],[0,0,0,0]];}Square4.prototype = Square.prototype;/*** 口口* 口* 口*//*var square5 = [[2,2,0,0],[2,0,0,0],[2,0,0,0],[0,0,0,0]];*/var Square5 = function(){Square.call(this)//方块数据this.data = [[2,2,0,0],[2,0,0,0],[2,0,0,0],[0,0,0,0]];}Square5.prototype = Square.prototype;/*** 口口*  口口*//*var square6 = [[0,2,2,0],[0,0,2,2],[0,0,0,0],[0,0,0,0]];*/var Square6 = function(){Square.call(this)//方块数据this.data = [[0,2,2,0],[0,0,2,2],[0,0,0,0],[0,0,0,0]];}Square6.prototype = Square.prototype;/***  口口* 口口*//*var square7 = [[0,0,2,2],[0,2,2,0],[0,0,0,0],[0,0,0,0]];*/var Square7 = function(){Square.call(this)//方块数据this.data = [[0,0,2,2],[0,2,2,0],[0,0,0,0],[0,0,0,0]];}Square7.prototype = Square.prototype;var SquareFactory = function(){}SquareFactory.prototype.make = function(){var index = Math.ceil(Math.random()*7);var s;switch(index){case 1:s = new Square1();break;case 2:s = new Square2();break;case 3:s = new Square3();break;case 4:s = new Square4();break;case 5:s = new Square5();break;case 6:s = new Square6();break;case 7:s = new Square7();break;default :break;}return s;}

css部分就一个

style.css

*{padding: 0px;margin: 0px;
}
body{padding: 10px;
}
.game{position: relative;width: 200px;height: 400px;background-color: #f2faff;border-width: 0 1px 1px ;border-style: solid;border-color: green;display: inline-block;
}
.gameOver{width: 200px;height: 400px;background:rgba(0,0,0,.5);position: absolute;top: 10px;left: 10px;text-align: center;display: none;
}
.gameOver>p{color: #fff;margin-top: 180px;
}
.next{width: 80px;height: 80px;position: relative;border: 1px solid green;vertical-align: top;background-color: #f2faff;display: inline-block;
}
.info{/*border:1px solid red;*/padding-left: 50px;display: inline-block;/*width: 80px;*/vertical-align: top;
}
.time{margin-top: 20px;
}
/*定义div样式*/
.none,.current,.done{height: 20px;width: 20px;position: absolute;box-sizing: border-box;
}
.none{background: #f2faff;
}
.current{background-color: pink;border:1px solid red;
}
.done{background-color: gray;border:1px solid #000;
}
.tips{border: 1px solid green;background: yellowgreen;/*color: #fff;*/display: inline-block;vertical-align: top;margin-left: 45px;padding: 10px;border-radius: 6px;
}

好了就到这里了

希望大家自己理解吧

HTML5俄罗斯方块网页游戏代码相关推荐

100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...
HTML5跑酷网页游戏源码
介绍: HTML5跑酷网页游戏,按空格键上下左右控制跳跃网盘下载地址: http://kekewangLuo.net/tzGmMF9q6Fg0 图片:
HTML5热气球飞行游戏代码
介绍: HTML5热气球飞行游戏代码,长按鼠标控制,低空飞行以节省燃料. 直接上传源码到服务器即可使用! 网盘下载地址: http://kekewangLuo.cc/ka7TYBetaaq 图片:
程序猿爱情表白专用html5动画网页的代码
程序猿爱情表白专用html5动画网页的代码下载地址:源代码程序员表白专用的html5动画特效网页,真的挺羡慕创作者的水平,有这水平能够把爱表白给想表白的人,不要以为那些鲜花是用的图片.你会发如今 ...
html5猜数字游戏代码,js猜数字小游戏的简单实现代码
复制代码代码如下: 简易计算机 //获取随机数 function GetRandomNum(Min,Max) { var Range = Max - Min; var Rand = Math.ran ...
使用html5写见缝插针源码,HTML5见缝插针手机游戏代码-闯三关送口红.zip
[实例简介] [实例截图] [核心代码] 闯关失败重新闯关恭喜您,闯关成功点击领取当前关数: 1 0 // var loadedMusic = false; var game_id = $(& ...
游戏1：HTML5制作网页游戏围住神经猫--createjs
游戏简介:点击小圆圈,是蓝色的小圆圈不跑出圆圈外,跑出则结束游戏准备工作: 下载easejs :下载地址:http://www.createjs.cc/easeljs 中文网站效果: in ...
40个容易上瘾的HTML5网页游戏,总有一款适合你
我记得姐姐家的孩子在刚刚才学会走路,说话还不能完整的时候就已经能自己用小手点出小游戏的网站来一个人自娱自乐.我一直在想这一代跟着计算机一起茁壮成长的孩子会不会也和美国那一代人一样,出现9岁的黑客和计算 ...
HTML5口红西瓜见缝插针小游戏代码
下载地址口红西瓜HTML5见缝插针手机游戏代码,口红西瓜见缝插针手机游戏源代码. dd:
HTML俄罗斯方块小游戏
[HTML俄罗斯方块小游戏] 代码如下: <!DOCTYPE html> <html><head><meta charset="UTF-8" ...

HTML5俄罗斯方块网页游戏代码

HTML5俄罗斯方块网页游戏代码相关推荐

最新文章

热门文章