<!--****************************************************************************************************
* 作者:鲲鹏击浪
* 学院:http://edu.51cto.com/lecturer/index/user_id-8897792.html
* 博客园:http://www.cnblogs.com/xietong/
* 微博:http://weibo.com/u/3203486241?source=blog&is_all=1
* 博客:http://blog.sina.com.cn/51jilang
* *************欢迎学习我的课程,关注我的博客等**************************************************************
* ***********************************************************************************************************-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>弹球游戏</title>
<style type="text/css">
#sub {
width: 300px;
height: 200px;
background-color: brown;
}
input:valid {
background:green;}
input:invalid {
background:red;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="300">你的浏览器不支持canvas</canvas>
<form id="sub" onsubmit="return change();" >
水平位移:<input type="number" value="4" min="1" max="10" id="hv"/>
<br />
垂直位移: <input type="number" value="8" min="1" max="10" id="vv" />
<br />
<input type="submit" value="change"/>
</form>
<script type="text/javascript">
var boxWidth = 350;//盒子宽度
var boxHeight = 250;//盒子高度
var ballRadius = 20;//弹球半径
var boxX = 20;
var boxY = 20;//盒子左上角坐标
var ballX = 80;
var ballY = 100;//球的初始位置
var boxEndX = boxWidth + boxX;
var boxEndY = boxY + boxHeight;//盒子右下角坐标
var hv = 4;//水平速度
var vv = 8;//垂直速度
var lineWidth = ballRadius;
var ctx;
var img = new Image();
img.src = "Images/ball.jpg";//图像
var hu = [[255, 0, 0], [255, 255, 0], [0, 255, 0], [0, 255, 255], [0, 0, 255], [255, 0, 255]];
window.onload = function () {
ctx = document.getElementById("myCanvas").getContext("2d");
var grad = ctx.createLinearGradient(boxX, boxY, boxEndX, boxEndY);
var maxh= hu.length-1;
for (h = 0; h < hu.length; h++)
{
var color = "rgb(" + hu[h][0] + "," + hu[h][1] + "," + hu[h][2] + ")";
grad.addColorStop(h / maxh, color);
}
ctx.fillStyle = grad;
setInterval(moveBox, 100);
};
function moveBox() {
ctx.clearRect(boxX, boxY, boxWidth, boxHeight);
checkCrash();
ctx.drawImage(img, 2, 2, 1000, 1000, ballX - ballRadius, ballY - ballRadius, 2 * ballRadius, 2 * ballRadius);
ctx.fillRect(boxX - ballRadius, boxY - ballRadius, ballRadius, boxHeight + 2 * ballRadius);
ctx.fillRect(boxX, boxY - ballRadius, ballRadius + boxWidth, ballRadius);
ctx.fillRect(boxX, boxEndY, ballRadius + boxWidth, ballRadius);
ctx.fillRect(boxEndX, boxY, ballRadius, boxHeight);
}
//移动并检验是否碰撞
function checkCrash() {
var nballx = ballX + hv;
var nbally = ballY + vv;
if (nballx <= boxX + ballRadius) {
nballx = boxX + ballRadius;
hv = -hv*0.9;
}
if (nballx + ballRadius >= boxEndX) {
nballx = boxEndX - ballRadius;
hv = -hv*0.9;
}
if (nbally <= boxY + ballRadius) {
nbally = boxY + ballRadius;
vv = -vv*0.9;
}
if (nbally + ballRadius >= boxEndY) {
nbally = boxEndY - ballRadius;
if (vv < 1) vv = 0;
vv = -vv * 0.9;
}
if (hv >= 0.5 || hv <= -0.5||hv==0) {
hv += 0.5;
}
ballX = nballx;
ballY = nbally;
}
function change() {
hv = document.getElementById("hv").value*(hv>0?1:-1);
vv = document.getElementById("vv").value * (vv > 0 ? 1 : -1);
return false;
}
</script>
</body>
</html>
html5弹球游戏
需积分: 50 179 浏览量
2016-06-12
14:52:11
上传
评论 2
收藏 55KB 7Z 举报
kunpengjilang
- 粉丝: 8
- 资源: 25
最新资源
- NetOps-py通过sftp替换网络设备启动文件
- STM32单片机FPGA毕设电路原理论文报告任务驱动教学法在单片机课程教学中的应用
- STM32单片机FPGA毕设电路原理论文报告任务驱动法在单片机教学中的应用
- STM32单片机FPGA毕设电路原理论文报告人造金刚石压机智能化压力测控系统设计
- 以某列为依据匹配多项(Excel版)
- STM32单片机FPGA毕设电路原理论文报告人体短臂离心机实验台的显示控制系统
- STM32单片机FPGA毕设电路原理论文报告人工气候室监控系统的环境控制器研究
- STM32单片机FPGA毕设电路原理论文报告染整自动线张力控制系统的设计
- 数据挖掘与机器学习-实验
- 基于Linux系统Nginx的动态网站的LNMP环境源码包
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈