近来想做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. C#文件重命名的代码

    C#中没有重命名的方法,自己写了一个方法,来处理文件的重命名. /// <summary> /// 重命名文件夹内的所有子文件夹 /// </summary> /// < ...

  2. ProxySQL初体验

      Preface       As we all know,it's a common sense that separate reading and writing operations can ...

  3. PHP的array_merge()合并数组

    ,4];print_r(array_merge($arr1,$arr2));返回结果:Array(    [a] => 3    [b] => 2    [0] => 4)1注释:当 ...

  4. Java 集合学习--ArrayList

    一.ArrayList 定义 ArrayList 是一个用数组实现的集合,支持随机访问,元素有序且可以重复. ①.实现 List 接口 List接口继承Collection接口,是List类的顶层接口 ...

  5. python 基础篇 06 编码 以及小知识点补充

    本节主要内容: 1. is和==的区别2. 编码的问题 ⼀. is和==的区别1. id()通过id()我们可以查看到⼀个变量表⽰的值在内存中的地址 注  ----<<<在pytho ...

  6. 机器学习实战一：kNN手写识别系统

    实战一:kNN手写识别系统 本文将一步步地构造使用K-近邻分类器的手写识别系统.由于能力有限,这里构造的系统只能识别0-9.需要识别的数字已经使用图形处理软件,处理成具有相同的色彩和大小:32像素*3 ...

  7. GCD LCM 最大公约数 最小公倍数 分数模板 (防溢出优化完成)

    自己写的一个分数模板,在运算操作时进行了防溢出的优化: ll gcd(ll a, ll b) { return b ? gcd(b, a%b) : a; } ll lcm(ll a, ll b) { ...

  8. mysql 数据库 exists 和count

    由于最近在使用exists是出现了一个小问题,但是在调试的时候费了不少时间,因为自己只是牢固造成,所以在在此记录,已提醒自己. mysql中exists 用法: 通过和主查询管理 以达到过滤的效果,如 ...

  9. CE-HTML简介

    1.典型的CE-HTML代码如下: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html ...

  10. javascript实现自动切换焦点功能学习

    当用户在表单中填写完当前字段后,能否自动将焦点跳转到下一个字段以方便用户输入? 为了增强易用性,加快数据输入的速度,可以在前一个文本框中的字符达到一定的设置的字符长度后(比如电话号码,身份证号等),用 ...