为什么drawDashedLine函数搞砸了我的游戏？

时间：2014-09-05 01:05:09

标签： javascript html5

我在网上发现了一个乒乓球游戏，想要改变一下。我想在屏幕中间放一条虚线。

enter image description here

如果我拿出虚线，游戏就可以了。它可以在Chrome中运行，但可以锁定在Firefox OS模拟器上。

****问题：为什么会出现这种情况？“****

代码：

 function drawDashedLine() {
       ctx.beginPath();
       ctx.fillStyle = '#eee';
       ctx.setLineDash([1,2]);
       ctx.moveTo(0,H/2);
       ctx.lineTo(320,H/2);
       ctx.closePath();
       ctx.stroke();
 }

HTML：

<html>
<head>
<title>Firefox OS</title>
</head>
<body>
    <canvas id="canvas"></canvas>
<script>
// RequestAnimFrame: a browser API for getting smooth animations
window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame   || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     ||  
        function( callback ){
            return window.setTimeout(callback, 1000 / 60);
        };
})();

window.cancelRequestAnimFrame = ( function() {
    return window.cancelAnimationFrame           ||
        window.webkitCancelRequestAnimationFrame ||
        window.mozCancelRequestAnimationFrame    ||
        window.oCancelRequestAnimationFrame      ||
        window.msCancelRequestAnimationFrame     ||
        clearTimeout
} )();

//all global variables
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d"); // Create canvas context
        //W = window.innerWidth, // Window's width
        //H = window.innerHeight, // Window's height
        var W = 310;
        var H = 440;
        var particles = []; // Array containing particles
        var ball = {}; // Ball object
        var paddles = [2]; // Array containing two paddles
        var mouse = {}; // Mouse object to store it's current position
        var points = 0; // Varialbe to store points
        var fps = 60; // Max FPS (frames per second)
        var flag = 0; // Flag variable which is changed on collision
        var particlePos = {}; // Object to contain the position of collision 
        var multipler = 1; // Varialbe to control the direction of sparks
        var startBtn = {}; // Start button object
        var restartBtn = {}; // Restart button object
        var over = 0; // flag varialbe, cahnged when the game is over
        var init; // variable to initialize animation
        var paddleHit;

// Add mousemove and mousedown events to the canvas
canvas.addEventListener("mousemove", trackPosition, true);
canvas.addEventListener("mousedown", btnClick, true);
// Set the canvas's height and width to full screen
canvas.width = W;
canvas.height = H;

// Ball object
ball = {
    x: 50,
    y: 50, 
    r: 5,
    c: "red",
    vx: 3,
    vy: 7,

    // Function for drawing ball on canvas
    draw: function() {
        ctx.beginPath();
        ctx.fillStyle = this.c;
        ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
        ctx.fill();
    }
};
// Start Button object
startBtn = {
    w: 100,
    h: 50,
    x: W/2 - 50,
    y: H/2 - 25,

    draw: function() {
        ctx.strokeStyle = "white";
        ctx.lineWidth = "2";
        ctx.strokeRect(this.x, this.y, this.w, this.h);
        ctx.font = "18px Arial, sans-serif";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillStlye = "white";
        ctx.fillText("Start", W/2, H/2 );
    }
};
// Restart Button object
restartBtn = {
    w: 100,
    h: 50,
    x: W/2 - 50,
    y: H/2 - 50,

    draw: function() {
        ctx.strokeStyle = "white";
        ctx.font = "18px Arial, sans-serif";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText("Tap Center Screen To Play Again!", W/2, H/2 - 25 );
    }
};
// Function to paint canvas
function paintCanvas() {
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, 310, 440);
}
// Function for creating paddles
function Paddle(pos) {
    // Height and width
    this.h = 8;
    this.w = 55;
    // Paddle's position
    this.x = W/2 - this.w/2;
    this.y = (pos == "top") ? 0 : H - this.h;
}
function draw() {
    paintCanvas();
    for(var i = 0; i < paddles.length; i++) {
        p = paddles[i];
        ctx.fillStyle = "white";
        ctx.fillRect(p.x, p.y, p.w, p.h);
    }
    ball.draw();
    update();
}
function increaseSpd() {
    if(points % 2 == 33) {
        if(Math.abs(ball.vx) < 15) {
            ball.vx += (ball.vx < 0) ? -1 : 1;
            ball.vy += (ball.vy < 0) ? -2 : 2;
        }
    }
}
function trackPosition(e) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;
}
function movePaddles() {
    if(mouse.x && mouse.y) {
            for(var i = 1; i < paddles.length; i++) {
                p = paddles[i];
                p.x = mouse.x - p.w/2;
            }       
    }
}
function collisions() {
    if(collides(ball, p1)) {
        collideAction(ball, p1);
    }
    else if(collides(ball, p2)) {
        collideAction(ball, p2);
    } else {
        // Collide with walls, If the ball hits the top/bottom,
        // walls, run gameOver() function
        if(ball.y + ball.r > H) {
            ball.y = H - ball.r;
            gameOver(); //the game is over
        } else if(ball.y < 0) {
            ball.y = ball.r;
            gameOver(); //the game is over
        }

        if(ball.x + ball.r > W) {
            ball.vx = -ball.vx;
            ball.x = W - ball.r;
        } else if(ball.x -ball.r < 0) {
            ball.vx = -ball.vx;
            ball.x = ball.r;
        }
    }
}
function drawDashedLine() {
    ctx.beginPath();
    ctx.fillStyle = '#eee';
    ctx.setLineDash([1,2]);
    ctx.moveTo(0,H/2);
    ctx.lineTo(320,H/2);
    ctx.closePath();
    ctx.stroke();
}
function update() {
    updateScore(); 
    movePaddles();
    drawDashedLine()
    ball.x += ball.vx;
    ball.y += ball.vy;
    p1 = paddles[1];
    p2 = paddles[2];
    collisions();
    flag = 0;
}
function collides(b, p) {
    if(b.x + ball.r >= p.x && 
       b.x - ball.r <=p.x + p.w) {
        if(b.y >= (p.y - p.h) && p.y > 0){
            paddleHit = 1;
                return true;
        } else if(b.y <= p.h && p.y == 0) {
            paddleHit = 2;
                return true;
        } else {
          return false;
        }
    }
}
function collideAction(ball, p) {
    ball.vy = -ball.vy;
    if(paddleHit == 1) {
        ball.y = p.y - p.h;
        particlePos.y = ball.y + ball.r;
        multiplier = -1;    
    } else if(paddleHit == 2) {
        ball.y = p.h + ball.r;
        particlePos.y = ball.y - ball.r;
        multiplier = 1; 
    }
    points++;
    if(collision) {
        if(points > 0) {
            collision.pause();
        }
        collision.currentTime = 0;
        collision.play();
    }
    particlePos.x = ball.x;
    flag = 1;
}
// Function for updating score
function updateScore() {
    ctx.fillStlye = "green";
    ctx.font = "20px Arial, sans-serif";
    ctx.textAlign = "left";
    ctx.textBaseline = "top";
    ctx.fillText(points, 20, 20 );
}
// Function to run when the game overs
function gameOver() {
    ctx.fillStlye = "white";
    ctx.font = "20px Arial, sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("Game Over! ("+points+")", W/2, H/2 + 25 );
    cancelRequestAnimFrame(init); //stops the animation frame
    over = 1;
    restartBtn.draw(); //This will allow the user to restart the game
}
// Function for running the whole animation
function animloop() {
    init = requestAnimFrame(animloop);
    draw();
}
// Function to execute at startup
function startScreen() {
    draw();
    startBtn.draw();
}
// On button click (Restart and start)
function btnClick(e) {
    var mx = e.pageX;
    var my = e.pageY;
    if(mx >= startBtn.x && mx <= startBtn.x + startBtn.w) {
        animloop();
        startBtn = {};
    }
    // If the game is over, and the restart button is clicked
    if(over == 1) {
        if(mx >= restartBtn.x && mx <= restartBtn.x + restartBtn.w) {
            ball.x = 20;
            ball.y = 20;
            points = 0;
            ball.vx = 4;
            ball.vy = 8;
            animloop();
            over = 0;
        }
    }
}
paddles.push(new Paddle("bottom"));
paddles.push(new Paddle("top"));
startScreen();
</script>
</body>
</html>

0 个答案:

没有答案
相关问题
最新问题