乒乓球比赛我的球继续高于球门

时间:2018-05-31 10:39:01

标签: javascript canvas

我有一个简单的乒乓球游戏,我可以在那里射击球并检查合作。我有X和Y的合作,但是由于我在球轨迹上增加了角度,X坐标处的分数有时会失败,不知道为什么。所以这就是我目前所拥有的,colisions检查由 ballMovementHandler 函数处理。

from tkinter import *

def mouse_click(event):
    '''  delay mouse action to allow for double click to occur
    '''
    aw.after(300, mouse_action, event)

def double_click(event):
    '''  set the double click status flag
    '''
    global double_click_flag
    double_click_flag = True

def mouse_action(event):
    global double_click_flag
    if double_click_flag:
        print('double mouse click event')
        double_click_flag = False
    else:
        print('single mouse click event')

root = Tk()
aw = Canvas(root, width=200, height=100, bg='grey')
aw.place(x=0, y=0)

double_click_flag = False
aw.bind('<Button-1>', mouse_click) # bind left mouse click
aw.bind('<Double-1>', double_click) # bind double left clicks
aw.mainloop()

ball.js

var canvas;
var ctx;
var player;
var ball;
var gameStarted;
var flagY;
var flagX;
var angle;

function init() {
    canvas = document.getElementById('myCanvas')
    if (canvas.getContext) {
        ctx = canvas.getContext('2d')
        setCanvasSize(ctx)
        player = new Player()
        ball = new Ball()
        attachKeyboardListeners()   
        reset();
        animate();  
    }
}

function reset() {
    flagX = -1;
    flagY = -1;
    angle = 90;
    gameStarted = false
    player = new Player();
    ball = new Ball();
}

function animate () {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    drawIce()    
    player.drawPlayer();
    ball.drawBall();
    playerMovementeHandler()

    if(gameStarted) {
        ballMovementHandler();            
    }

    window.requestAnimationFrame(animate);    
}

function playerMovementeHandler() {
    if(player.left === true) {
        if(player.x > 0) {
            player.movePlayer(-SPEED);
            if(!gameStarted) {
                ball.moveBallWithPlayer(-SPEED);
            }            
        }
    }

    if(player.right === true) {
        if(player.x + player.width < ctx.canvas.width) {
            player.movePlayer(SPEED);            
            if(!gameStarted) {
                ball.moveBallWithPlayer(SPEED);
            }      
        }
    }
}

function ballMovementHandler() {
    if(ball.y - ball.radius <= 0) {
        flagY = 1;
    }
    if(ball.y + ball.radius === player.y) {
        if(ball.x + ball.radius >= player.x && ball.x < player.x + player.width) {
            angle = playerAngleHandler()
            flagY = -1;            
        }
        else {
            reset();
        }
    }
    if(ball.x - ball.radius <= 0) {
        flagX = 1;
    }
    if(ball.x + ball.radius >= ctx.canvas.width) {
        flagX = -1;
    }
    radians = angle * Math.PI/ 180;
    ball.moveBallY(Math.sin(radians) * ball.speed * flagY);
    ball.moveBallX(Math.cos(radians) * ball.speed * flagX);  
}

function playerAngleHandler() {
    var angle = 90;
    if(ball.x + ball.radius <= player.x + 25) {
        angle = 35;
    } else if(ball.x + ball.radius >= player.x + player.width - 25) {
        angle = 135;
    } else if(ball.x + ball.radius >= player.x + player.width - 50) {
        angle = 120
    } else if(ball.x + ball.radius <= player.x + 50 ) {
        angle = 50;
    } else if(ball.x + ball.radius <= player.x + 75) {
        angle = 75;
    } else if( ball.x + ball.radius >= player.x + player.width - 75 ) {
        angle = 100;
    }
    return angle;
}

function drawIce() {
    ctx.fillStyle = 'rgb(134,214,216)'
    ctx.fillRect(0,ctx.canvas.height - Y_OFFSET + player.height + 10, ctx.canvas.width, Y_OFFSET)
}

function setCanvasSize() {
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
}


function keyboardEvent(keyCode, keyStatus) {
    switch(keyCode) {
        case 37: 
            player.left = keyStatus;
            break;
        case 39: 
            player.right = keyStatus;
            break;
        case 32:
            gameStarted = true;
            break;
    }
}

function attachKeyboardListeners() {
    document.addEventListener('keydown', function(e) {
        keyboardEvent(e.keyCode, true)
    })  
    document.addEventListener('keyup', function(e) {
        keyboardEvent(e.keyCode, false)   
    }) 
}

  init();

player.js

// defines player configuration behaviour
const BALL_POSITION_Y = 100;
const RADIUS = 12;
const BALL_SPEED = 10;

function Ball(x = ctx.canvas.width/2, y = ctx.canvas.height - Y_OFFSET - RADIUS, radius = RADIUS, color = 'rgb(100,149,237)', speed = BALL_SPEED) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.speed = speed;

    this.drawBall = function() {
        ctx.fillStyle = this.color;        
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.radius,0,2*Math.PI);
        ctx.fill();
    }

    // for inital game started
    this.moveBallWithPlayer = function(deltaX) {
        this.x += deltaX;
    }

    this.moveBallY = function(flag) {
        this.y = this.y + flag;
    }

    this.moveBallX = function(flag) {
        this.x = this.x + flag;
    }
}

0 个答案:

没有答案