HTML5 canvas游戏

 

demo地址： http://pan.baidu.com/s/1sjQNkCH

var canvas = document.getElementById('canvas'),
    context = canvas.getContext("2d"),
    image = new Image(),
    w = canvas.width,
    h = canvas.height;
var weapon = {
    width: 10,
    angle: Math.PI / 6,      //30deg
    lineone: 100,
    linetwo: 70,
    strokestyle: '#999884'
};

var now = -1;

var originBall = {
    x: w / 2,
    y: h - 90,
    ox: w / 2,
    oy: h - 90,
    velocityX: 0,
    velocityY: 0,
    radius: 20,
    fillStyle: 'rgba(100,145,230,1)',
    strokeStyle: 'green'
}

var ballforsave = {};

var startClick = {};
var balls = [
        {
            x: w / 2 - 50,
            y: h - 20 - 5,
            velocityX: 2,
            velocityY: 2,
            radius: 20,
            fillStyle: 'rgba(255,255,0,1)',
            strokeStyle: 'gray',
            move : false
        },

        {
            x: w / 2 - 100,
            y: h - 20 - 5,
            velocityX: 2,
            velocityY: 2,
            radius: 20,
            fillStyle: 'rgba(100,145,230,1.0)',
            strokeStyle: 'blue',
            move : false
        },

        {
            x: w / 2 - 150,
            y: h - 20 - 5,
            velocityX: 2,
            velocityY: 2,
            radius: 20,
            fillStyle: 'rgba(255,0,0,1.0)',
            strokeStyle: 'orange',
            move : false
        }
    ],
    dragging = false,
    finalDrag = false,
    movingBalls = [],
    ballsNum = balls.length;


var leftPoint = {
    x: (w - weapon.width) / 2 - 50 * Math.cos(weapon.angle) - 1,
    y: h - weapon.lineone - 50 * Math.sin(weapon.angle) - 9
}

var rightPoint = {
    x: (w + weapon.width) / 2 + 50 * Math.cos(weapon.angle) + 1,
    y: h - weapon.lineone - 50 * Math.sin(weapon.angle) - 9
}

function windowToCanvas(x, y) {     //将窗口的鼠标对于回canvas里的鼠标位置
    var bbox = canvas.getBoundingClientRect();
    return {
        x: x - bbox.left * (canvas.width / bbox.width),
        y: y - bbox.top * (canvas.height / bbox.height)
    };
}function drawWeapon(weapon) {
    context.save();
    context.beginPath();
    context.strokeStyle = weapon.strokestyle;
    context.lineWidth = weapon.width;

    context.moveTo(w / 2, h);
    context.lineTo(w / 2, h - weapon.lineone);

    context.moveTo(w / 2, h - weapon.lineone);
    context.lineTo(w / 2 - weapon.linetwo * Math.cos(weapon.angle), h - weapon.lineone - weapon.lineone * Math.sin(weapon.angle));

    context.moveTo(w / 2, h - weapon.lineone);
    context.lineTo(w / 2 + weapon.linetwo * Math.cos(weapon.angle), h - weapon.lineone - weapon.lineone * Math.sin(weapon.angle));
    context.stroke();
    context.closePath();

    context.beginPath();
    context.strokeStyle = "#000";

    context.moveTo(
        (w - weapon.width) / 2 - 50 * Math.cos(weapon.angle) - 1,
        h - weapon.lineone - 50 * Math.sin(weapon.angle) - 9
    );

    context.lineTo
    (
        w / 2 - 50 * Math.cos(weapon.angle) + weapon.width * Math.sin(Math.PI / 4) - 6,
        h - weapon.lineone - 50 * Math.sin(weapon.angle) - weapon.width * Math.sin(Math.PI / 4) - 10
    );

    context.moveTo(
        (w + weapon.width) / 2 + 50 * Math.cos(weapon.angle) + 1,
        h - weapon.lineone - 50 * Math.sin(weapon.angle) - 9
    );

    context.lineTo
    (
        w / 2 + 50 * Math.cos(weapon.angle) - weapon.width * Math.sin(Math.PI / 4) + 6,
        h - weapon.lineone - 50 * Math.sin(weapon.angle) - weapon.width * Math.sin(Math.PI / 4) - 10
    );
    context.stroke();
    context.restore();
    context.closePath();

}

function drawWeaponMove(originBall) {
    context.save();
    context.beginPath();
    context.lineWidth = 3;
    context.strokeStyle = 'red'
    context.moveTo(leftPoint.x + 4, leftPoint.y - 4);
    context.lineTo(originBall.x, originBall.y);
    context.moveTo(originBall.x, originBall.y);
    context.lineTo(rightPoint.x - 4, rightPoint.y - 4);
    context.stroke();
    context.closePath();

    context.save();
    context.beginPath();
    context.lineWidth = 1;
    context.arc(originBall.x, originBall.y, originBall.radius, 0, Math.PI * 2);
    context.fillStyle = originBall.fillStyle;
    context.strokeStyle = originBall.strokeStyle;
    context.fill();
    context.stroke();
    context.restore();

}

function drawBackground() {
    context.drawImage(image, 0, 0, w, h);
}

function drawBalls() {
    for (var i = 0; i < ballsNum; i++) {
        if (balls[i].move == false) {
            context.save();
            context.beginPath();
            context.lineWidth = 1;
            context.arc(balls[i].x, balls[i].y, balls[i].radius, 0, Math.PI * 2);
            context.fillStyle = balls[i].fillStyle;
            context.strokeStyle = balls[i].strokeStyle;
            context.fill();
            context.stroke();
            context.restore();
        }
    }
}

function drawMovingBalls(){
    for (var i = 0; i < movingBalls.length; i++) {
            context.save();
            context.beginPath();
            context.lineWidth = 1;
            context.arc(movingBalls[i].x, movingBalls[i].y, movingBalls[i].radius, 0, Math.PI * 2);
            context.fillStyle = movingBalls[i].fillStyle;
            context.strokeStyle = movingBalls[i].strokeStyle;
            context.fill();
            context.stroke();
            context.restore();
    }
}

function setValue(value){
    var i = new Object();
    i.value = value;
    return i.value;
}

function update() {
    var ball = null;

    for (var i = 0; i < movingBalls.length; ++i) {
        ball = movingBalls[i];
            if (ball.x + ball.velocityX + ball.radius > w ||
                ball.x + ball.velocityX - ball.radius < 0)
                ball.velocityX = -ball.velocityX;

            if (ball.y + ball.velocityY + ball.radius > h ||
                ball.y + ball.velocityY - ball.radius < 0)
                ball.velocityY = -ball.velocityY;

            ball.x += ball.velocityX;
            ball.y += ball.velocityY;
    }
}

function drawGame() {
    //console.log(1);
    context.clearRect(0,0,canvas.width,canvas.height);
    drawBackground();
    drawWeapon(weapon);
    update();
    drawBalls();
    drawMovingBalls();
    drawWeaponMove(originBall);
    window.requestNextAnimationFrame(drawGame);
}

canvas.onmousedown = function (e) {
    var loc = windowToCanvas(e.clientX, e.clientY);
    if (context.isPointInPath(loc.x, loc.y)) {
        console.log(loc);
        dragging = true;
        startClick.x = loc.x;
        startClick.y = loc.y;
    }
}

canvas.onmousemove = function (e) {
    var loc = windowToCanvas(e.clientX, e.clientY);
    if (dragging && !finalDrag) {
        var x = Math.abs(loc.x - startClick.x),
            y = Math.abs(loc.y - startClick.y);
        if (x > 200) {x = 200;}
        if (y > 200) {y = 200;}

        if (loc.x < startClick.x) {originBall.x = originBall.ox - x;}
        else {originBall.x = originBall.ox + x;}

        if (loc.y < startClick.y) {originBall.y = originBall.oy - y;}
        else {originBall.y = originBall.oy + y;}
    }
}

canvas.onmouseup = function (e) {
    if (dragging && !finalDrag) {
        var loc = windowToCanvas(e.clientX, e.clientY);
        var x = Math.abs(loc.x - startClick.x),
            y = Math.abs(loc.y - startClick.y);
        if (x > 200) {x = 200;}
        if (y > 200) {y = 200;}

        if (loc.x < startClick.x) {originBall.velocityX = -x/5;}
        else {originBall.velocityX = x/5;}

        if (loc.y < startClick.y) {originBall.velocityY = -y/5;}
        else {originBall.velocityY = y/5;}

        dragging = false;
        var cloneball = new Object();
        cloneball = clone(originBall)
        movingBalls.push(cloneball);
        now++;
        originBall.velocityX = 0;
        originBall.velocityY = 0;
        console.log(now);
        if(now >= ballsNum){
            finalDrag = true;
            console.log("子弹射完了，要么刷新要么看他们慢慢飞吧");
            originBall.x = w / 2;
            originBall.y = h - 90;
            originBall.radius = 5;
            return;
        }
        originBall.fillStyle = balls[now].fillStyle;
        originBall.strokeStyle = balls[now].strokeStyle;
        //originBall.velocityX = 0;
        //originBall.velocityY = 0;
        originBall.x = w / 2;
        originBall.y = h - 90;

        for (var i = 0; i < ballsNum; i++) {
            if (i != ballsNum - 1) {
                balls[ballsNum-i-1].x = setValue(balls[ballsNum-i-2].x);
                balls[ballsNum-i-1].y = setValue(balls[ballsNum-i-2].y);
            }
        }
        balls[now].move = true;
        //console.log(balls);
        console.log(movingBalls);

        //window.requestNextAnimationFrame(drawGame);
        //setInterval(drawGame);
    }
}

image.src = 'img/sky.png';
window.onload = function () {
    drawGame();
}