正文
包含俄罗斯方块html5的词条
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
HTML5开发游戏需要什么工具，还有要用到的知识（主要）是什么？？ 最好是自己回答。。。。。
你可以先去【绘学霸】网站找“游戏特效/unity3D”板块的【免费】视频教程-【点击进入】完整入门到精通视频教程列表： ;tagid=305,306zdhhr-11y17r-239619078
想要系统的学习可以考虑报一个网络直播课，推荐CGWANG的网络课。老师讲得细，上完还可以回看，还有同类型录播课可以免费学（赠送终身VIP）。
自制能力相对较弱的话，建议还是去好点的培训机构，实力和规模在国内排名前几的大机构，推荐行业龙头：王氏教育。
王氏教育全国直营校区面授课程试听【复制后面链接在浏览器也可打开】：
在“游戏特效/unity3D”领域的培训机构里，【王氏教育】是国内的老大，且没有加盟分校，都是总部直营的连锁校区。跟很多其它同类型大机构不一样的是：王氏教育每个校区都是实体面授，老师是手把手教，而且有专门的班主任从早盯到晚，爆肝式的学习模式，提升会很快，特别适合基础差的学生。
大家可以先把【绘学霸】APP下载到自己手机，方便碎片时间学习——绘学霸APP下载：
相关问答
Q1: 如何用html5 css3制作游戏？
俄罗斯方块这些简单的游戏其实 html + css + js 就可以实现了。 楼主已经为c语言了，js和后台语言比如java c#等很接近，学起来应该很快。 html5+css3 会更加炫酷。基础还要掌握html css 和 js。
Q2: 求俄罗斯方块HTML代码
html
head
title标题/title
/head
body
style
span.btn
{
BORDER-RIGHT: #7b9ebd 1px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #7b9ebd 1px solid;
PADDING-LEFT: 2px;
FONT-SIZE: 12px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
BORDER-LEFT: #7b9ebd 1px solid;
COLOR: black;
PADDING-TOP: 2px;
BORDER-BOTTOM: #7b9ebd 1px solid;
background-color: #CCCCCC;
}
/style
script language="javascript"
var doing;
var candown=0;
var wnum=13;
var hnum=18;
var grid=new Array();
var gridBuf=new Array();
for(i=0;i=hnum;i++){
grid[i]=new Array();
gridBuf[i]=new Array();
for(j=0;j=wnum;j++){
if(j0 jwnum ihnum){
grid[i][j]=0;
gridBuf[i][j]=0;
}else{
grid[i][j]=1;
gridBuf[i][j]=1;
}
}
}
var boxdata=
[
[
[1,1,1,1],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]
],
[
[1,1,1,0],
[1,0,0,0],
[0,0,0,0],
[0,0,0,0],
],
[
[1,1,1,0],
[0,1,0,0],
[0,0,0,0],
[0,0,0,0]
],
[
[1,1,1,0],
[0,0,1,0],
[0,0,0,0],
[0,0,0,0]
],
[
[1,1,0,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]
],
[
[0,1,1,0],
[1,1,0,0],
[0,0,0,0],
[0,0,0,0]
],
[
[1,1,0,0],
[1,1,0,0],
[0,0,0,0],
[0,0,0,0]
]
];
var colors=["black","#A0A0A0","red","#FF8000","yellow","pink"];
var gotLine=0;
var box;
var bGameOver=false;
function getHeight(arr)
{
var i,j;
for(i=3;i=0;i--)
for(j=0;j4;j++)
if(arr[i][j]) return i;
}
function getWidth(arr)
{
var i,j;
for(i=3;i=0;i--)
for(j=0;j4;j++)
if(arr[j][i]) return i;
}
function Box(x,y,arr,color)
{
this.arr=arr;
this.x=x;
this.y=y;
this.w=getWidth(arr);
this.h=getHeight(arr);
this.color=color;
this.active=true;
this.clearOldBox=function()
{
for(var j=0;j=this.h;j++)
for(var i=0;i=this.w;i++)
if(this.arr[j][i]0) grid[this.y+j][this.x+i]=0;
}
this.putNewBox=function()
{
for(var j=0;j=this.h;j++)
for(var i=0;i=this.w;i++)
if(this.arr[j][i]0) grid[this.y+j][this.x+i]=this.color;
}
this.moveLeft=function()
{
this.clearOldBox();
var _x=this.x-1;
if(this.canMove(_x,this.y)) this.x=_x;
this.putNewBox();
drawGrid();
}
this.moveRight=function()
{
this.clearOldBox();
var _x=this.x+1;
if(this.canMove(_x,this.y)) this.x=_x;
this.putNewBox();
drawGrid();
}
this.moveDown=function()
{
this.clearOldBox();
var _y=this.y+1;
if(this.canMove(this.x,_y)){
this.y=_y;
this.putNewBox();
drawGrid();
}else{
this.putNewBox();
drawGrid();
checkLineFull();
return;
}
}
this.rotate=function()
{
var tmp=[[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
for(j=0;j=this.h;j++)
for(i=0;i=this.w;i++)
tmp[this.w-i][j]=this.arr[j][i];
var newBox=new Box(this.x,this.y,tmp,this.color);
this.clearOldBox();
if(! newBox.canMove(this.x,this.y)) this.putNewBox();
else
{
box=newBox;
box.putNewBox();
drawGrid();
}
}
this.canMove=function(x,y)
{
for(var j=0;j=this.h;j++)
for(var i=0;i=this.w;i++)
{
if(grid[y+j][x+i]!=0 this.arr[j][i]!=0){ candown=1;return false; }
}
return true;
}
}
function drawGrid()
{
for(var j=0;jhnum;j++)
for(var i=0;iwnum;i++)
{
if( grid[j][i]!=gridBuf[j][i])
{
paintCell(j,i,grid[j][i]);
}
gridBuf[j][i]=grid[j][i];
}
}
function paintCell(i,j,color)
{
var htmlGrid=document.getElementById("TetrisGrid").firstChild;
htmlGrid.childNodes[i].childNodes[j].style.backgroundColor=colors[color];
}
function init()
{
var html='table id="TetrisGrid" cellspacing=1 style="background-color:green"tbody';
for(var i=0;i=hnum;i++)
{
html+='tr';
for(var j=0;j=wnum;j++)
{
html+='td width="20" height="20" style="background-color:'+colors[grid[i][j]]+';"/td';
}
html+='/tr \r\n';
}
html+='/tbody/table';
document.write(html);
}
function checkLineFull()
{
var full,i,j,i2;
var y3=box.y+box.h;
var y4=box.y;
for(i=y3;i=y4;)
{
full=1;
for(j=0;jwnum;j++)
if(grid[i][j]==0){full=0; break;}
if(full==0){ --i; continue;}
for(i2=i; i20;i2--)
for(j=0;jwnum;j++)
grid[i2][j]=grid[i2-1][j];
drawGrid();
y4++;
gotLine++;
}
checkGameOver();
}
function checkGameOver()
{
var bOver=false;
for(var j=1;jwnum;j++)
if(grid[0][j]0){ bOver=true; break;}
if(!bOver){
box=new Box((wnum-1)/2,0,boxdata[Math.floor(Math.random()*7)],Math.floor(Math.random()*5)+1);
box.putNewBox();
}
else
{
bGameOver=true;
msg.innerHTML="游戏结束! 您的得分为"+gotLine*100;
window.clearTimeout(doing);
}
}
function document_onkeydown()
{
if(bGameOver) return;
switch(event.keyCode)
{
case 32:
down();
break;
case 37:
box.moveLeft();
break;
case 39:
box.moveRight();
break;
case 38:
box.rotate();
break;
case 40:
box.moveDown();
break;
case 80:
stop();
break;
case 66:
window.location.reload();
break;
case 67:
restart();
break;
}
}
function down(){
if(window.event.keyCode==32){
clearTimeout(doing);
for(i=0;ihnum;i++){
if(candown==0){
box.moveDown();
}else{
break;
}
}
candown=0;
doing=window.setTimeout('moveDownBox()',interval);
}
}
var interval;
function moveDownBox()
{
interval=1000-10*(gotLine80?80 :gotLine);
msg.innerHTML=" 等级："+Math.floor(gotLine/10)+"；得分:"+gotLine*100;
box.moveDown();
doing=window.setTimeout('moveDownBox()',interval);
}
function startGame()
{
init();
doing=window.setTimeout('moveDownBox()',1000);
bGameOver=false;
box=new Box((wnum-1)/2,0,boxdata[Math.floor(Math.random()*7)],Math.floor(Math.random()*5)+1);
box.putNewBox();
drawGrid();
}
var status;
function stop(){
status=1;
window.clearTimeout(doing);
}
function restart(){
if(status==1){
status=0;
doing=window.setTimeout('moveDownBox()',1000);
}
}
function keydown(){
if (document.all)document_onkeydown()
}
/script
BODY onLoad="window.focus()" onkeydown="keydown()"
table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0"
tr
td
table id="maintable" border="0" align="center" cellpadding="0" cellspacing="0"
tr
td align="center"
span class="btn" style="width:100%; height:24px;background-color:#F0C0C0;color:#0000FF;vertical-align:middle;text-align:center"俄罗斯方块/span/td
/tr
tr
td style="height:20px;background-color:black;color:#00FF00;font-size:12px;"table height="20" border="0" cellpadding="0" cellspacing="0"
tr style="font-size:12px; color:#FFFFFF"
td width="100%" a style="cursor:hand" onclick="window.location.reload()"开始（B）/a a style="cursor:hand" onclick="stop();"暂停（P）/a a style="cursor:hand" onclick="restart();"继续（C）/a/td
/tr
/table/td
/tr
tr
td style="height:20px;background-color:black;color:#00FF00;font-size:12px;" id="msg" 等级：0；得分:0/td
/tr
tr
td height="20"
script language=javascript
maintable.style.width=(wnum+1)*20;
startGame();
/script
/td
/tr
/table/td
/tr
/table
/body
/html
Q3: 我用前端html5做了一个普通的俄罗斯方块游戏，想多设计一个功能：输入用户名，然后最后用户名和得分
那你起码得搞个后台 c# java 都是可以的，通过后台进行写数据到数据库中就好了。
