求俄罗斯方块HTML代码

求俄罗斯方块HTML代码,第1张

<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=0i<=hnumi++){

grid[i]=new Array()

gridBuf[i]=new Array()

for(j=0j<=wnumj++){

if(j>0 &&j<wnum &&i<hnum){

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=3i>=0i--)

for(j=0j<4j++)

if(arr[i][j]) return i

}

function getWidth(arr)

{

var i,j

for(i=3i>=0i--)

for(j=0j<4j++)

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=0j<=this.hj++)

for(var i=0i<=this.wi++)

if(this.arr[j][i]>0) grid[this.y+j][this.x+i]=0

}

this.putNewBox=function()

{

for(var j=0j<=this.hj++)

for(var i=0i<=this.wi++)

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=0j<=this.hj++)

for(i=0i<=this.wi++)

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=0j<=this.hj++)

for(var i=0i<=this.wi++)

{

if(grid[y+j][x+i]!=0 &&this.arr[j][i]!=0){ candown=1return false}

}

return true

}

}

function drawGrid()

{

for(var j=0j<hnumj++)

for(var i=0i<wnumi++)

{

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=0i<=hnumi++)

{

html+='<tr>'

for(var j=0j<=wnumj++)

{

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=y3i>=y4)

{

full=1

for(j=0j<wnumj++)

if(grid[i][j]==0){full=0break}

if(full==0){ --icontinue}

for(i2=ii2>0i2--)

for(j=0j<wnumj++)

grid[i2][j]=grid[i2-1][j]

drawGrid()

y4++

gotLine++

}

checkGameOver()

}

function checkGameOver()

{

var bOver=false

for(var j=1j<wnumj++)

if(grid[0][j]>0){ bOver=truebreak}

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=0i<hnumi++){

if(candown==0){

box.moveDown()

}else{

break

}

}

candown=0

doing=window.setTimeout('moveDownBox()',interval)

}

}

var interval

function moveDownBox()

{

interval=1000-10*(gotLine>80?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:24pxbackground-color:#F0C0C0color:#0000FFvertical-align:middletext-align:center">俄罗斯方块</span></td>

</tr>

<tr>

<td style="height:20pxbackground-color:blackcolor:#00FF00font-size:12px"><table height="20" border="0" cellpadding="0" cellspacing="0">

<tr style="font-size:12pxcolor:#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:20pxbackground-color:blackcolor:#00FF00font-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>

你可以先去【绘学霸】网站找“游戏特效/unity3D”板块的【免费】视频教程-【点击进入】完整入门到精通视频教程列表: www.huixueba.net/web/AppWebClient/AllCourseAndResourcePage?type=1&tagid=305,306&zdhhr-11y17r-239619078

想要系统的学习可以考虑报一个网络直播课,推荐CGWANG的网络课。老师讲得细,上完还可以回看,还有同类型录播课可以免费学(赠送终身VIP)。

自制能力相对较弱的话,建议还是去好点的培训机构,实力和规模在国内排名前几的大机构,推荐行业龙头:王氏教育。

王氏教育全国直营校区面授课程试听【复制后面链接在浏览器也可打开】:

www.cgwang.com/course/gecoursemobilecheck/?zdhhr-11y17r-239619078

在“游戏特效/unity3D”领域的培训机构里,【王氏教育】是国内的老大,且没有加盟分校,都是总部直营的连锁校区。跟很多其它同类型大机构不一样的是:王氏教育每个校区都是实体面授,老师是手把手教,而且有专门的班主任从早盯到晚,爆肝式的学习模式,提升会很快,特别适合基础差的学生。

大家可以先把【绘学霸】APP下载到自己手机,方便碎片时间学习——绘学霸APP下载:www.huixueba.com.cn/Scripts/download.html


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/6098704.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-14
下一篇 2023-03-14

发表评论

登录后才能评论

评论列表(0条)

保存