HTML5游戏开发---弹跳球
本游戏涉及的知识点有：
1.绘制球、图像和渐变
2.定时事件和碰撞检测
[html]
<!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>
下面是运行结果：
下一篇： 师傅，外面有一施主求见