HTML5游戏开发---弹跳球

最新推荐文章于 2021-10-21 20:46:06 发布

licl19870605

最新推荐文章于 2021-10-21 20:46:06 发布

阅读量1.8k

点赞数

分类专栏： HTML5+JS+CSS

本文链接：https://blog.csdn.net/licl19870605/article/details/8142498

版权

HTML5+JS+CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本游戏涉及的知识点有：

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>

下面是运行结果：

下面是用于绘制小球的图片：

licl19870605

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5游戏开发---弹跳球

本游戏涉及的知识点有： 1.绘制球、图像和渐变 2.定时事件和碰撞检测第一个版本 form { width:330px; margin:20px; background-color:brown; padding:20px; } // 盒子左上角位置 var boxX = 20; var boxY = 30;
复制链接

扫一扫