canvas 怎么让一张图片往鼠标点击方向移动

yeyiop 2017-08-09 11:58:36

canvas 怎么让一张图片往鼠标点击方向移动，直到超出canvas画布

...全文

388 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

yeyiop 2017-08-10

打赏
举报

知道原因了谢谢

天际的海浪 2017-08-09

打赏
举报

引用 6 楼 killeryei 的回复:

可以了谢谢，就是有些方向稍微有些偏差 http://sandbox.runjs.cn/show/quwak7of


+(function ($) {
    var then = Date.now();
    var keysDown = [];
    var main = function () {
        this.i = 0;
        var _this = this; //保存当前对象main
        this.canvas = document.getElementById("myCanvas");
        this.ctx = this.canvas.getContext("2d");
        this.canvas.width = 800;
        this.canvas.height = 600;

        this.delta = 0;
        this.modifier = 0;

        this.mouse_x=0;
        this.mouse_y=0;
        //角色
        this.hero = {
            speed: 256 // movement in pixels per second
        };
        this.heroReady = false;
        this.heroImage = new Image();
        this.heroImage.src = "http://sandbox.runjs.cn/uploads/rs/479/8n4ga7bl/hero.png";
        this.heroImage.onload = function () {
            _this.heroReady = true;
        };
        //炮弹
        this.bullet = {
            speed: 256 // movement in pixels per second
        };
        //炮弹坐标数组
        this.bulletxy = [];
        //炮弹初始面对方向
        this.direction = "up";
        addEventListener("keydown", function (e) {
            keysDown[e.keyCode] = true;
            if (32 in keysDown) {
                _this.launch(_this);
                _this.i++;
            }
        }, false);
        addEventListener("keyup", function (e) {
            delete keysDown[e.keyCode];
            //_this.i = 1;
        }, false);
        $('#myCanvas').mousedown(function(e){
            if(1 == e.which){
		        var od = $(this).offset();
	            _this.mouse_x = e.pageX - od.left;
	            _this.mouse_y = e.pageY - od.top;
	            console.log(_this.mouse_x+":"+_this.mouse_y);
                _this.launch(_this);
            }
        })
        _this.reset(_this);
        loop(_this);

    }
    main.prototype = {
        oper: function (_this) {
            if (38 in keysDown) {
                _this.hero.y -= _this.hero.speed * _this.modifier;
                _this.direction = "up";
            }
            if (40 in keysDown) {
                _this.hero.y += _this.hero.speed * _this.modifier;
                _this.direction = "down";
            }
            if (37 in keysDown) {
                _this.hero.x -= _this.hero.speed * _this.modifier;
                _this.direction = "left";
            }
            if (39 in keysDown) {
                _this.hero.x += _this.hero.speed * _this.modifier;
                _this.direction = "right";
            }

        },
        render: function (_this) {
            _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height)
            if (_this.heroReady) {
                _this.ctx.drawImage(_this.heroImage, _this.hero.x-16, _this.hero.y-16);

            }
            for (var i = 0; i <= _this.bulletxy.length - 1; i++) {
                if (_this.bulletxy[i][1] < -50) {
                    continue;
                }
                _this.ctx.save();
                _this.ctx.beginPath();//开始路径
                _this.ctx.fillStyle = 'red';//颜色
                //_this.ctx.fillRect(_this.bulletxy[i][0], _this.bulletxy[i][1], 8, 8);//用矩形表示子弹
                _this.ctx.arc(_this.bulletxy[i][0], _this.bulletxy[i][1], 5, 0, Math.PI * 2, true);//用圆型
                _this.ctx.closePath();//闭合路径
                _this.ctx.fill();
                _this.ctx.restore();
            }

        },
        reset: function (_this) {
            _this.hero.x = _this.canvas.width / 2;
            _this.hero.y = _this.canvas.height / 2;
        },
        launch: function (_this) {
            //初始炮弹坐标
            _this.bulletxy.push([_this.hero.x, _this.hero.y]);
            var num = _this.bulletxy.length - 1;
            var id;

            var r = Math.atan2(_this.mouse_x-_this.hero.x, _this.mouse_y-_this.hero.y);

            id = setInterval(function () {
                _this.bulletxy[num][0] = _this.bulletxy[num][0]+Math.sin(r)*(_this.bullet.speed * _this.modifier);
                _this.bulletxy[num][1] = _this.bulletxy[num][1]+Math.cos(r)*(_this.bullet.speed * _this.modifier);
                if (_this.bulletxy[num][1] <= -50) {
                    clearInterval(id);
                }
            }, 50)


        }
    }
    var loop = function (_this) {
        var now = Date.now();
        _this.delta = now - then;
        then = now;
        _this.modifier = _this.delta / 1000;
        main.prototype.oper(_this);
        main.prototype.render(_this);
        requestAnimationFrame(function () {
            loop(_this)
        });
    };


// 注册全局变量
    window.main = main;
    requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame;

})(jQuery);

yeyiop 2017-08-09