近来想做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>

html5 游戏开发的更多相关文章

  1. CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎

    CutJS 是轻量级的,快速的,基于 Canvas 开发的 HTML5  2D 渲染引擎,可以用于游戏开发.它是开源的,跨平台的,与现代的浏览器和移动设备兼容.CutJS 提供了一个类似 DOM 树的 ...

  2. 优秀工具推荐：两款很棒的 HTML5 游戏开发工具

    HTML5 众多强大特性让我们不需要多么高深技术就能创建好玩的网页游戏,同时证明了开放的 Web 技术能与任何其他在游戏开发中使用的技术竞争.正如标题所说,这篇文章推荐的几款很棒 HTML5 游戏开发 ...

  3. HTML5游戏开发引擎,初识CreateJS

    CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎.打造 HTML5 游戏,构建新游戏,提供构建最新 HTML5 的技术.你可以通过这个网站学习如何构建跨平台和跨终端游戏.这 ...

  4. HTML5游戏开发进阶指南（亚马逊5星畅销书，教你用HTML5和JavaScript构建游戏！）

    HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...

  5. HTML5游戏开发,剪刀石头布小游戏案例

    剪刀石头布,非常可爱的小游戏,相信大家都非常的怀念这款小游戏,小时候也玩过很多次,陪伴着我的童年的成长,现在是不是还会玩一下,剪刀石头布游戏的规则我们都知道是:剪刀剪布,石头砸剪刀,布包石头.跟朋友. ...

  6. 【转】HTML5游戏开发经典视频教程、电子书汇总

    HTML5游戏开发经典视频教程.电子书汇总 HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本,现在仍处于发展阶段,但大部分浏览器已经支持某 ...

  7. HTML5游戏开发技术基础整理

    随着HTML5标准终于敲定.HTML5将有望成为游戏开发领域的的热门平台. HTML5游戏能够执行于包含iPhone系列和iPad系列在内的计算机.智能手机以及平板电脑上,是眼下跨平台应用开发的最佳实 ...

  8. html5游戏开发--"动静"结合用地图块拼成大地图 & 初探lufyl

    一.前言   本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏.   首先让我们来了解了解如何用html5实现动画 ...

  9. Egret是一套完整的HTML5游戏开发解决方案

    Egret是一套完整的HTML5游戏开发解决方案.Egret中包含多个工具以及项目.Egret Engine是一个基于TypeScript语言开发的HTML5游戏引擎,该项目在BSD许可证下发布.使用 ...

  10. HTML5游戏开发进阶指南

    <HTML5游戏开发进阶指南> 基本信息 作者: (印)香卡(Shankar,A.R.)    译者: 谢光磊 出版社:电子工业出版社 ISBN:9787121212260 上架时间:20 ...

随机推荐

  1. 【MVC】 小问题

    [MVC] 小问题 1. url 传参中文乱码 : encodeURIComponent 转码 2. RedirectToAction 重定向 : ajax 调用无效, 直接 url 访问有效 3. ...

  2. linux备忘录-系统服务daemon

    服务(daemon)及其分类 Linux中的服务被称为daemon(daemon是守护神,恶鬼的意思哦).这些daemon会常驻在内存当中,从而对我们的系统和任务等进行一些辅助性的工作.实际上,dae ...

  3. RMQ问题+ST算法

    一.相关定义 RMQ问题 求给定区间的最值: 一般题目给定许多询问区间. 常见问题:对于长度为n的数列A,回答若干询问RMQ(A,i,j)(i,j<=n),返回数列A中下标在i,j之间的最小/大 ...

  4. 【PHP】- 魔术常量

    PHP 向它运行的任何脚本提供了大量的预定义常量.不过很多常量都是由不同的扩展库定义的,只有在加载了这些扩展库时才会出现,或者动态加载后,或者在编译时已经包括进去了.有八个魔术常量它们的值随着它们在代 ...

  5. pptp协议的工作原理

    我的工作机是A,通信网卡是Aeth0, Appp0: 然后我的云主机是B, 通信的网卡是Beth0, Bppp0: 在网卡Bppp0上会不断地很清晰的数据包: 16:40:39.522917 IP 6 ...

  6. Struts2-part1

    作者:禅楼望月(http://www.cnblogs.com/yaoyinglong) 1. Struts2应用的开发步骤: ① 在web.xml中配置核心的Filter来拦截用户的请求. <w ...

  7. Luogu3731 HAOI2017新型城市化（二分图匹配+强连通分量）

    将未建立贸易关系看成连一条边,那么这显然是个二分图.最大城市群即最大独立集,也即n-最大匹配.现在要求的就是删哪些边会使最大匹配减少,也即求哪些边一定在最大匹配中. 首先范围有点大,当然是跑个dini ...

  8. hdu6103 Kirinriki（trick+字符串）

    题解: 考虑一开始时,左边从1开始枚举,右边从n开始枚举 我们可以得到一个最大的值k. 但是如果这样依次枚举,复杂度肯定是n^3,是不行的 考虑如何利用上一次的结果,如果我们把1和n同时去掉 就可以利 ...

  9. xinetd不太详的详解

    xinetd不太详的详解 http://blog.sina.com.cn/s/blog_88cdde9f01019fg5.html ################################## ...

  10. 【C++ troubleshooting】A case about decltype

    template <typename iter_t> bool next_permutation(iter_t beg, iter_t end) { // if (beg == end | ...