近来想做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. EntityFramewrok 使用

    1.使用一些查询比较复杂或者需要拼接的查询的时候最好一直保持IQueryable.一直到最后取数据的时候才进行查询.例如分页之类的条件拼接. var query = dbset.Where(expre ...

  2. Linux-ls,cd,type命令

    windows: dll:dynamic link library,动态链接库 Linux: .so:shared object,共享对象 操作系统: kernel:内核: 1.进程管理 2.内核管理 ...

  3. selenium自动化登录qq网页

    一个简单的登录网页上qq的脚本,通过此脚本了解到有些位置是无法通过xpath来定位的反倒是By定位更方便 #encoding=utf-8 from selenium import webdriver ...

  4. 2015年开源前端框架盘点TOP20

    2015年,榜单根据github上star数作为排名依据.(榜单中大部分为组件式框架, react.Angular等基础框架不在此篇讨论) 1.Bootstrap 类别/语言:HTML.CSS.Jav ...

  5. 九度OJ--Q1168

    import java.util.Scanner; public class q1168 { public static void main(String[] args) { Scanner scan ...

  6. 【tips】【词频统计】中可能用到的资源，以C++为例

    前言 我不知道C#什么情况,不过C++里面,什么参数都不传时,argc=1,argv里面是当前程序名.当你传入dir时,argc=2,当你传入-e dir时,argc=3. 这个文章十分适合有一点C语 ...

  7. DPDK如何抓包

    原创翻译,转载请注明出处. DPDK的librte_pdump库,提供了在DPDK框架下抓包的功能.这个库通过完全复制Rx和Tx的mbuf到一个新的内存池,因此它降低应用程序的性能,所以只推荐在调试的 ...

  8. MAC下Python3.5安装问题

    mac中自动集成了python2.7,但是作为程序员总是希望用最新的版本, 刚才安装python3.5后,python -V,依然提示是,2.7: 然后在 .bash_profile后面找到pytho ...

  9. 【WebService】——SOAP、WSDL和UDDI

    WebService的三要素:SOAP.WSDL和UDDI.soap用来描述传递信息的格式,wsdl描述如何访问具体的接口,uddi管理.分发查询WebService. 1.SOAP SOAP Sim ...

  10. 【Android入门】——模拟器的创建及常见问题汇总

    [前言] 刚刚接触Android,第一门课我们就来创建一个模拟器.安卓模拟器,简称AVD(Android Virtual Device),是安卓运行的虚拟设备.有了他以后,我们就不需要在连着安卓手机进 ...