html5 Canvas实现的小球弹跳游戏

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>HTML5小球弹跳游戏</title>
<script type="text/javascript">
var BallX,BallY; //小球在canvas元素中的横坐标与纵坐标
var AddX,AddY; //小球每次移动时的横向移动距离与纵向移动距离
var width,height;//canvas元素的宽度与高度
var canvas;//canvas元素
var context;//canvas元素的图形上下文对象
var functionId;//用来停止动画函数的整型变量
//点击开始游戏按钮
function btnBegin_onclick()
{
    canvas=document.getElementById("canvas");//获取canvas元素
    width=canvas.width;//获取canvas元素的宽度
    height=canvas.height;//获取canvas元素的高度
    context=canvas.getContext('2d'); //获取canvas元素的图形上下文对象
    BallX=parseInt(Math.random()*canvas.width);//随机设置小球的当前横坐标
    BallY=parseInt(Math.random()*canvas.height);//随机设置小球的当前纵坐标
    AddX=-5;//设置小球每次横向移动距离为5
    AddY=-5;//设置小球每次纵向移动距离为5
    draw();//绘制矩形桌面与小球
　　//使开始游戏按钮变为无效
    document.getElementById("btnBegin").disabled="disabled";
    //每0.1秒重绘矩形桌面与小球，改变小球位置以产生动画效果
    functionId=setInterval("draw()",100);
}
//重绘矩形桌面与小球
function draw()
{
    context.clearRect(0,0,width,height);//清除canvas元素中的内容
    context.save();//保存当前绘制状态
    context.fillStyle="lightgreen"; //设置桌面为淡绿色
    context.strokeStyle="black";//设置桌面边框为黑色
    context.linewidth=3; //设置桌面边框宽度
    context.fillRect(3,3,width-5,height-5);//绘制淡绿色桌面
    context.strokeRect(3,3,width-5,height-5);//绘制桌面黑色边框。
    context.beginPath();//开始创建路径
    context.fillStyle="blue";//设置小球为蓝色
    context.arc(BallX,BallY,5,0,Math.PI * 2,false);//创建小球路径
    BallX+=AddX;//计算小球移动后的下次绘制时的横坐标
    BallY+=AddY;//计算小球移动后的下次绘制时的纵坐标
    if(BallX<5)//小球向左移动时位置超过左边框
    {
	BallX=5;//将小球移到桌面内
        AddX=-AddX;//改变小球移动方向，使其向右移动
    }
    else if(BallX>width-5)//小球向右移动时位置超过右边框
    {
        BallX=width-5;//将小球移到桌面内
        AddX=-AddX;//改变小球移动方向，使其向左移动
    }
    if(BallY<5)//小球向上移动时位置超过上边框
    {
        BallY=5;//将小球移到桌面内
        AddY=-AddY;//改变小球移动方向，使其向下移动
    }
    else if(BallY>height-5)//小球向下移动时位置超过下边框
    {
        BallY=height-5;//将小球移到桌面内
        AddY=-AddY;//改变小球移动方向，使其向上移动
    }
    context.closePath();//关闭路径
    context.fill(); //绘制小球
    context.restore();//恢复上次保存的绘制状态
}
function canvas_mouseup(ev)
{
    var differenceX;//鼠标击中点与小球中心点的横向偏差
    var differenceY; //鼠标击中点与小球中心点的纵向偏差
    //计算鼠标击中点与小球中心点的横向偏差
    differenceX=ev.pageX-document.getElementById("canvas").offsetLeft-BallX;
   //计算鼠标击中点与小球中心点的纵向偏差
    differenceY=ev.pageY-document.getElementById("canvas").offsetTop-BallY;
    //如果横向偏差与纵向偏差均在5个像素之内即为击中小球，因为小球的半径为5
    if(-5<=differenceX&&differenceX<=5)
        if(-5<=differenceY&&differenceY<=5)
        {
            alert("您获胜了！游戏结束");
            clearInterval(functionId);//停止动画
            //恢复开始游戏按钮为有效状态
            document.getElementById("btnBegin").disabled="";
        }
}
//画面打开时添加鼠标点击canvas元素时的事件处理
function window_onload()
{
    document.getElementById("canvas").onmouseup=canvas_mouseup;
}
</script>
</head>
<body onload="window_onload()">
<h1>html5 Canvas实现的小球弹跳游戏</h1>
<input type="button" id="btnBegin" value="开始游戏"
onclick="btnBegin_onclick()"/><br/>
<canvas id="canvas" width=400px height=200px></canvas>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

html5 Canvas实现的小球弹跳游戏

分类

HTML5代码

描述

html5Canvas实现的小球弹跳游戏，其实不能算是游戏，仅是实现了小球弹跳的整个过程，要想成为游戏，还需要添加一些游戏控制模块。现在HTML5网页游戏很流行，从小游戏开始，多看一些小游戏代码，对于HTML5网页游戏开发是有帮助的。...