近来想做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. 掘金 Android 文章精选合集

    掘金 Android 文章精选合集 掘金官方 关注 2017.07.10 16:42* 字数 175276 阅读 50053评论 13喜欢 669 用两张图告诉你,为什么你的 App 会卡顿? - A ...

  2. ArcGIS Server远程处理服务器（环境设置）

    当使用ArcGIS Server做远程处理服务器执行影像处理操作时,提示ERROR 999999通用错误代码,如下: Start Time: Mon Jul 03 13:49:06 2017Distr ...

  3. 《python机器学习—预测分析核心算法》：构建预测模型的一般流程

    参见原书1.5节 构建预测模型的一般流程 问题的日常语言表述->问题的数学语言重述重述问题.提取特征.训练算法.评估算法 熟悉不同算法的输入数据结构:1.提取或组合预测所需的特征2.设定训练目标 ...

  4. 十分钟掌握pandas中文版（pandas官方文档翻译）

    转载自 https://blog.csdn.net/jiangjiang_jian/article/details/80022918

  5. 树莓派初次使用的基本配置.md

    记录了一下树莓派初次使用的配置过程,包括装系统.修改 IP 等等. 树莓派(英语:Raspberry Pi),是一款基于 Linux 的单板机电脑. 它由英国的树莓派基金会所开发,目的是以低价硬件及自 ...

  6. 健康领域今年开始井喷了，养老地产和私人医生这两个领域目测成为下一轮BAT在健康领域布局的竞争方向

    医疗行业做了六年多的时间,今年到了井喷的阶段,腾讯先是入股了丁香园,然后又一亿美金融资挂号网,春雨医生获得5000万美元的C轮融资,这是要上市的节奏.. 从互联网战略上,健康网和医疗网都是做资料刚开始 ...

  7. 【Linux】Linux修改openfile和max user processes？

    #当时测试虚机为centos7.4版本: # 在/etc/security/limits.conf文件末尾添加如下命令: *     soft     nproc   1314 *     hard  ...

  8. Ubuntu desktop基本操作

    2018-03-03 11:48:52 ubuntu16 lts 更换源,系统安装的时候可以跳过语言包的安装 打开software & updates应用,Other software选项页, ...

  9. 利用Github Pages建立仓库“门面”

    嘛是Github Pages? Github Pages 是一个静态网站托管服务,用来从你的Github仓库中直接发布 个人.组织或项目的网站页面 Github Pages发布的页面统一使用githu ...

  10. [剑指Offer] 40.数组中只出现一次的数

    题目描述 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. [思路]此题考察的是异或运算的特点:即两个相同的数异或结果为0. 此题用了两次异或运算特点: ( ...