2016年5月11日 星期三
BALLBALL
var canvas=document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius=10;
//to move
var x=canvas.width/2;
var y=canvas.height-30;
var dx=2;
var dy=-2;
var paddleHeight=10;
var paddleWidth=750;
var paddleX=(canvas.width-paddleWidth)/2;
var rightPressed= false;
var leftPressed=false;
var brickRowCount = 3;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
document.addEventListener("keydown",keyDownHandler,false);
document.addEventListener("keyup",keyUpHandler,false);
var bricks = [];
for(c=0; c b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
dy = -dy;
b.count++;
if(b.count>4){
b.status = 0;}
}
}
}
}
}
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
drawBricks();
drawBall();
drawPaddle();
collisionDetection();
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) {
if(y= y-paddleHeight){
dy = -dy ;
}
}
else {
alert("GAME OVER");
document.location.reload();
}
}
if(rightPressed && paddleX0 ){
paddleX-=7;
}
x=x+dx;
y=y+dy;
}
setInterval(draw,10);
2016年5月4日 星期三
三角形
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);
ctx.lineTo(x-15,y+30);
ctx.lineTo(x+15,y+30);
var grd = ctx.createLinearGradient(0,0,20,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);
碰撞
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);
2016年4月27日 星期三
訂閱：
文章 (Atom)