手機apk樣板

點擊螢幕改變滑板位子

碰撞後變色再次碰撞後消失，計分器、計數器 三角變色

建置方塊 碰裝2次後消失 count++

設置計數器

count++

if(b.count  == 2){b.status = 0;}

三角形碰撞 底部漏接結束遊戲

反彈+擋板

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
}
function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
}

function drawBall() {
    ctx.beginPath();
var height = 10*Math.sin(Math.PI/3);
ctx.moveTo(x-15,y+30);
ctx.lineTo(x,y);
ctx.lineTo(x+15,y+30);
var grd = ctx.createLinearGradient(0,0,250,0);
grd.addColorStop(0,"#4CE8B2");
grd.addColorStop(1,"#EFD458");
ctx.fillStyle=grd;
ctx.fill();
}
function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();
 
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if(y + dy < ballRadius) {
        dy = -dy;
    }
    else if(y + dy > canvas.height-ballRadius) {
        if(x > paddleX && x < paddleX + paddleWidth) {
            dy = -dy;
        }
        else {
            alert("GAME OVER");
            document.location.reload();
        }
    }
 
    if(rightPressed && paddleX < canvas.width-paddleWidth) {
        paddleX += 7;
    }
    else if(leftPressed && paddleX > 0) {
        paddleX -= 7;
    }
 
    x += dx;
    y += dy;
}

setInterval(draw, 10);

test三角形反彈

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 5;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;

function drawBall() {
   ctx.beginPath();
var height = 10*Math.sin(Math.PI/3);//计算等边三角形的高
ctx.moveTo(x,y); //从A（100,0）开始
ctx.lineTo(x-15,y+30);//从A(100,0)开始，画到B (0,173)结束
ctx.lineTo(x+15,y+30); //B(0,173)-C(200,173)
var grd = ctx.createLinearGradient(0,0,20,0);//使用渐变颜色填充,从(0,0)到(200,0) （左到右）
grd.addColorStop(0,"#4CE8B2"); //起始颜色
grd.addColorStop(1,"#EFD458"); //终点颜色
ctx.fillStyle=grd; //以上面定义的渐变填充
ctx.fill(); //闭合形状并且以填充方式绘制出来
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
 
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
        dy = -dy;
    }

 
    x += dx;
    y += dy;
}

setInterval(draw, 10);