近来想做html5游戏开发些小东西玩一下，因为手边就是笔记本，想怎么玩就怎么玩了，今年可以说是非常重要特殊的一年，感觉有些倒霉，不过，心态最重要，该怎么做的时候就去怎么做吧，日子的24小时是不会变的，不管能活多久。
游戏开发感觉不错，所以就刚看了一个碰撞检测canvas的来做，一段段代码弄下来试，成功运行了，原理也是一些很简单的，不过是
不停地检测 FPS,不停刷新每一帧来达到最终的探测目的；
每一帧里面都去检测范围，是否会碰撞；
有三种检测方法： 范围检测； 光线投影速度向量检测；分离轴定理；
检测方法还是有些不懂，目前来看并不是特别特殊，这些东西应该可以很快上手，毕竟这些都是基本的东西；
附上今天测试的一段oop的js 声波探测脚本：
<html> <body> <div class="collide"> <canvas id="canvas"> <p>Your browser does not support the canvas element!</p> </canvas> collision test </div> <script> Array.prototype.remove = function (obj) { for (var i = 0; i < this.length; i++) { if (this[i] === obj) { this.splice(i, 1); break; } } } function BasicObject(x, y, order) { this.x = x; this.y = y; this.order = isNaN(order) ? 0 : order; this.addTo = function (objects) { objects.push(this); objects.sort(function (a, b) { return a.order - b.order; }); } this.removeFrom = function (objects) { objects.remove(this); } } function Wave(x, y, r) { BasicObject.call(this, x, y); this.radius = isNaN(r) ? 1 : r; this.color = 255; this.draw = function (context) { context.beginPath(); context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); context.strokeStyle = "rgb(" + this.color + ", " + this.color + ", " + this.color + ")"; context.stroke(); } this.update = function (objects) { this.color -= 20; this.radius += 10; if (this.color <= 0) { this.removeFrom(objects); } } this.collide = function (objects) { var isCollided = 0; for (i in objects) { if (objects[i] instanceof Stone) { var d = Math.sqrt(Math.pow(this.x - objects[i].x, 2) + Math.pow(this.y - objects[i].y, 2)); if (d < this.radius + objects[i].radius && d > Math.abs(this.radius - objects[i].radius)) { objects[i].isShocked = true; isCollided++; } } } if (isCollided) { this.removeFrom(objects); } } } Wave.prototype = new BasicObject(); function Stone(x, y, r) { BasicObject.call(this, x, y); this.radius = r; this.isShocked = false; this.draw = function (context) { context.beginPath(); context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); context.fillStyle = "black"; context.fill(); } this.update = function (objects) { if (this.isShocked) { var wave = new Wave(this.x, this.y, this.radius); wave.addTo(objects); this.isShocked = false; } } } Stone.prototype = new BasicObject(); function Engin() { var canvas = document.getElementById("canvas"); canvas.width = screen.width - 30; canvas.height = screen.height - 100; var context = canvas.getContext("2d"); var buffer = document.createElement("canvas"); buffer.width = canvas.width; buffer.height = canvas.height; var bufferCtx = buffer.getContext("2d"); var objs = new Array(); const FPS = 20; document.onmousedown = function (event) { var wave = new Wave(event.clientX, event.clientY); wave.addTo(objs); } this.manage = function () { bufferCtx.fillRect(0, 0, buffer.width, buffer.height); context.fillRect(0, 0, canvas.width, canvas.height); for (x in objs) { if (objs[x].update) { objs[x].update(objs); } } for (x in objs) { if (objs[x].draw) { objs[x].draw(bufferCtx); } } for (x in objs) { if (objs[x].collide) { objs[x].collide(objs); } } context.drawImage(buffer, 0, 0); } this.run = function () { var s1 = new Stone(100, 100, 50); var s2 = new Stone(canvas.width / 2, canvas.height / 2, 100); s1.addTo(objs); s2.addTo(objs); setInterval(this.manage, 1000 / FPS); } } window.onload = function () { new Engin().run(); } //collision detection //1. boundary detection //2. ray cast //3. seperating axis </script> </body> </html>