正文{margin:0px;}优秀的程序员共享js实现一个简单的板球比赛。大家好，这次我们将使用js来实现一个简单的板球比赛。截图如下：首先，设计页面代码。页面代码很简单，因为整个页面几乎都是js写的，页面上几乎没有代码，如下：正文{margin:0px;}接下来是主要的js代码common.js，如下：//画布的宽高varcanvasWidth;varcanvasHeight;//方块的背景图片varbg;//球varball;//棋盘varboard;//背景方块的宽度varbreakWidth;//球的坐标和速度varballX=100;varballY；varxVal=5；varyVal=-5;//棋盘的坐标varboardX=0;varboardY;//方块数组varbreakers=[];//棋盘的原始长度varboardWidth=242;//时序变量vartime=0;//记录是否改变状态varbreakerChanged=false;变量col=10;window.onload=function(){//创建并设置画布varcanvas=document.createElement("canvas");canvas.width=window.innerWidth;canvas.高度=窗口。内部高度；canvasWidth=canvas.width;canvasHeight=canvas.height;breakWidth=(canvasWidth-10)/col;//给body添加画布document.body.appendChild(canvas);varcontext=canvas.getContext("2d");//小球Y初始值ballY=canvasHeight-80;//棋盘Y初始值boardY=canvasHeight-20;//加载所有图片loadAllImage();//定义键盘响应事件文档。onkeydown=boardMove;//启动程序setInterval(run,20);functionrun(){//清除画布context.clearRect(0,0,canvasWidth,canvasHeight);//绘制背景、球、棋盘context.drawImage(bg,0,-50,canvasWidth,canvasHeight+50);context.drawImage(ball,ballX,ballY);context.drawImage(board,boardX,boardY,board.width,board.height);//如果在加长的过程中if(breakerChanged){//继续计时time++;//当时间达到5秒时if(time>=250){//恢复breakerChanged=false;时间=0；board.width=boardWidth;}}//绘制盒子updateBreakers();//更新球的位置updateBall();//小球和方块bal的碰撞lHitBreakers();//球与板的碰撞ballHitBoard();}functionboardMove(){//向左移动if(event.keyCode==37){boardX-=30;如果（boardX<=0）{boardX=0;}}//向右移动elseif(event.keyCode==39){boardX+=30;如果（boardX>=canvasWidth-board.width）{boardX=canvasWidth-board.width;}}}//简单判断球与板碰撞函数ballHitBoard(){if(hit(boardX,boardY-60,board.width,board.height,ballX,ballY)){yVal=-yVal;}}//球和板块碰撞函数的简单判断ballHitBreakers(){//从后面循环for(vari=breakers.length-1;i>=0;i--){varbreaker=breakers[i];//3个属性,item,x,y//如果碰撞if(hit(breaker.x,breaker.y,breakWidth,30,ballX,ballY)){//状态可变长度if(breaker.state==1){//判断是否已经处于变长状态if(breakerChanged){//如果变长了，应该刷新时间board.width=boardWidth*1.5;时间=0；}else{//如果开始变长，改变状态board.width=boardWidth*1.5;断路器改变=真；}}elseif(breaker.state==2){//判断是否一直处于变长状态if(breakerChanged){//如果变长了，应该刷新时间board.width=boardWidth*0.5；时间=0；}else{//如果开始变长，改变状态board.width=boardWidth*0.5;断路器改变=真；}}//块消失（数组删除一个元素）breakers.splice(i,1);//球返回yVal=-yVal;}}}//简单碰撞函数functionhit(bx,by,bw,bh,x,y){if(x>=bx&&x<=bx+bw&&y>=by&&y<=by+bh){返回真；}else{返回错误；}}//小球运动函数updateBall(){ballX+=xVal;球Y+=yVal；//左边距if(ballX<=0){xVal=-xVal;}//靠近顶部的边距if(ballY<=30){yVal=-yVal;}//测试代码使球永远不会掉落//if(ballY>=canvasHeight-80){//yVal=-yVal;//}//接近右边距if(ballX>=canvasWidth-60){xVal=-xVal;}}//加载所有方块functioncreateBreakers(){//循环行for(vari=0;i
