<!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. hbase blocksize设置,与hdfs关系

    关于如何设定数据块的大小,我们应用一段HFile源码中的注释: 我们推荐将数据块的大小设置为8KB至1MB.大的数据块比较适合顺序的查询(比如Scan),但不适合随机查询,想想看,每一次随机查询可能都 ...

  2. 查找Safari相关迹证

    日前有取证的同好提及Safari,想了解详细步骤,因而在此再补充说明相关. 除了Winodws外,Mac OS X也有为数不少的使用者,以下便以OS X自带的Safari浏览器为例,来查看有哪些重要迹 ...

  3. Web发布 未能加载文件或程序集“”或它的某一个依赖项。系统找不到指定的...

    因为

  4. 用Zend Studio12 导入在workspace中的项目

    第一步: 文件(file)->新建(NEW)->其他(other) 第二步: 在打开的对话框里选择 常规(Genneral)->项目(Project) 第三步: 在打开的对话框输入项 ...

  5. 嵌入式linux移植LAMP服务器

    一.工具准备工作  要想在ARM平台上移植一套Apache+Msql+PHP的Web型服务器. 所用物理机系统: Ubuntu 14.04 LTS(64位) 交叉编译环境:   arm-linux-g ...

  6. 必须会的SQL语句(二) 创建表、修改表结构、删除表

    1.创建数据库表 --使用哪个数据库,如果不写这一句是默认的数据库,也可以用鼠标选当前数据库 use testDB --创建表    Create Table tablename    (       ...

  7. 简单linux块设备驱动程序

    本文代码参考<LINUX设备驱动程序>第十六章 块设备驱动程序 本文中的“块设备”是一段大小为PAGE_SIZE的内存空间(两个扇区,每个扇区512字节) 功能:向块设备中输入内容,从块设 ...

  8. Spring Richclient — 企业级富客户端开发框架介绍,第 1 部分

    Spring Richclient — 企业级富客户端开发框架介绍,第 1 部分 http://www.ibm.com/developerworks/cn/java/j-lo-spring-richc ...

  9. PHP基础笔记汇总

    一.PHP简介PHP:超文本预处理器(译者注:PHP: Hypertext Preprocessor,递归命名)PHP 是一种服务器端的脚本语言,类似 ASPPHP 文件的文件后缀是 ".p ...

  10. 关于Ajax跨域

    本人因工作需求,编写了一个测试页面,在页面填写完信息之后去向一个站点请求数据,然后返回结果!一开始是直接用Ajax在脚本中去访问,没有大碍(因为目标地址是本机上的一个网站),但是当站点去外部的网站时, ...