<!DOCTYPE html>
<head>
<title>text</title>
<style>
html,body{ margin:0; padding:0;}
</style>
</head>
<body>
<canvas id="mycircle" width="400" height="300" style="border:1px solid #333; position:absolute; left:0; top:0;"></canvas>
<script type="text/javascript">
var Circle = function(){
this.x = 0;
this.y = 0;
this.radius = 50;
this.z = 0;
this.vx = 5;
this.vy = 5;
this.color = '#000000';
}
Circle.prototype.hitTestPoint = function(point){
return (point.x-this.x)*(point.x-this.x) + (point.y-this.y)*(point.y-this.y) < this.radius *this.radius;
}
var mouse = {x:-1000,y:-1000};
var circle = new Circle();
var ctx = document.getElementById("mycircle").getContext("2d");
function loop(){
circle.x += circle.vx;
circle.y += circle.vy;
if(circle.x>ctx.canvas.width-circle.radius){
circle.x = ctx.canvas.width-circle.radius
circle.vx *= -1;
}
if(circle.x<circle.radius){
circle.x = circle.radius;
circle.vx *= -1;
}
if(circle.y>ctx.canvas.height-circle.radius){
circle.y = ctx.canvas.height-circle.radius
circle.vy *= -1;
}
if(circle.y<circle.radius){
circle.y = circle.radius;
circle.vy *= -1;
}
circle.color = circle.hitTestPoint(mouse)?'#ff0000':'#000000';
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fillStyle = circle.color;
ctx.beginPath();
ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI*2,false);
ctx.fill();
}
setInterval(loop,23);
ctx.canvas.onmousemove = function(e){
mouse.x = e.clientX;
mouse.y = e.clientY;
};
ctx.canvas.onmouseout = function(){
mouse.x = -1000;
mouse.y = -1000;
}
</script>
</body>
</html>
分享到：
相关推荐
本文为大家分享了Android游戏开发之碰撞检测，供大家参考，具体内容如下 矩形碰撞 原理: 两个矩形位置 的四种情况 不是这四中情况 则碰撞 圆形碰撞 原理: 利用两个圆心之间的距离进行判定.当两个圆心的距离小于半径...
二维弹珠台游戏：HTML5 Canvas技术实现 p键：暂停和取消暂停 空格：发射弹珠，只有发射过弹珠后才能按k和d键 k键：右侧弹板弹起 ...●检测弹珠与弹珠台圆顶之间的碰撞，并在碰撞之后改变弹珠的移动方式。
太空保龄球游戏，简单有趣， 利用HTML5中的CANVAS实现，玩家利用一个大球撞击位于圆形区域内的若干小球，将所有的小球撞出圆外则获胜。整个游戏包括UI设计、音效、碰撞检测、边界检测以及计分系统组成。UI采用...
326 7.6 总结 332 第8章 碰撞检测 333 8.1 外接图形判别法 333 8.1.1 外接矩形判别法 333 8.1.2 外接圆判别法 334 8.2 碰到墙壁即被弹回的小球 336 8.3 光线投射法 337 8.4 分离轴定理（sat）与最小平移向量...
8.5 碰撞检测 / 217 8.5.1 飞机与子弹的碰撞 / 217 8.5.2 我机与敌机的碰撞 / 220 8.6 子弹的变更 / 221 8.6.1 建立一个弹药类 / 222 8.6.2 弹药与我机的碰撞 / 223 8.7 飞机生命值的显示 / 225 8.8 游戏...
本文实例讲述了JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法。分享给大家供大家参考，具体如下： 概述 分离轴定理是一项用于检测碰撞的算法。其适用范围较广，涵盖检测圆与多边形，多边形与多边形的碰撞；缺点...
整个游戏包括UI设计、音效、碰撞检测、边界检测以及计分系统组成。UI采用html+JS+CSS实现，包含欢迎界面、游戏规则界面、游戏界面….zip 适合学习/练手、毕业设计、课程设计、期末/期中/大作业、工程实训、相关项目/...
#Canvas学习 这里主要放一些canvas学习过程中的demo ：效果来自，重写了代码 ：扩散效果来自，雪花效果来自，重写了... ：基于圆与多边形、圆与圆的碰撞检测、重力模拟做的一个弹跳小球的demo，点击屏幕弹出一个小球
Suple，简单易用的碰撞检测，包围盒和圆。 不要试图强加给您某种“ JS类模式”，只是纯JavaScript就像母亲本意那样 尝试使网络游戏中的资产（图像，音乐，json数据）尽可能容易 通常将对象文字用作可读性的参数（即...
碰撞检测，返回值0表示没有撞到障碍物 吃到食物判定 4.绘制贪吃蛇函数 5.改变蛇方向的按键监听 6.碰撞检测函数 7.绘制食物函数 ****/ //一 var游戏参数设置 //游戏界面刷新的间隔时间（数字越大蛇的速度越...
碰撞检测通常是游戏开发的难点，作为引擎必然少不了碰撞检测部分，这里我们还是按照cocos2d的构架，使用Box2d作为物理引擎，下面我们将通过在Ophone平台实现一个小游戏，来对Box2d物理引擎进行学习。 Box2d ...
4-14-5(Region碰撞检测) 4-15-1(MediaPlayer音乐) 4-15-2(SoundPool音效) 4-16-1(游戏保存之SharedPreference) 4-16-2(游戏保存之Stream) 4-3(View游戏框架) 4-4(SurfaceView游戏框架) 4-7-1(贝塞尔曲线) 4-7-2...
4-14-5(Region碰撞检测) 4-15-1(MediaPlayer音乐) 4-15-2(SoundPool音效) 4-16-1(游戏保存之SharedPreference) 4-16-2(游戏保存之Stream) 4-3(View游戏框架) 4-4(SurfaceView游戏框架) 4-7-1(贝塞尔曲线) 4-7-2...
7.3.1 平面几何在碰撞检测中的应用 194 7.3.2 物体的包围盒 197 7.3.3 AABB碰撞检测技术 198 7.4 基本物理知识 199 7.5 你好！Box2D！ 201 7.5.1 概述 201 7.5.2 物理世界 202 7.5.3 游戏中的两个世界 202 ...
检测像素级别的碰撞 8.11节. 读取和保持用户的网络摄像头图像 8.12节. 在多幅图像中使用混合模式 8.13节. 处理FLV数据的提示点 8.14节. 创建视频播放进度条 8.15节. 读取mp3文件的ID3数据 8.16节. 在载入图像时显示...