<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>弹弹球</title>

    <script type="text/ecmascript">

        var drawWorker;//重绘的事件

        var result = 0;//整形，游戏坚持的时间，秒

        var record = 0;//整形，游戏的记录

        var timeWorker;//计时的事件，每秒一次

        var pointRadius = 10;//球的半径

        var pointX = 20;//球的圆心x坐标

        var pointY = 20;//球的圆心y坐标

        var speedX = 10;//球向右移动的速度

        var speedY = 5;//球向下移动的速度

        var panelX = 0;//小方块的最左边的x坐标

        var panelY = 280;//小方块的最上端的y坐标

        var panelHeight = 20;

        var panelWidth = 100;

        var wholeWidth = 500;

        var wholeHeight = 300;

        var canvas;

        var ctx;

        function Init() {

            canvas=document.getElementById("myCanvas");

            ctx = canvas.getContext("2d");

            ctx.strokeRect(0, 0, wholeWidth, wholeHeight);

        }

        function DrawBall() {

            var ctx = document.getElementById("myCanvas").getContext("2d");

            ctx.clearRect(1, 1, wholeWidth-2, wholeHeight-2);　　　　　　　　　　　　//清理矩形范围

            pointX = pointX + speedX;//新的圆心x坐标

            pointY = pointY + speedY;//新的圆心y坐标

            ctx.beginPath();　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//弹弹球

            ctx.arc(pointX, pointY, pointRadius, 0, Math.PI * 2);

            ctx.closePath();

            ctx.fill();

            ctx.fillRect(panelX, panelY, panelWidth, panelHeight);　　　　　　　　　　//小方块

        }

        function MoveBall() {

            if (pointY >= wholeHeight - panelHeight) {

                if (pointX < panelX || pointX > panelX + panelWidth) {

                    EndGame();　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//越过小方块，游戏结束

                    return;

                }

                else {

                    speedX = speedX > 0 ? speedX + 5 : speedX - 5;　　　　　　　　　　　　//碰到小方块，小球加速

                    speedY = speedY > 0 ? speedY + 5 : speedY - 5;

                }

            }

            if (pointX >= wholeWidth || pointX<=0) {　　　　　　　　　　　　　　　　　　　　//接触到边界，对应的方向转向

                speedX = speedX - 2 * speedX;

            }

            if (pointY >= wholeHeight - panelHeight || pointY <= 0) {

                speedY = speedY - 2 * speedY;

            }

                DrawBall();

        }

        function MovePanel(event) {

            panelX = event.pageX - (panelWidth / 2);

        }

        function AddResult() {

            result = result + 1;

            var resultLabel = document.getElementById("currentLabel");

            resultLabel.textContent = result;

        }

        function Play() {

            pointX =Math.floor( Math.random() * 20) + 10;//球的圆心x坐标

            pointY = Math.floor(Math.random() * 20) + 10;//球的圆心y坐标

            speedX = 20;//球向右移动的速度

            speedY = 10;//球向下移动的速度

            result = 0;　　　　　　　　　　　　　　

            drawWorker = setInterval(MoveBall, 100);　　　　　　　　　　　　　　　　　　　　//每100毫秒就重绘小球跟小方块位置

            timeWorker = setInterval(AddResult, 1000);　　　　　　　　　　　　　　　　　　  //每秒更新结果

            canvas.addEventListener("mousemove", MovePanel, false);　　　　　　　　　　   //开始玩，需要将所有相关参数都再初始化

        }

        function EndGame() {　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //游戏结束

            clearInterval(timeWorker);　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //停止两个定时任务

            clearInterval(drawWorker);

            canvas.removeEventListener("mousemove", MovePanel, false);　　　　　　　　　　//移除鼠标移动事件的处理

            if (result > record) {

                record = result;

                var recordLabel = document.getElementById("recordLabel");

                recordLabel.textContent = result;

            }

            result = 0;

        }

    </script>

</head>

<body onload="Init();">

    <canvas id="myCanvas" width="500" height="300">your broswer does not support canvas.</canvas>

    <br />

    <input type="button" value="play" onclick="Play();" />

    <br />

    <label>本次结果：</label>

    <label id="currentLabel">0</label>

    <br />

    <label>最高纪录：</label>

    <label id="recordLabel">0</label>

</body>

</html>

上文代码实现了一个很基本的弹弹球游戏。

按下Play按钮，在Canvas范围内左右移动鼠标，滑块会随之移动。如果成功接住落下的小球则小球加速并且变向。当小球落在底框的时候游戏结束。游戏将会记录坚持的时间。

Html5最简单的游戏Demo——Canvas绘图的弹弹球的更多相关文章

  1. Html5最简单的游戏Demo——Canvas绘图的骰子

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  2. Html5 学习系列（五）Canvas绘图API快速入门（1）

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  3. HTML5 学习总结（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  4. HTML5 学习笔记（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  5. Html5 学习系列（五）Canvas绘图API快速入门（2）

    Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...

  6. HTML5 十大新特性(四)——Canvas绘图

    H5引入了canvas标签,默认是一个300*150的inline-block.canvas的宽高只能用它自身的width和height属性来指定,而不能使用css样式中的width.height. ...

  7. 【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习

    源自慕课网 效果如下: 全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  9. 怎样用HTML5 Canvas制作一个简单的游戏

    原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...

随机推荐

  1. 1028 C语言文法

    <程序> ->  <外部声明> |  <程序>  <外部声明> <外部声明>  ->   <函数定义>  |  &l ...

  2. hdu1864

    use the cnt as the limit. #include <string.h> #include <stdio.h> ],sum; ]; double a,b,c; ...

  3. WEB跨域的实现

    同源策略/SOP(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.CSFR等攻击(可以参考我的这篇文章). SOP要求 ...

  4. 使用NPOI操纵Excle，并输入到客户端

    NPOI下载:http://files.cnblogs.com/files/gosky/NPOI_2.2.0.0.zip 导入以下5个引用: ICSharpCode.SharpZipLib.dll N ...

  5. hdu 2255 奔小康赚大钱 KM算法

    看到这么奇葩的题目名我笑了,后来这么一个裸的KM调了2小时我哭了…… 这是个裸的KM算法,也没什么多说的,主要是注意多组数据时,每次都要把各种数组清空啊,赋值啊什么的,反正比较麻烦.至于为什么调了2小 ...

  6. windows phone主题切换(换肤)

    之前项目做了个主题切换的功能,最后客户没来得及出第二套界面给放弃了,默哀中... 为了不让它就这样流产了,就放博客共享吧. 首先说明下原理:这个切换是通过重写资源字典里指定的样式,在运行的过程中加载指 ...

  7. 搭建高性能计算环境（一）、Linux操作系统的安装和配置

    一般课题组刚开始做计算,往往没有专门的集群,主要用自己的PC机.工作站或者买几台服务器来跑跑:小伙伴们摸索Linux的使用.编译一些开源软件.甚至写点Shell脚本需要耗费很多时间,耽搁了读文献.码论 ...

  8. SQL Server编程（05）游标

    在关系数据库中,我们对于查询的思考是面向集合的.而游标打破了这一规则,游标使得我们思考方式变为逐行进行.对于类C的开发人员来着,这样的思考方式会更加舒服. 正常面向集合的思维方式是: 而对于游标来说: ...

  9. php读取文件时多了个%uFEFF[bom字符]，怎样去掉？

    今天从记事本文件中读取静态生成记录时,发现读出来的第一个链接打开的时候总是提示非法操作,把鼠标放到链接上发现链接的前面多了个%uFEFF, 百度一查,原来这是好多人都有遇到过的bom头问题,特地记录下 ...

  10. js数组的内部实现,迭代器,生成器和内包

    js内部实现 在js以外的很多语言中,数组将会隐式占用一段连续的内存空间.这种隐式的内部实现,使得高效的内存使用及高速的元素方法称为可能,而 在javascript中,数组实体是一个对象,所以通常的实 ...