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>
下面是运行结果：
本游戏涉及的知识点有：
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>
下面是运行结果：
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5游戏开发---弹跳球
本文地址： https://pptw.com/jishu/586503.html