Javascript-画布拍摄定位答案

【问题标题】：Javascript- canvas shooting positioningJavascript-画布拍摄定位
【发布时间】：2014-04-07 02:34:31
【问题描述】：

我想在我正在制作的游戏中进行宇宙飞船射击，但我似乎无法正确加载射击的位置。我有一个名为 shot[] 的数组，当玩家按住鼠标按钮时，我想每 N 个刻度将 Shot() 对象推入其中。所以基本上我希望 Shot() 的 x 属性等于我的 ship.x 属性和 y=ship.y。然后我希望它有一个 Shot.dx 属性，该属性会根据光标是在画布中间上方还是波纹管（+3/-3）或中心的左侧或右侧（dy=+3/-3 )。

// Shooting
        var shots = [] //Bullet array

//Object, which should be the position of the bullet.
        function Shot() {
         this.x=350
         this.y=250;
         this.dx=Shoot.x
         this.dy=Shoot.y
        }

//This keeps track of the cursor position in relation to the center of canvas.
        function Shoot() {
            started = false; 
            this.mousedown = function (ev) {
                started = true; 
            };

            this.mousemove = function (ev) {
                if (started) { 
                        if (ev.clientX>=350) this.x=3;
                            else this.x=-3;
                        if (ev.clientY>=250) this.y=3;
                            else this.y=-3;
                }
            };
            this.mouseup = function (ev) {
                started = false;
            };
        }
//The problem is, that when I set this.x in Shot() to be =ship.x the values
//dont get updated and it stays undefined after I push it into the array.
//Now I have it set to the center of canvas, but that it useless because it needs
//to move with the ship, but even now I am getting weird numbers and not the numbers
//that I actually put in. dx and dy dont get updated at all.

   // Ship Model
        var ship = {
            x: 350,
            y: 250,
            lives: 3,
            invulnerable: 0,
        }

//Main function- pushes the objects into the array
        function mainLoop() {
            tick++
            count()
            interval()
            chase()
            console.log(started)
            if (started && tick%20==0) 
                    shots.push(new Shot());
            keyboard()
            display()
            check()
            requestAnimationFrame(mainLoop);
        }

// Initialization
        window.onload = function() {
          // Setting variables
            button = document.getElementById("button")
            text = document.getElementById("text")
            canvas = document.getElementById("canvas")
            ctx = canvas.getContext("2d")
            weapon = new Shoot();
            canvas.onmousedown = weapon.mousedown;
            canvas.onmousemove = weapon.mousemove;
            canvas.onmouseup = weapon.mouseup;
            requestAnimationFrame(mainLoop);
        }

//I know this is a lot of code, but its all relevant. I am new to Javascript
//so I expect this to be some sort of a trivial error.

这是一个 JSfiddle，但我不知道它是如何工作的，所以我无法让它绘制画布，抱歉：http://jsfiddle.net/JH3M6/

【问题讨论】：

标签： javascript canvas

【解决方案1】：

以下概述了如何开枪：

创建一个数组来保存您的拍摄对象
鼠标按下时：设置started 标志（开始触发）
鼠标按下时：将任何新射击的射击位置设置为当前鼠标位置
在鼠标移动时：将任何新射击的射击位置重置为当前鼠标位置
在 mouseup 上：清除 started 标志（停止触发）

在动画循环中：

如果鼠标仍然向下，则在当前射击位置添加一枪
按 dx,dy 移动所有镜头
如果镜头已移出画布，则从镜头[] 数组中删除所有镜头
清空屏幕并在新位置绘制镜头

演示：http://jsfiddle.net/m1erickson/2f9sf/

下面是示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    // canvas related vars
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var cw=canvas.width;
    var ch=canvas.height;
    var bb=canvas.getBoundingClientRect();
    var offsetX=bb.left;
    var offsetY=bb.top;
    ctx.fillStyle="blue";

    // vars related to firing position and Shot(s)
    var shotColor=ctx.fillStyle;
    var started,mouseX,mouseY,dx,dy;

    // Shots fired
    var shots = [] //Bullet array

    //Object, which should be the position of the bullet.
    function Shot(x,y,dx,dy) {
        this.x=x;
        this.y=y;
        this.dx=dx;
        this.dy=dy;
    }
    Shot.prototype.display=function(){
        // make fillstyle blue if it's not already blue
        if(!ctx.fillStyle==shotColor){ctx.fillStyle=shotColor;}
        // draw the shot on the canvas
        ctx.fillRect(this.x,this.y,5,5);
    }

    // listen for mouse events
    canvas.onmousedown=function(e){ started=true; setFirePosition(e); }
    canvas.onmouseup=function(e){ started=false; }
    canvas.onmousemove=function(e){
        if(started){setFirePosition(e);}
    }

    // start the animation loop
    requestAnimationFrame(animate);

    // set the firing position of the next shot
    function setFirePosition(e){
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);
        dx=(mouseX>=canvas.width/2)?-3:3;
        dy=(mouseY>=canvas.height/2)?-3:3;        
    }

    // animation loop
    // add shots if the mouse is down
    // move shots until they move off-canvas
    function animate(){

        // request another frame
        requestAnimationFrame(animate);

        // if the mouse is down, add a shot
        if(started){
            shots.push(new Shot(mouseX,mouseY,dx,dy));
        }

        // if no work to do, return
        if(shots.length==0){return;}

        // new array of active shots
        // "active" == shot has not moved off-canvas
        var a=[];

        // clear the canvas for this frame
        ctx.clearRect(0,0,cw,ch);

        for(var i=0;i<shots.length;i++){

            // get a shot to process
            var shot=shots[i];

            // move this shot
            shot.x+=shot.dx;
            shot.y+=shot.dy;

            // if the shot hasn't moved offscreen
            // add the shot to "a" (the replacement shots array);
            // draw this shot
            if(shot.x>=0 && shot.x<=cw && shot.y>0 && shot.y<=ch){
                a.push(shot);
                shot.display();
            }
        }

        // if shots went off-canvas, remove them from shots[]
        if(a.length<shots.length){
            shots.length=0;
            Array.prototype.push.apply(shots,a);
        }

    }

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Mousedown to fire shots</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

【讨论】：

感谢您的帮助 ;)