HTML5游戏开发---弹跳球

来源：互联网发布：网络语言的利与弊作文编辑：程序博客网时间：2024/05/17 03:33
本游戏涉及的知识点有：
1.绘制球、图像和渐变
2.定时事件和碰撞检测
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>第一个版本</title><style>form {width:330px;margin:20px;background-color:brown;padding:20px;}</style>    <script type="text/javascript">// 盒子左上角位置var boxX = 20;var boxY = 30;// 盒子大小var boxWidth = 350;var boxHeight = 250;// 小球大小var ballRadius = 10;// 碰撞检测位置var boxBoundLeft = boxX + ballRadius;// 左边界var boxBoundRight = boxX + boxWidth - ballRadius;// 右边界var boxBoundTop = boxY + ballRadius;// 上边界var boxBoundBottom = boxY + boxHeight - ballRadius;// 下边界// 小球位置var ballX = 50;var ballY = 50;// 小球位移var ballDx = 4;var ballDy = 8;var ctx ;// 用于填充球的图片var img = new Image();img.src = "pearl.jpg";// 用于绘制墙的渐变var grad ;// 用于渐变的填充颜色var hue = [[255,0,0],[255,255,0],[0,255,0],[0,255,255],[0,0,255],[255,0,255]];function init(){ctx = document.getElementById("canvas").getContext("2d");ctx.lineWidth = ballRadius;grad = ctx.createLinearGradient(boxX,boxY,boxX+boxWidth,boxY+boxHeight);// 遍历取出没一个颜色的RGB值for(var h = 0; h <hue.length; h++){var color = "rgb("+hue[h][0]+","+hue[h][1]+","+hue[h][2]+")";grad.addColorStop(h/6,color);}ctx.fillStyle = grad;moveball();setInterval(moveball,30);}function moveball(){// 清空画布ctx.clearRect(boxX,boxY,boxWidth,boxHeight);// 绘制墙体// 绘制左墙ctx.fillRect(boxX,boxY,ballRadius,boxHeight);// 绘制右墙ctx.fillRect(boxBoundRight,boxY,ballRadius,boxHeight);// 绘制上墙ctx.fillRect(boxX,boxY,boxWidth,ballRadius);// 绘制下墙ctx.fillRect(boxX,boxBoundBottom,boxWidth,ballRadius);//ctx.strokeRect(boxX,boxY,boxWidth,boxHeight);// 碰撞检测boundCheck();ctx.beginPath();// 绘制小球//ctx.arc(ballX,ballY,ballRadius,0,2 * Math.PI,true);ctx.drawImage(img,ballX-ballRadius,ballY-ballRadius,2 * ballRadius, 2 * ballRadius);ctx.fill();ctx.closePath();}function boundCheck(){// 计算小球的新位置var tmpBallX = ballX + ballDx;var tmpBallY = ballY + ballDy;// 到达左边界if(tmpBallX < boxBoundLeft){ballDx = -ballDx;// 改变水平移动的位置tmpBallX = boxBoundLeft;// 小球水平的位置为左边界位置}// 到达右边界if(tmpBallX > boxBoundRight){ballDx = -ballDx;// 改变水平移动的位置tmpBallX = boxBoundRight;// 小球的水平位置为左边界位置}// 到达上边界if(tmpBallY < boxBoundTop){ballDy = -ballDy;// 改变垂直移动的位置tmpBallY = boxBoundTop;// 小球的垂直位置为上边界}// 到达下边界if(tmpBallY > boxBoundBottom){ballDy = -ballDy;// 改变垂直移动的位置tmpBallY = boxBoundButtom;// 小球的垂直位置为下边界}ballX = tmpBallX;ballY = tmpBallY;}function change(){ballDx = Number(document.getElementById("hv").value);ballDy = Number(document.getElementById("vv").value);return false;}</script></head><body onLoad="init();">  <canvas id="canvas" width="400" height="300">Your browser doesn't support the HTML5 element canvas.</canvas>  <br/><form name="f" id="f" onSubmit="return change();">  Horizontal velocity <input name="hv" id="hv" value="4" type="number" min="-10" max="10" /> <br>  Vertical velocity <input name="vv" id="vv" value="8" type="number" min="-10" max="10"/><input type="submit" value="CHANGE"/></form> </body></html>
下面是运行结果：
下面是用于绘制小球的图片：