码迷,mamicode.com
首页 > Web开发 > 详细

html5 游戏开发

时间:2017-08-06 22:57:47      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:black   img   rom   fps   port   client   creat   screen   obj   

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

 

html5 游戏开发

标签:black   img   rom   fps   port   client   creat   screen   obj   

原文地址:http://www.cnblogs.com/hualiu0/p/7296065.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!