JavaScript实现打砖块游戏

<!DOCTYPE html>
<html>
<!-- 使用原生的JavaScript复现打砖块游戏；代码在复现时有所改动。--><head><meta charset="utf-8" /><title>JavaScript实现打砖块游戏_/艾孜尔江撰/</title><style>* {padding: 0;margin: 0;}canvas {background: #eee;display: block;margin: 0 auto;}</style>
</head><body><canvas id="maincanvas" width="480" height="320"></canvas><script>var canvas = document.getElementById("maincanvas");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;var brickRowCount = 5;var brickColumnCount = 3;var brickWidth = 75;var brickHeight = 20;var brickPadding = 10;var brickOffsetTop = 30;var brickOffsetLeft = 30;var score = 0;var lives = 3;var bricks = [];for (var c = 0; c < brickColumnCount; c++) {bricks[c] = [];for (var r = 0; r < brickRowCount; r++) {bricks[c][r] = { x: 0, y: 0, status: 1 };}}document.addEventListener("keydown", keyDownHandler, false);document.addEventListener("keyup", keyUpHandler, false);document.addEventListener("mousemove", mouseMoveHandler, 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 mouseMoveHandler(e) {var relativeX = e.clientX - canvas.offsetLeft;if (relativeX > 0 && relativeX < canvas.width) {paddleX = relativeX - paddleWidth / 2;}}function collisionDetection() {for (var c = 0; c < brickColumnCount; c++) {for (var 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) {alert("YOU WIN, CONGRATS!");document.location.reload();}}}}}}function drawBall() {ctx.beginPath();ctx.arc(x, y, ballRadius, 0, Math.PI * 2);ctx.fillStyle = "#0095DD";ctx.fill();ctx.closePath();}function drawPaddle() {ctx.beginPath();ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);ctx.fillStyle = "#0095DD";ctx.fill();ctx.closePath();}function drawBricks() {for (var c = 0; c < brickColumnCount; c++) {for (var r = 0; r < brickRowCount; r++) {if (bricks[c][r].status == 1) {var brickX = (r * (brickWidth + brickPadding)) + brickOffsetLeft;var brickY = (c * (brickHeight + brickPadding)) + brickOffsetTop;bricks[c][r].x = brickX;bricks[c][r].y = brickY;ctx.beginPath();ctx.rect(brickX, brickY, brickWidth, brickHeight);ctx.fillStyle = "#0095DD";ctx.fill();ctx.closePath();}}}}function drawScore() {ctx.font = "16px Arial";ctx.fillStyle = "#0095DD";ctx.fillText("Score: " + score, 8, 20);}function drawLives() {ctx.font = "16px Arial";ctx.fillStyle = "#0095DD";ctx.fillText("Lives: " + lives, canvas.width - 65, 20);}function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);drawBricks();drawBall();drawPaddle();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) {if (x > paddleX && x < paddleX + paddleWidth) {dy = -dy;}else {lives--;if (!lives) {alert("GAME OVER");document.location.reload();}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 += 7;}else if (leftPressed && paddleX > 0) {paddleX -= 7;}x += dx;y += dy;requestAnimationFrame(draw);}draw();</script></body></html>

JavaScript实现打砖块游戏_艾孜尔江撰相关推荐

JavaScript实现令人放松的小游戏_艾孜尔江撰
<html><head><!-- 由艾孜尔江·艾尔斯兰复现,转载或使用请注意标明出处.全程均使用鼠标交互,原游戏创作者不详,复现时有改动.使用时请在本地路径下放置一张玩家 ...
用JavaScript实现贪吃蛇游戏_艾孜尔江撰
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>J ...
基于JavaScript实现游戏Pong_艾孜尔江撰
<!doctype html> <html lang="en"><head><meta charset="UTF-8" ...
C++图书管理系统_艾孜尔江撰
#include<iostream> #include<conio.h> //控制台数据输入输出的函数 #include<fstream>//文件流 #includ ...
Git常用命令及其作用_艾孜尔江撰
撤销所有本次未提交的修改(相当于Tortoise Git的revert按钮): git checkout . 恢复某个已修改的文件(撤销未提交的修改): git checkout file-name ...
从0开始配置云服务器开发环境_艾孜尔江撰
选择云服务器系统为Cent OS最新版本或根据自己的需求选择稳定版本,并在完成部署之后从本地通过在终端中输入 ssh root@YourIPAdress 登录到服务器上,如果出现 ssh连接时提示TH ...
获取平面的法向量_艾孜尔江撰
Vector4 GetNormalVector(const Vector4& p1, const Vector4& p2, const Vector4& p3){Vector4 ...
点与平面的距离特征_艾孜尔江撰
点到平面距离公式 distance = Ax + By + Cz + D; //点P(x,y,z),平面的法向量n=(A,B,C),D是距原点的距离. 其中n = (A, B, C)是平面的法向量,D ...
关闭Windows更新后出现的桌面下方天气预报_艾孜尔江撰
问题阐述最近根据微软官方定时更新提示,更新了一下Windows 10系统,更新完之后最大的改变我感觉就是桌面右下角任务栏上出现了关于今日天气预报的相关提示,类似于任务栏上的广告.笔者不禁慨叹:&qu ...

JavaScript实现打砖块游戏_艾孜尔江撰

JavaScript实现打砖块游戏_艾孜尔江撰相关推荐

最新文章

热门文章