基于HTML5canvars的小游戏,使用HTML5 Canvas实现简化版的打砖头小游戏

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var canvas = document.getElementById("briksCanvas");

var ctx = canvas.getContext("2d");

var ballRadius = 10;

var ballColor = "#f44280";

var speed = 10;

var x = canvas.width / 2;

var y = canvas.height - 30;

var dx = -2;

var dy = -2;

var paddleHeight = 15;

var paddleWidth = 75;

var paddleX = (canvas.width - paddleWidth) / 2;

var rightPressed = false;

var leftPressed = false;

//bricks

var brickRowCount = 5;

var brickColumnCount = 6;

var brickWidth = 70;

var brickHeight = 20;

var brickPadding = 6;

var brickOffsetTop = 35;

var brickOffsetLeft = 15;

var score = 0;

var lives = 3;

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

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

document.addEventListener("mousemove", mouseMoveHandler, false);

var bricks = [];

for (c = 0; c < brickColumnCount; c++) {

bricks[c] = [];

for (r = 0; r < brickRowCount; r++) {

bricks[c][r] = {

x: 0,

y: 0,

status: 1

};

}

}

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();

ctx.arc(x, y, ballRadius, 0, Math.PI * 2);

ctx.fillStyle = ballColor;

ctx.fill();

ctx.closePath();

}

function drawPaddle() {

ctx.beginPath();

ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);

ctx.fillStyle = "#ddffa3";

ctx.fill();

ctx.closePath();

}

function drawBricks() {

for (c = 0; c < brickColumnCount; c++) {

for (r = 0; r < brickRowCount; r++) {

if (bricks[c][r].status == 1) {

var brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;

var brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;

bricks[c][r].x = brickX;

bricks[c][r].y = brickY;

ctx.beginPath();

ctx.rect(brickX, brickY, brickWidth, brickHeight);

ctx.fillStyle = "#8f63cc";

ctx.fill();

ctx.closePath();

}

}

}

}

function drawScore() {

ctx.font = "16px Arial";

ctx.fillStyle = "#f44280";

ctx.fillText("Score: " + score, 8, 20);

}

function drawLives() {

ctx.font = "16px Arial";

ctx.fillStyle = "#f44280";

ctx.fillText("Lives: " + lives, canvas.width - 65, 20);

}

function mouseMoveHandler(e) {

var relativeX = e.clientX - canvas.offsetLeft;

if (relativeX > 0 && relativeX < canvas.width) {

paddleX = relativeX - paddleWidth / 2;

}

}

function collisionDetection() {

for (c = 0; c < brickColumnCount; c++) {

for (r = 0; r < brickRowCount; r++) {

var b = bricks[c][r];

if (b.status == 1) {

if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {

dy = -dy;

b.status = 0;

score++;

if (score == brickRowCount * brickColumnCount) {

document.location.removedByCodePen();

}

}

}

}

}

}

function draw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBall();

drawPaddle();

drawBricks();

drawScore();

drawLives();

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 + paddleHeight)) {

if (x > paddleX && x < paddleX + paddleWidth) {

dy = -dy;

} else {

lives--;

if (!lives) {

document.location.removedByCodePen();

} else {

x = canvas.width / 2;

y = canvas.height - 30;

dx = 3;

dy = -3;

paddleX = (canvas.width - paddleWidth) / 2;

}

}

}

if (rightPressed && paddleX < canvas.width - paddleWidth) {

paddleX += 5;

} else if (leftPressed && paddleX > 0) {

paddleX -= 5;

}

x += dx;

y += dy;

requestAnimationFrame(draw);

}

draw();