近来想做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. centos linux 因别名问题引起的麻烦及解决技巧

    老男孩儿-19期 L005-13节中分享.自己整理后发到自己微博中留档. 原文:http://oldboy.blog.51cto.com/2561410/699046 实例:老男孩linux实战培训第 ...

  2. 实现一个简单版的express

    express应该算是早期最优秀的一个node框架了,刚开始学node做后端语言就是用的express,它的cli可以帮我们搭建好项目目录,就像现在的vue,react一样.express本身没有做太 ...

  3. python+UIAutomation+libary

    #! /usr/bin/env python#Author: XIE TIAN# -*- coding:utf8 -*-from __future__ import unicode_literalsi ...

  4. 数据库sql命令

    本文为转载,原文地址:http://www.cnblogs.com/cangqiongbingchen/p/4530333.html 1.说明:创建数据库CREATE DATABASE databas ...

  5. [ubuntu 18.04 + RTX 2070] Anaconda3 - 5.2.0 + CUDA10.0 + cuDNN 7.4.1 + bazel 0.17 + tensorRT 5 + Tensorflow(GPU)

    (RTX 2070 同样可以在 ubuntu 16.04 + cuda 9.0中使用.Ubuntu18.04可能只支持cuda10.0,在跑开源代码时可能会报一些奇怪的错误,所以建议大家配置 ubun ...

  6. WebSocket 与 HTTP/2

    个人笔记 WebSocket WebSocket 是一个双向通信协议,它在握手阶段采用 HTTP/1.1 协议(暂时不支持 HTTP/2). 握手过程如下: 首先客户端向服务端发起一个特殊的 HTTP ...

  7. MySQL日常管理

    DB2最佳分页语句 SELECT * FROM ( SELECT inner2_.*, ROWNUMBER() OVER(ORDER BY ORDER OF inner2_) AS rownumber ...

  8. 甲级1002 A+B for Polynomials (25)

    题目描述: This time, you are supposed to find A+B where A and B are two polynomials. Input Each input fi ...

  9. lintcode-98-链表排序

    98-链表排序 在 O(n log n) 时间复杂度和常数级的空间复杂度下给链表排序. 样例 给出 1->3->2->null,给它排序变成 1->2->3->nu ...

  10. ArcGIS API for javascript中搜索框的使用问题

    我们在开发中常常需要用搜索框去搜索地图上的某个数据,然后在地图上显示出来.这个时候我们要用到esri.dijit.Search().在设置里面的sources的时候,需要注意一点:必须要使用在线的fe ...