JS 俄罗斯方块完美注释版代码

2023-03-16 06:35:01JavaScript015

JS 俄罗斯方块完美注释版代码,第1张

#board

td{

width:

20px

height:

20px

}

/**

JS俄罗斯方块完美注释版

1.01

从学c语言那一会儿都想写一个俄罗斯方块,可是每次动起手总觉得难度太大.

今天终于用了大约4个小时写出来了.

其中在涉及到方块变型的时候还咨询了

同学来帮忙

个人觉得难点有这么几个:

边界检查,

不多说,

想通了就行

旋转,

还是数学上的方法,

一个点相对另外一个点旋转90度的问题.

让整个程序在点开始之后,

怎么让它一直自动的运行下去.

我以前一直没有做完,

主要是因为没有想清楚到底要用一个什么机制让游戏自动运行下去,

这个过程可以这么理解:

用户点开始->构造一个活动图形,

设置定时器,

每次向下移动后,

都检查是否触底,

如果触底了,

则尝试消行,

完了之后再构造一个活动图形,

再设置定时器.

//表示页面中的table,

这个table就是将要显示游戏的主面板

var

tbl

//游戏状态

未开始1

运行

中止

var

status

//定时器,

定时器内将做moveDown操作

var

timer

//分数

var

score

//board是一个18*10的数组,也和页面的table对应.

//用来标注那些方格已经被占据.

初始时都为0,

如果被占据则为1

var

board

new

Array(18)

for(var

i=0i

你提到的这俩个编程语言其实都是可以分开来学的，他们的结合仅在于前台页面中，JAVASCRIPT处理前台页面的用户交互，当然也可以通过AJAX获取后台数据。ASP主要用于后台的数据处理，所以，你可以花掉大概10天时间来学习JAVASCRIPT，然后再花10天时间学习ASP即可。关键是要边学边练习，很快就上手了，只看不练，永远都学不好的！给你推荐几个我觉得好教程的！W3school 专业的教程学习：正则30分钟高手的必经之路： JS从糊涂到明白 - 一步一步编写计算器由浅入深快速进阶

如果帮助到您，请记得采纳为满意答案哈，谢谢！祝您生活愉快！ vae.la

<html>

<head>

<title>俄罗斯方块游戏</title>

<style>

TD{width: 20height: 20}

</style>

</head>

document.body.innerHTML += '<DIV id="stage" style="position: absolutetop: 0left: 0"></DIV>' //游戏场地

document.body.innerHTML += '<div id="element_stage" style="position: absolutetop: 3left: 500width: 159height: 152"></div>'//预显表

document.body.innerHTML += '<div id="obj_stage" style="position: absolutetop: 0left: 132display: blockz-index: 100"></div>'//活动层

var element_html = '<table id="element_table" border="1" width="100%" height="100%" bordercolor="#000000" cellspacing="0" cellpadding="0">'

var obj_html = '<table id="obj_table" border="1" bordercolor="#000000" cellspacing="0" cellpadding="0">'

for(h=0h<=4h++) //-------生成预显表和活动层-------//

{

element_html += "<tr>"

obj_html += "<tr>"

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

{

element_html += "<td bgcolor=\"\" value=\"0\"></td>"

obj_html += "<td bgcolor=\"\" value=\"0\"></td>"

}

element_html += "</tr>"

obj_html += "</tr>"

}

element_html += "</table>"

obj_html += "</table>"

element_stage.innerHTML = element_html

obj_stage.innerHTML = obj_html

document.body.innerHTML +='<p align="right">第 <span id="game_number">1</span>局</p><p align="right">消除行数<br><span id="game_line">0</span></p><p align="right">游戏得分<br><span id="game_score">0</span></p>p align="right"></p><p align="right"><a href="javascript:" value="0" onclick="If_play(this.value)">开始</a></p>'

var map = new Array( //地图

"111000000000000111","111000000000000111","111000000000000111","111000000000000111","111000000000000111",

"222222222222222222","222222222222222222"

)

//-------------L------------// //演员表

var L1 = new Array("0000","1000","1000","1100")

var L2 = new Array("0000","0000","0010","1110")

var L3 = new Array("0000","0110","0010","0010")

var L4 = new Array("0000","1110","1000","0000")

//-------------L-------------//

//-------------J------------//

var J1 = new Array("0000","0010","0010","0110")

var J2 = new Array("0000","0000","1110","0010")

var J3 = new Array("0000","1100","1000","1000")

var J4 = new Array("0000","0000","1000","1110")

//-------------J-------------//

//-------------Z------------//

var Z1 = new Array("0000","0000","1100","0110")

var Z2 = new Array("0000","0100","1100","1000")

var Z3 = new Array("0000","0000","1100","0110")

var Z4 = new Array("0000","0100","1100","1000")

//-------------Z-------------//

//-------------S------------//

var S1 = new Array("0000","0000","0110","1100")

var S2 = new Array("0000","0100","0110","0010")

var S3 = new Array("0000","0000","0110","1100")

var S4 = new Array("0000","0100","0110","0010")

//-------------S-------------//

//-------------T------------//

var T1 = new Array("0000","0000","0100","1110")

var T2 = new Array("0000","0010","0110","0010")

var T3 = new Array("0000","1110","0100","0000")

var T4 = new Array("0000","1000","1100","1000")

//-------------T-------------//

//-------------M------------//

var M1 = new Array("0000","0000","1100","1100")

var M2 = new Array("0000","0000","1100","1100")

var M3 = new Array("0000","0000","1100","1100")

var M4 = new Array("0000","0000","1100","1100")

//-------------M-------------//

//-------------I------------//

var I1 = new Array("1000","1000","1000","1000")

var I2 = new Array("0000","0000","0000","1111")

var I3 = new Array("0010","0010","0010","0010")

var I4 = new Array("0000","0000","0000","1111")

//-------------I-------------//

//-------------演员位置表-------------//

var players = new Array("I","J","T","L","Z","S","M")

//----生成地图--------//

function get_color(color_value)

{

if(color_value=="1"||color_value=="2")

return "#000080"

else

return "#000000"

}

var map_html = '<table id="map_table" border="1" cellspacing="0" cellpadding="0" bgcolor="#000000" bordercolor="#000000">'

for(h=0h<map.lengthh++)

{

map_html+="<tr>"

for(w=0w<map[0].lengthw++)

{

map_html+="<td value=\""+map[h].charAt(w)+"\" bgcolor=\""+get_color(map[h].charAt(w))+"\">"

}

map_html +="</tr>"

}

map_html+="</table>"

stage.innerHTML = map_html

//----生成地图--------//

/****************************************** 上面是准备的代码****************************************************/

function Y_X(y,x) //设置角的对象

{

this.x = x

this.y = y

}

var game_l_u_angle = new Y_X(0,6) //方快初始左上角和右上角的 x y 坐标

var game_r_d_angle = new Y_X(3,9)

var left_up_angle = new Y_X(game_l_u_angle.y,game_l_u_angle.x)//现在的左上角的 x y 坐标

var right_down_angle = new Y_X(game_r_d_angle.y,game_r_d_angle.x)//现在的右上角的 x y 坐标

var block_color_1 = "#0099FF"//现在的方块的颜色

var block_color_0 = "" //背景颜色

var map_color_1 = "#000080"//map 背景颜色 1

var map_color_0 = "#000000" //背景颜色 0

var block_width = "22"//方块的边长

var block_height = "20"

var game_speed = 540 //游戏速度

var game_max_speed = Math.floor(game_speed/20)

var SHAPES = new Array("I","M","Z","J","T","S","L")// 方块形状数组

var shape_now = SHAPES[returnONE(6)] //现在的方块形状

var shape_will = SHAPES[returnONE(6)]//将来的方块形状

var shape_num = 1

var obj_start_left = 132//方块起始位置

var obj_start_top = 0

var can_move_block = false //设置用户是否可以移动方块

var can_play = false //游戏的开始

var one_score = 10 //一个的得分

var block_score = 4*one_score //一个方块的得分

var line_score = 12*one_score //一行的得分

/*******************************************上面是数据********************下面是具体运行函数************************/

//------------返回任意数--------------------//

function returnONE(JSnum){

JSnum = Math.round(JSnum*Math.random()*100/100)

return JSnum

}

//--------------返回最高-----------------------//

function return_TOP()

{

var block_value = ""

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

{

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

{

block_value = obj_table.rows(h).cells(w).value

if(block_value=="1")

return (h + left_up_angle.y)

}

//---------设置 obj 显示指定的 type+num 方块 -----------//

function set_block(obj,type,num)

{

var block = eval(type+num)//获得指定方块

var block_value = ""

var block_color = ""

for(h=0h<block.lengthh++)

{

for(w=0w<block[0].lengthw++)

{

block_value = block[h].charAt(w)

block_color = eval("block_color_" + block_value )

with(obj.rows(h).cells(w))

{

bgColor = block_color

value = block_value

}

//-------------使 obj 相对移动--------------//

function move_block_by(x,y)

{

left_up_angle.x += x

left_up_angle.y += y

right_down_angle.x += x

right_down_angle.y += y

obj_stage.style.pixelLeft = left_up_angle.x * block_width

obj_stage.style.pixelTop = left_up_angle.y * block_height

}

//---------------判断是否可以移动或变形 -------------//

function If_can_move(l_x,l_y,r_x,r_y) //用于常规判断

{

var obj_value = ""

var map_value = ""

var checker = 0

for(obj_h=0,h=l_yh<=r_yh++,obj_h++)

{

for(obj_w=0,w=l_xw<=r_xw++,obj_w++)

{

obj_value = obj_table.rows(obj_h).cells(obj_w).value

map_value = map_table.rows(h).cells(w).value

checker = parseInt(obj_value)+parseInt(map_value)

if(map_value=="2")

{

if(checker>2)

return false

}

else

{

if(checker>1)

return false

}

return true

}

function test_block(){} //用来生成载block value 的测试对象

var tester = null

function If_can_move_test(l_x,l_y,r_x,r_y) //用于变形判断

{

var obj_value = ""

var map_value = ""

var checker = 0

for(obj_h=0,h=l_yh<=r_yh++,obj_h++)

{

for(obj_w=0,w=l_xw<=r_xw++,obj_w++)

{

obj_value = eval("tester.value_"+obj_h+"_"+obj_w)

map_value = map_table.rows(h).cells(w).value

checker = parseInt(obj_value) + parseInt(map_value)

if(map_value=="2")

{

if(checker>2)

return false

}

else

{

if(checker>1)

return false

}

return true

}

//--------------设置背景颜色----------------------//

function set_map_bgcolor(l_x,l_y,r_x,r_y)

{

var obj_value = ""

for(obj_h=0,h=l_yh<=r_yh++,obj_h++)

{

for(obj_w=0,w=l_xw<=r_xw++,obj_w++)

{

obj_value = obj_table.rows(obj_h).cells(obj_w).value

if(obj_value=="1")

{

with(map_table.rows(h).cells(w))

{

value = obj_value

bgColor = eval("block_color_"+obj_value)

}

//---------------消除行 --------------------------------//

function delete_line(l_y,r_y)

{

var value_1_num = 0//为 1 的块数

var can_delete_num = map[0].length//可以删除的 value = 1 的 block 的总数

var can_delete = true

var the_block_value = "" //现在的block的value

for(h=l_yh<=r_yh++)

{

for(w=0w<can_delete_numw++)

{

the_block_value = map_table.rows(h).cells(w).value

if(the_block_value=="0"||the_block_value=="2")

{

can_delete = false

}

if(can_delete) //如果全部为1的话

{

map_table.deleteRow(h)

map_table.insertRow(0)

for(w=0w<map[0].lengthw++)

{

map_table.rows(0).insertCell()

map_table.rows(0).cells(w).value = map[0].charAt(w)

map_table.rows(0).cells(w).bgColor = eval("map_color_"+map[0].charAt(w))

}

game_line.innerText = ""+ (parseInt(game_line.innerText) + 1) + ""

game_score.innerText = ""+ (parseInt(game_score.innerText) + line_score) + ""

}

can_delete = true

}

//--------------方块移动主进程 down ----------------//

function down_block()

{

if(!can_play)

return

var check_l_y = left_up_angle.y + 1

var check_r_y = right_down_angle.y + 1

var judger = If_can_move(left_up_angle.x,check_l_y,right_down_angle.x,check_r_y)

if(judger)

{

move_block_by(0,1)

setTimeout("down_block()",game_speed)

}

else

{

can_move_block = false

var block_top = return_TOP()

if(block_top<=(game_l_u_angle.y+2))

{

if(confirm("游戏结束，是否继续？"))

{

window.location.reload()

}

else

{

return

}

else

{

set_map_bgcolor(left_up_angle.x,left_up_angle.y,right_down_angle.x,right_down_angle.y) //设置背景颜色和value

game_score.innerText = ""+ (parseInt(game_score.innerText) + block_score) + ""

if(parseInt(game_score.innerText)>=(parseInt(game_number.innerText)*20000)) //如果达到过局的分数

{

game_number.innerText = ""+(parseInt(game_number.innerText)+1)+""

game_speed = game_speed - 60

if(game_speed <=0 )

{

game_speed = 540 - (parseInt(game_number.innerText)-1)*60

if(game_speed <0)

{

alert("Win All")

return

}

game_max_speed = Math.floor(game_speed/20)

}

obj_stage.style.display = "none"

delete_line(left_up_angle.y,right_down_angle.y)

shape_now = shape_will

shape_will = SHAPES[returnONE(6)]

shape_num =1

set_block(obj_table,shape_now,shape_num)

set_block(element_table,shape_will,shape_num)

left_up_angle.x = game_l_u_angle.x

left_up_angle.y = game_l_u_angle.y

right_down_angle.x = game_r_d_angle.x

right_down_angle.y = game_r_d_angle.y

obj_stage.style.pixelLeft = left_up_angle.x * block_width

obj_stage.style.pixelTop = left_up_angle.y * block_height

obj_stage.style.display = "block"

can_move_block = true

setTimeout("down_block()",game_speed)

}

//-------------- 获取用户输入方向 -------------- //

function document.onkeydown()

{

if(!can_play) //如果不能玩，退出

return

if(!can_move_block) //如果不能移动。则退出

return

var key_code = event.keyCode

if(key_code == 37)

{

var check_l_x = left_up_angle.x - 1

var check_r_x = right_down_angle.x - 1

var judger= If_can_move(check_l_x,left_up_angle.y,check_r_x,right_down_angle.y)

if(judger)

move_block_by(-1,0)

else

return

}

if(key_code == 39)

{

var check_l_x = left_up_angle.x + 1

var check_r_x = right_down_angle.x + 1

var judger= If_can_move(check_l_x,left_up_angle.y,check_r_x,right_down_angle.y)

if(judger)

move_block_by(1,0)

else

return

}

if(key_code == 38)

{

shape_num++

if(shape_num>4)

shape_num = 1

tester = null

tester = new test_block()

var test_shape = eval(shape_now + shape_num)

for(h=0h<test_shape.lengthh++)

{

for(w=0w<test_shape[0].lengthw++)

{

eval("tester.value_"+h+"_"+w+"=test_shape["+h+"].charAt("+w+")")

}

var judger = If_can_move_test(left_up_angle.x,left_up_angle.y,right_down_angle.x,right_down_angle.y)

if(!judger)

{

shape_num--

}

else

{

set_block(obj_table,shape_now,shape_num)

}

if(key_code == 40)

{

game_speed = game_max_speed

}

function document.onkeyup()

{

game_speed = 540 - (parseInt(game_number.innerText)-1)*60

}

//-----------------游戏控制-----------------------////

function start_game(){ //游戏开始

can_play = true

can_move_block =true

set_block(obj_table,shape_now,shape_num)

set_block(element_table,shape_will,shape_num)

down_block()

}

function pause_game() //暂停游戏

{

can_play = false

can_move_block =false

}

function If_play(play_value)

{

if(play_value=="0") //如果是刚开始

{

start_game()

event.srcElement.value = "1"

event.srcElement.innerText = "暂停"

}

if(play_value=="1")

{

pause_game()

event.srcElement.value = "2"

event.srcElement.innerText = "开始"

}

if(play_value == "2")

{

can_play = true

can_move_block =true

down_block()

event.srcElement.value = "1"

event.srcElement.innerText = "暂停"

}

</script>

</body>

</html>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：电脑桌面图标怎么恢复原状布局

# 下一篇：R语言中的渐变色

推荐阅读

热门文章

最新发布

标签列表

JS 俄罗斯方块完美注释版代码

给您推荐相同类型的内容：