qq_33315083 2017-11-25 14:16 采纳率: 0%
浏览 1319

为什么isPointInPath没有用？

https://pan.baidu.com/s/1dF6LXbN
密码:nby7

鄙人用isPointInPath在进行碰撞检测，玩家控制的飞机可以检测得到，但子弹就不行了，鄙人萌新不懂isPointInPath的注意事项，帮鄙人调试解决子弹碰撞不了飞机，鄙人已经搞了1天都没搞好，需要大牛的帮助，

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html,body{
            margin:0;
            padding:0;
        }
        canvas{
            position:absolute;
            left:50%;
            top:50%;
            margin-left: -480px;
            margin-top: -300px;
        }
    </style>
</head>
<body>
    <canvas id="canvas" ></canvas>
    <script type="text/javascript">
        var canvas = document.querySelector("#canvas"),
            ctx = canvas.getContext("2d");

            canvas.width = 960;
            canvas.height = 600;

        var img = new Image();
        var img2 = new Image();


        function player(){ /*玩家*/

            this.bulletObj = {};
            this.enemyObj = {};

            this.player = {
                loc : {
                    x : 0,
                    y : 0
                },

                vSpeed : {
                    x : 0,
                    y : 0
                }
            };

            this.Bullet = {
                id : 0,
                x : 0,
                vSpeed_x : 0.1,
                max_xSpeed : 15,
                shoot_time : 0
            };

            this.key = {
                left : false,
                up : false,
                right : false,
                down : false,
                space : false
            };

            this.enemyPlane = {
                id : 0,
                vSpeed_x : -3,
                vSpeed_y : -3,

            }

            window.onkeydown = this.keydown.bind(this); 
            window.onkeyup   = this.keyup.bind(this);
        }

        player.prototype.keydown = function(event){

            var keycode = event.which || event.keyCode;
            var _this = this;

            switch(keycode){
                case 37:
                    _this.key.left = true;
                    break;
                case 38:
                    _this.key.up = true;
                    break;
                case 39 :
                    _this.key.right = true;
                    break;
                case 40:
                    _this.key.down = true;
                    break;
                case 32:
                    _this.key.space = true;
                    break;
            };
        }

        player.prototype.keyup = function(event){

            var keycode = event.which || event.keyCode;
            var _this = this;

            switch(keycode ){
                case 37:
                    _this.key.left = false;
                    break;
                case 38:
                    _this.key.up = false;
                    break;
                case 39:
                    _this.key.right = false;
                    break;
                case 40:
                    _this.key.down = false;
                    break;
                case 32:
                    _this.key.space = false;
                    break;
            };
        }

        player.prototype.movePlane = function(){ /*飞机移动*/

            if(this.key.left){
                this.player.vSpeed.x -= 1;
            }

            if(this.key.up){
                this.player.vSpeed.y -= 1;
            }

            if(this.key.right){
                this.player.vSpeed.x += 1;
            }

            if(this.key.down){
                this.player.vSpeed.y +=1;
            }

            if(this.Bullet.shoot_time > 20 && this.key.space){
                this.Bullet.shoot_time = 0;
                new Bullet();
            }else{
                this.Bullet.shoot_time++;
            }

            this.player.loc.x += this.player.vSpeed.x;
            this.player.loc.y += this.player.vSpeed.y;

            this.player.vSpeed.x *= 0.9;
            this.player.vSpeed.y *= 0.9;

            this.planeConstraint();

            return {'x' : this.player.loc.x, 'y' : this.player.loc.y};
        }

        player.prototype.planeConstraint = function(){  /*边界判断*/

            if(this.player.loc.y < 0){
                this.player.loc.y = 0;
            }
            if(this.player.loc.x < 0){
                this.player.loc.x = 0;
            }
            if(this.player.loc.y > canvas.height - 118){
                this.player.loc.y = canvas.height - 118;
            }
            if(this.player.loc.x > canvas.width - 176){
                this.player.loc.x = canvas.width - 176;
            }
        }

        function Bullet(){ /*子弹*/

            plane.Bullet.id++;
            plane.bulletObj[plane.Bullet.id] = this;

            this.x = plane.player.loc.x;
            this.y = plane.player.loc.y;
            this.vSpeed_x = plane.Bullet.vSpeed_x;
            this.id = plane.Bullet.id;

            this.width = 30;
            this.height = 20;
            this.lineWidth = 4;
        }

        Bullet.prototype.draw = function(){ /*绘制子弹，并控制移动*/
            this.vSpeed_x += this.vSpeed_x;
            this.vSpeed_x *= 0.7;

            this.vSpeed_x = this.vSpeed_x > plane.Bullet.max_xSpeed ? plane.Bullet.max_xSpeed : this.vSpeed_x;

            this.x += this.vSpeed_x;

            if(this.x > canvas.width){
                delete plane.bulletObj[this.id];
            }

            drawBullet(this.x, this.y, this.lineWidth, this.width, this.height, "white"); 

            return {'x' : this.x, 'y' :this.y, 'w' : this.width, 'h' : this.height, 'lineW' : this.lineWidth}
        }

        function enemyPlane(index ,x ,y){ /*敌方飞机*/
            var _this = this;

            plane.enemyPlane.id++;
            plane.enemyObj[plane.enemyPlane.id] = this;

            this.x = x;
            this.y = y;
            this.vSpeed_x = plane.enemyPlane.vSpeed_x;
            this.vSpeed_y = plane.enemyPlane.vSpeed_y;
            this.max_xSpeed = plane.enemyPlane.max_xSpeed;
            this.max_ySpeed = plane.enemyPlane.max_ySpeed;
            this.id = plane.enemyPlane.id;
            this.index = index;

            this.enemyobj = {
                a1 : function (){modelStroke({ x : _this.x , y : _this.y },[{ x : 16, y : 1}, { x : 52, y : 21}, { x : 79, y : 42}, { x : 132, y : 28}, { x : 152, y : 28}, { x : 174, y : 40}, { x : 162, y : 56}, { x : 148, y : 61}, { x : 90, y : 71},  { x : 76, y : 98}, { x : 74, y : 106}, { x : 62, y : 117}, { x : 56, y : 117}, { x : 54, y : 111}, { x : 59, y : 75}, { x : 29, y : 78},  { x : 20, y : 91}, { x : 14, y : 89}, { x : 16, y : 76}, { x : 1, y : 66}, { x : 6, y : 61}, { x : 26, y : 63}, { x : 46, y : 54}, { x : 1, y : 8}], _this.drawPlane());}
            };

            this.draw();
        }

        enemyPlane.prototype.draw = function(){ /*绘制敌方飞机图片，然后模型描边*/

            /*this.x += this.vSpeed_x;*/
            this.enemyobj[this.index]();
        }

        enemyPlane.prototype.drawPlane = function(){ /*绘制图片*/

            ctx.drawImage(img2, this.x, this.y);
        }

        /*------------------------------------------------------通用方法------------------------------------------------------------*/

        function drawBullet(bullet_x, bullet_y, lineW, bullet_w, bullet_h, color){ /*绘制子弹*/
            var x = bullet_x;
            var y = bullet_y;
            var w = bullet_w;
            var h = bullet_h;

            ctx.save();
            ctx.beginPath();
            if(lineW % 2 !=0){
                ctx.translate(0.5,0.5);
            }
            ctx.strokeStyle = color;
            ctx.lineWidth = lineW;
            ctx.moveTo(x, y);
            ctx.lineTo(x + w, y);
            ctx.quadraticCurveTo(x + h/2 + w, y + h/2, x + w, y + h);
            ctx.lineTo(x, y + h);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
        }

        function impactChecking(pointObj, planeObj){ /*碰撞检测*/
            var pointobj = pointObj;
            var planeobj = planeObj;
            var pointobj_x = 0;
            var pointobj_y = 0;
            var flag = false;

            for(var i in pointobj){

                pointobj_x = planeobj.x + pointobj[i].x;
                pointobj_y = planeobj.y + pointobj[i].y;
                if(ctx.isPointInPath(pointobj_x, pointobj_y)){
                    console.log("ok");
                }
            }

            return flag;
        }

        function modelStroke(moveToObj,Obj,func){ /*图片模型描边 代码范例 modelStroke({'x' : 20, 'y' : 20},[{'x' : 40, 'y' : '20'}, {'x' : 40, 'y' : '40'}, {'x' : 20, 'y' : '40'}, {'x' : 20, 'y' : '20'}]); */

            ctx.beginPath();
            ctx.lineWidth = 5;
            ctx.strokeStyle = "#000";
            ctx.moveTo(moveToObj.x, moveToObj.y);
            for(var i in Obj){
                ctx.lineTo(Obj[i].x + moveToObj.x, Obj[i].y + moveToObj.y);

            }
            ctx.closePath();
            ctx.stroke();
            return func;
        }

        /*------------------------------------------------------通用方法------------------------------------------------------------*/

        window.requestAnimFrame =
          window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
        function(callback) {
            return window.setTimeout(callback, 1000 / 60);
        };

        var drawPlane = function(){ /*绘制玩家飞机，并判断是否碰到敌方飞机*/

            var obj = plane.movePlane();
            ctx.drawImage(img2, obj.x, obj.y);
            impactChecking([{x : 176, y : 44}/*,{x : 2, y : 65},{x : 15, y : 90}*/], {'x' : obj.x, 'y' : obj.y});
        }

        var updatePlayer = function(){ /*更新地图和玩家飞机*/
            ctx.drawImage(img, 0, 0);
            drawPlane();
        }

        var update = function(){ /*子弹，敌方飞机的更新*/

            if(plane.bulletObj[plane.Bullet.id])
                update_bullet();

            if(plane.enemyObj[plane.enemyPlane.id])
                update_enemyPlane();
        }

        var update_bullet = function(){  /*子弹碰撞方法调用*/

            for(var i in plane.bulletObj){
                var obj = plane.bulletObj[i].draw();
                impactChecking([{x : obj.w + obj.lineW, y : 0}, {x : obj.w + obj.lineW, y : obj.h}, {x :  obj.w + obj.h/2 + obj.lineW, y : obj.h/2}], {'x' : obj.x, 'y' : obj.y});
            }
        }

        var update_enemyPlane = function(){ /*敌机绘制*/

            for(var i in plane.enemyObj){
                plane.enemyObj[i].draw();
            }
        }

        var init = function(){ /*动画循环*/


            updatePlayer();
            update();
            window.requestAnimFrame(init);
        }


        var plane = new player();
        init();

        window.onload = function(){

            img.src = "123.jpg";
            img2.src = "plane.png";
            new enemyPlane('a1', 400, 400);
        }

    </script>
</body>
</html>
  • 写回答

1条回答 默认 最新

  • 「已注销」 2018-02-20 10:40
    关注

    这个问题很精髓！！虽然不直达在说啥

    评论

报告相同问题？

悬赏问题

  • ¥15 MCNP里如何定义多个源？
  • ¥20 双层网络上信息-疾病传播
  • ¥50 paddlepaddle pinn
  • ¥20 idea运行测试代码报错问题
  • ¥15 网络监控：网络故障告警通知
  • ¥15 django项目运行报编码错误
  • ¥15 请问这个是什么意思？
  • ¥15 STM32驱动继电器
  • ¥15 Windows server update services
  • ¥15 关于#c语言#的问题：我现在在做一个墨水屏设计，2.9英寸的小屏怎么换4.2英寸大屏