Html5让游戏制作变得简单，html制作超级好玩的弹球游戏。

代码如下：

！声明文档类型

头

style type='text/css '。面板{

相对位置：

z-index : 0；

top:0px

左侧： 400px

宽度： 300px

高度： 500px

}。控制台{

位置：

z-index : 1；

top:0

left:0

宽度：;

高度： 40px

背景-颜色： # BBB

}。消息{

位置：

z-index : 1；

top:40px

left:0

宽度：;

高度： 460px

颜色：白色；

font-size : 50px

文本-对齐：中心；

线高： 460 px

背景色： # 999;

}。开始。得分。暂停{

位置：

z-index : 2；

top : 0；

宽度： 100 px

高度： ;

font-size:大号；

颜色：白色；

文本-对齐：中心；

线高： 40px

背景：-网络套件-线性-梯度(顶部，#4ca8ff，黄色);

}。开始{

left: 0px

}。得分{

左侧：100像素

背景色：红色；

}。暂停{

左侧：200像素

}。之后开始：pause:before{

内容： " "；

位置：

z-index : 2；

top : 0；

宽度： 3px

高度： ;

背景：-网络套件-线性-梯度(顶部，#666,# 999);

}。开始：后

left: 97px

}。pause:before{

left: 0px

}。start:hover。pause:hover{

cursor:指针；

背景：-网络套件-线性-梯度(顶部，#4ca8ff，红色);

}。面板跨度

位置：

z-index : 0；

前：50%；

左侧： 50%;

font-size : 50px

颜色：蓝色；

}。球秒球

位置：值；

z-index : 2；

边界半径：50%;

宽度： 20像素

高度： 20像素

}。ball{

top: 460px

左侧：140px

背景色：红色；

}。secondBall{

top: 40px

左侧：140px

背景色：红色；

}。盘子{

位置：

top:480px

left: 100px

z-index : 2；

宽度： 100 px

高度： 20像素

背景-color : # e5e5e 5；

}。promte {

margin-top : 20px；

文本-对齐：中心；

}

/style

/head

身体

div id='panel' class='panel '

' div class='控制台'

div id='start' class='start '开始/div

div id=' score ' class=' score ' 0/div

div id='pause' class='pause '暂停/div

/div

div id=' message ' class=' message '/div

div id='ball' class='ball'/div

div id='plate' class='plate'/div

/div

div class=' promte '提示：键盘左右箭头控制滑板/div

脚本类型='text/javascript '

(function(){

文件。onkey down=function(e){

var e=e | | window.event

if(e.keyCode==37){

//键盘向左键

板块移动('左')；

}else if(e.keyCode==39){

//键盘向右键

plateMove('右');

}

}

})();

var panel=document。getelementbyid(' panel ')，

message=document。getelementbyid(' message ')，

plate=文档。getelementbyid(' plate ')，

ball=文档。getelementbyid(' ball ')，

start=document。getelementbyid(' start ')，

score=文档。getelementbyid(' score ')，

pause=document。getelementbyid(' pause ')，

第二个球

var startGame，x=x2=-1，y=y2=-1，speed=1，positionArr=[]，pauseActive=false，

//一个标志：表示难度是否还能增加

flag=true，

//球的起始位置

ballX，ballY，secondBallX，secondBallY，

//边界

minX=0，

maxX=面板。界外球。在中间，

minY=40

maxY=面板。偏移光球。偏移光板。向右偏移；

window.onload=function(){

if(window.addEventListener){

start.addEventListener('click '，startClick，false)；

pause.addEventListener('click '，pauseClick，false)；

}else if(window.attachEvent){

start.attachEvent('onclik '，StartClick)；

pause.attachEvent('onclik '，pauseClick)；

}else{

start.onclik=startClick

pause.onclik=pauseClick

}

}

功能板移动（方向){

if(方向=='左'){

if(plate.offsetLeft 0)

盘子。风格。左=(车牌。offsetleft-30 0？0 :板。offset left-30)' px '；

}

}

if(direction=='right'){

if(plate.offsetLeft 200){

盘子。风格。左=(车牌。离岸30 200？200 :板。offset left 30)' px '；

}

}

}

函数startClick(){

if(！暂停活动){

resetGame()；

}else{

pauseActive=！贫乏的；

}

startGame=SetInterval(function(){

//控制台。log(BALx '=====' BALy)；

位置arr=设定位置(BalX，BalY，true)；

if(positionArr=='GAMEOVER'){

返回；

}

balLx=位置arr[0]；

ballY=位置arr[1]；

//设置球的位置

球。风格。left=BalX ' px

球。风格。top=Bally ' px

if(！标志){

positionArr=设置位置(second ballx，secondBallY，false)；

secondBallX=位置arr[0]；

第二个bally=位置arr[1]；

第二个球。风格。left=第二个ballx ' px

第二个球。风格。top=第二个bally ' px

}else{

addDistance()；

}

},30);

}

函数pauseClick(){

贫乏=真实

clearInterval(startGame)；

}

函数ResetName(){

clearInterval(startGame)；

message.innerHTML=

score.innerHTML=' 0

球。风格。left=' 140 px

球。风格。top=' 460 px

盘子。风格。left=' 100 px

盘子。风格。top=' 480 px

ballX=ball.offsetLeft

ballY=ball.offsetTop

速度=1;

标志=真

//第二个球设置隐藏

if(secondBall){

第二个球。风格。显示=' none

第二个球。风格。left=' 140 px

第二个球。风格。top=' 40px

}

}

函数AddDistance(){

if(Parseint(分数。innerhtml)500 Parseint(分数。innerhtml)2000){

速度=1.2;

} else if(Parsent(score。innerhtml)2000 Parsent(分数。innerhtml)5000){

速度=1.5;

} else if(Parsent(score。innerhtml)5000){

if(第二个球的类型！='undefined'){

第二个球。风格。display=

}else{

第二个球=文档。create ElEMENT(' div ')；

}

第二个球。class name=' second ball

面板。appendchild(第二个球)；

secondBallX=secondball。offsetleft

第二个球。偏移顶部；

flag=false

}

}

函数设置位置(_x，_y，firstball){

if(_x==minX || _x==maxX){

//x *=-1；

次舞会？x *=-1 : x2 *=-1；

}

if(_y==minY || _y==maxY){

//y *=-1；

次舞会？y *=-1 : y2 *=-1；

}

if(_y==maxY){

//判断挡板的位置是不是在球的范围内

if(车牌。offset left _ x | |(板。偏左板。偏移量为)_ x){

clearInterval(startGame)；

message.innerHTML=' GAMEOVER

返回“GAMEOVER”；

}

}

if(firstball){

_ x=4 * x *速度；

_ y=5 * y *速度；

}else{

_ x=4 * x2 *速度；

_ y=5 * y2 *速度；

}

//边界处理

_x=_x minX？minX : _ x；

_x=_x maxX？maxX : _ x；

_y=_y minY？minY : _ y；

_y=_y maxY？maxY : _ y；

//设置分数

得分。innerhtml=parseInt(分数。innerhtml)10 *速度；

return [_x，_ y]；

}

/script

/body

/html