📄 碰撞弹球.htm

📁 VBSCRIPT的源码,相信很多html程序员都会用到,这些源码小小变动一下,可以用在很多地方,尤其在DHTML中!
💻 HTM
字号:
<html>
<head>
<title>
	碰撞弹球
</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
div{font-size:50%}
.show{visibility:visible}
.hide{visibility:hidden}
</style>
</head>

<script LANGUAGE="VBScript">
<!--
'移动球的过程
sub moveball
dim tmp_x,tmp_y,x,y,src,isbrick
'取得球的运行坐标
x=ball.style.posLeft
y=ball.style.posTop
'预测球的飞行下一步的坐标
tmp_x=x+stepx*ballx
tmp_y=y+stepy*bally
'建立对象引用,指向球下一步坐标处的元素,由于球的z坐标为-1,因此返回的就是屏幕上的其他元素
set src=document.elementFromPoint(tmp_x,tmp_y)
'isbrick变量表示是否将要碰到边框,砖块或底盘
isbrick=instr(1,src.id,"brick")
'如果碰到了上述事物
if isbrick=1 then 
'根据对象的id作不同的处理
select case src.id
'碰到了顶框
case "bricktop"
	'改变y向飞行方向
	bally=1
	exit sub
'碰到了底框
case "brickbottom"
	 msgbox "游戏失败",1,"提示"
		restart
		exit sub
'碰到了左边框
case "brickleft"
	'改变x向飞行方向
	ballx=1
	exit sub
'碰到了右边框
case "brickright"
	'改变x向飞行方向
	ballx=-1
	exit sub
'碰到了底盘
case "brickplate"
	'改变y向飞行方向
	bally=-1
	exit sub 
'碰到了其他部分,意味着碰到了砖块
case else
	'隐藏该砖块
	src.className="hide"
	'改变y向飞行方向
	bally=bally*(-1)
	'定义一个临时标志
	'用来判断是否所有的砖块都被碰到了
	flag=true
	for i=1 to 16
	if document.all("brick"&i).className="show" then 
	flag=false
	exit for
	end if
	next
	'如果砖块碰光了
	if flag then 
	'重新开始
	msgbox "win"
	restart
	end if
	exit sub
end select
else
	'如果没有碰到任何事物
	'刷新新的飞行位置
	ball.style.posLeft=tmp_x
	ball.style.posTop=tmp_y
end if 
end sub

'用户点击鼠标时的事件
sub getkey
'点一次,开始
'再点一次,结束
if startsign=1 then 
endit
else
start
end if
end sub
'处理鼠标移动事件,控制底盘的移动
sub handle
dim tmp_x
'处理底盘的位置,window.event.x/620为鼠标在浏览器中的相对位置,转换为在容器内的底盘位置
tmp_x=(window.event.x/620)*190+190
'控制右边缘
if tmp_x>380 then tmp_x=380
'将此位置赋给底盘
brickplate.style.posLeft=tmp_x
'如果游戏还未开始,则地盘带动球移动
if startsign=0 then
'等于底盘当前位置加上起始位置差
ball.style.posLeft=brickplate.style.posLeft+(294-283)
end if 
end sub
'重新开始游戏
sub restart
'清除计时器标志
clearInterval(tid)
'重置各砖块
for i=1 to 16
set tmp=document.all("brick"&i)
tmp.className="show"
next
'重置开始标志
startsign=0
'重置球和底盘的位置
brickplate.style.posLeft=283
ball.style.posLeft=294
ball.style.posTop=322
'调用启动过程
start
end sub
'定义公共变量
'tid为计时器变量
dim ballx,bally,stepx,stepy,startsign,tid
ballx=1
bally=-1
'球的飞行步长
stepx=1
stepy=1
'开始标志
startsign=0

'启动飞行过程
sub start
'如果开始标志为假 
if startsign=0 then 
	'重置开始标志
	startsign=1
	'重置飞行方向
	bally=-1
	ballx=1
	'启动计时器,这个计时器将自动每隔一段时间调用参数中的代码,如果不调用clearInterval函数就不会停止
	tid=setInterval("moveball",20)
end if 
end sub

'结束飞行过程
sub endit
'如果开始标志为真
if startsign=1 then
	'清除计时器标志
	clearInterval(tid)
	'清除开始标志
	startsign=0
	'将球和底盘复位
	brickplate.style.posLeft=285
	ball.style.posLeft=294
	ball.style.posTop=322
end if 
end sub
   sub bodyname_onclick
   	call getkey
   end sub
   sub bodyname_onmousemove
   	call handle
   end sub 
   
-->
</script>

<body background="1.jpg" id=bodyname>
<center>
<div id="bricktop" style="BACKGROUND: url(1.gif) yellow fixed repeat-x left top; HEIGHT: 10px; LEFT: 180px; POSITION: absolute; TOP: 10px; WIDTH: 240px; ZINDEX: 0"></div>
<div id="brickbottom" style="BACKGROUND: url(1.gif) yellow fixed repeat-x left top; HEIGHT: 10px; LEFT: 180px; POSITION: absolute; TOP: 340px; WIDTH: 240px; ZINDEX: 0"></div>
<div id="brickleft" style="BACKGROUND: url(1.gif) yellow fixed repeat-y left top; HEIGHT: 320px; LEFT: 180px; POSITION: absolute; TOP: 20px; WIDTH: 10px; ZINDEX: 0"></div>
<div id="brickright" style="BACKGROUND: url(1.gif) yellow fixed repeat-y left top; HEIGHT: 320px; LEFT: 410px; POSITION: absolute; TOP: 20px; WIDTH: 10px; ZINDEX: 0"></div>


<div id="brick1" style="BACKGROUND: url(2.gif) green fixed repeat-x left top; HEIGHT: 10px; LEFT: 195px; POSITION: absolute; TOP: 35px; WIDTH: 30px" class="show"></div>
<div id="brick2" style="BACKGROUND: url(2.gif) green fixed repeat-x left top; HEIGHT: 10px; LEFT: 255px; POSITION: absolute; TOP: 35px; WIDTH: 30px" class="show"></div>
<div id="brick3" style="BACKGROUND: url(2.gif) green fixed repeat-x left top; HEIGHT: 10px; LEFT: 315px; POSITION: absolute; TOP: 35px; WIDTH: 30px" class="show"></div>
<div id="brick4" style="BACKGROUND: url(2.gif) green fixed repeat-x left top; HEIGHT: 10px; LEFT: 375px; POSITION: absolute; TOP: 35px; WIDTH: 30px" class="show"></div>


<div id="brick5" style="BACKGROUND: url(2.gif) green fixed repeat-x left top; HEIGHT: 10px; LEFT: 195px; POSITION: absolute; TOP: 55px; WIDTH: 30px" class="show"></div>
<div id="brick6" style="BACKGROUND: url(2.gif) green fixed repeat-x left top; HEIGHT: 10px; LEFT: 255px; POSITION: absolute; TOP: 55px; WIDTH: 30px" class="show"></div>
<div id="brick7" style="BACKGROUND: url(2.gif) green fixed repeat-x left top; HEIGHT: 10px; LEFT: 315px; POSITION: absolute; TOP: 55px; WIDTH: 30px" class="show"></div>
<div id="brick8" style="BACKGROUND: url(2.gif) green fixed repeat-x left top; HEIGHT: 10px; LEFT: 375px; POSITION: absolute; TOP: 55px; WIDTH: 30px" class="show"></div>


<div id="brick9" style="BACKGROUND: url(2.gif) green fixed repeat-x left top; HEIGHT: 10px; LEFT: 195px; POSITION: absolute; TOP: 75px; WIDTH: 30px" class="show"></div>
<div id="brick10" style="BACKGROUND: url(2.gif) green fixed repeat-x left top; HEIGHT: 10px; LEFT: 255px; POSITION: absolute; TOP: 75px; WIDTH: 30px" class="show"></div>
<div id="brick11" style="BACKGROUND: url(2.gif) green fixed repeat-x left top; HEIGHT: 10px; LEFT: 315px; POSITION: absolute; TOP: 75px; WIDTH: 30px" class="show"></div>
<div id="brick12" style="BACKGROUND: url(2.gif) green fixed repeat-x left top; HEIGHT: 10px; LEFT: 375px; POSITION: absolute; TOP: 75px; WIDTH: 30px" class="show"></div>


<div id="brick13" style="BACKGROUND: url(2.gif) green fixed repeat-x left top; HEIGHT: 10px; LEFT: 195px; POSITION: absolute; TOP: 95px; WIDTH: 30px" class="show"></div>
<div id="brick14" style="BACKGROUND: url(2.gif) green fixed repeat-x left top; HEIGHT: 10px; LEFT: 255px; POSITION: absolute; TOP: 95px; WIDTH: 30px" class="show"></div>
<div id="brick15" style="BACKGROUND: url(2.gif) green fixed repeat-x left top; HEIGHT: 10px; LEFT: 315px; POSITION: absolute; TOP: 95px; WIDTH: 30px" class="show"></div>
<div id="brick16" style="BACKGROUND: url(2.gif) green fixed repeat-x left top; HEIGHT: 10px; LEFT: 375px; POSITION: absolute; TOP: 95px; WIDTH: 30px" class="show"></div>

<img id="ball" src="ball.gif" style="HEIGHT: 8px; LEFT: 294px; POSITION: absolute; TOP: 322px; WIDTH: 8px; ZINDEX: -2" WIDTH="118" HEIGHT="118">
<div id="brickplate" style="BACKGROUND: url(2.gif) green fixed repeat-x left top; HEIGHT: 10px; LEFT: 283px; POSITION: absolute; TOP: 330px; WIDTH: 30px"></div> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<strong>
<h2>单击鼠标左键时，游戏开始</h2>
</string>
<center>
</body>
</html>
💿 文件大小 191 K
👤 上传用户 fairbank
📂 所属分类 Internet/网络编程
🏷️ 相关标签

#VBSCRIPT #DHTML #html #源码
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -