限时优惠活动
亲爱的苦力吧用户，我们为了回馈新老用户一直以来的鼎力支持，即日起（2025-02-06至2025-03-06）凡是购买苦力吧VIP/充值K币的新老用户，都直接可获得买一送一的优惠馈赠。例如：购买一个月的VIP会员可直接获得两个月的VIP会员；充值100K币可直接获得200K币，以此类推！有任何疑问可联系在线客服，感谢各位用户对苦力吧素材的信任与厚爱，我们将一如既往的给大家上新更多优质的素材源码，祝大家开工大吉、工作顺利、心想事成。
  1. 首页
  2. 网页特效
  3. 抽奖&游戏

javascript弹珠打砖块2D网页小游戏源码

所属分类： 网页特效-抽奖&游戏    2023-11-29 04:01:26

 21.1K  4  查看评论 (1)
javascript弹珠打砖块2D网页小游戏源码 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载  我要建站

javascript弹珠打砖块2D网页小游戏源码（共3个文件）

    • index.html

使用方法

  • code
  • source
  1. // Canvas related variables

  2. var canvas = document.getElementById('myCanvas');

  3. var ctx = canvas.getContext('2d');

  4. 

  5. // Game related variables

  6. var lives = 3;

  7. var gameOver = false;

  8. var paused = false;

  9. var score = 0;

  10. var autoplayToggle = document.getElementById("autoplay");

  11. autoplayToggle.checked = false;

  12. 

  13. // Ball relates variables

  14. var x = canvas.width / 2;

  15. var y = canvas.height - 30;

  16. var dx = 1.5;

  17. var dy = -1.5;

  18. var ballRadius = 10;

  19. var maxSpeed = 3.5;

  20. var speedMultiplier = 1;

  21. 

  22. // Paddle related variables

  23. var paddleHeight = 10;

  24. var paddleWidth = 75;

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

  26. var paddleY = canvas.height - (paddleHeight + 5);

  27. var rightPressed = false;

  28. var leftPressed = false;

  29. var paddleSpeed = 7;

  30. 

  31. // Brick related variables

  32. var brickRowCount = 3;

  33. var brickColumnCount = 5;

  34. var brickWidth = 75;

  35. var brickHeight = 20;

  36. var brickPadding = 10;

  37. var brickOffsetTop = 30;

  38. var brickOffsetLeft = 30;

  39. var bricks = [];

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

  41.     bricks[c] = [];

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

  43.         bricks[c][r] = {

  44.             x: 0,

  45.             y: 0,

  46.             status: 2

  47.         };

  48.     }

  49. }

  50. 

  51. function draw() {    

  52.     if (!paused) {

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

  54. 

  55.         if (autoplayToggle.checked) {

  56.             autoPlay();

  57.         }

  58.         drawPaddle();

  59.         drawBricks();

  60.         drawBall();

  61.         collisionDetection();

  62.         drawScore();

  63.         drawLives();

  64. 

  65.         x += dx;

  66.         y += dy;

  67.     }

  68.     if (x + dx > (canvas.width - ballRadius) || x + dx < ballRadius) {

  69.         dx = -dx;

  70.     }

  71.     if (y + dy < ballRadius) {

  72.         dy = -dy;

  73.     } else if (y + dy > (canvas.height - (2 * ballRadius))) {

  74. 

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

  76.             dy = -dy;

  77.             if (Math.abs(dx) < maxSpeed && Math.abs(dy) < maxSpeed) {

  78.                 dx *= speedMultiplier;

  79.                 dy *= speedMultiplier;

  80. 

  81.                 console.log(dx);

  82.             }

  83.         } else {

  84.             lives--;

  85.             if (!lives) {

  86.                 alert("游戏结束");

  87.                 document.location.reload();

  88.             } else {

  89.                 x = canvas.width / 2;

  90.                 y = canvas.height - 30;

  91.                 dx = 2;

  92.                 dy = -2;

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

  94.             }

  95. 

  96.         }

  97. 

  98.     }

  99. 

  100.     if (lives <= 0) {

  101.         loseMessage.style.display = "block";

  102.     }

  103.     

  104.     requestAnimationFrame(draw);

  105. }

  106. 

  107. function drawBall() {

  108.     ctx.beginPath();

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

  110.     ctx.fillStyle = '#0095DD';

  111.     ctx.fill();

  112.     ctx.closePath();

  113. 

  114. 

  115. }

  116. 

  117. function drawPaddle() {

  118.     ctx.beginPath();

  119.     ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);

  120.     ctx.fillStyle = "#00FFFF";

  121.     ctx.fill();

  122.     ctx.closePath();

  123. 

  124.     if (rightPressed) {

  125.         if (paddleX + paddleSpeed < canvas.width - paddleWidth) {

  126.             paddleX += paddleSpeed;

  127.         }

  128.     } else if (leftPressed) {

  129.         if (paddleX - paddleSpeed > 0) {

  130.             paddleX -= paddleSpeed;

  131.         }

  132.     }

  133. }

  134. 

  135. function autoPlay() {

  136.     var newX = x - (paddleWidth / 2);

  137. 

  138.     if (newX >= 0 && newX <= canvas.width - paddleWidth) {

  139.         paddleX = newX;

  140.     }

  141. }

  142. 

  143. function drawBricks() {

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

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

  146.             if (bricks[c][r].status > 0) {

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

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

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

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

  151.                 ctx.beginPath();

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

  153.                 ctx.fillStyle = bricks[c][r].status == 2 ? "#ddd000" : "#dd1e00";

  154.                 ctx.fill();

  155.                 ctx.closePath();

  156.             }

  157.         }

  158.     }

  159. }

  160. 

  161. function collisionDetection() {

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

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

  164.             var b = bricks[c][r];

  165.             if (b.status != 0) {

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

  167.                     dy = -dy;

  168.                     b.status--;

  169. 

  170.                     if (b.status == 0) {

  171.                         dy = -dy;

  172.                         score++;

  173. 

  174.                         if (score == brickRowCount * brickColumnCount) {

  175.                             alert("恭喜你~ 你赢了！");

  176.                             document.location.reload();

  177.                         }

  178.                     }

  179.                 }

  180.             }

  181.         }

  182.     }

  183. }

  184. 

  185. function drawScore() {

  186.     ctx.font = "16px Arial";

  187.     ctx.fillStyle = "#0095DD";

  188.     ctx.fillText("得分: " + score, 8, 20);

  189. }

  190. 

  191. function drawLives() {

  192.     ctx.font = "16px Arial";

  193.     ctx.fillStyle = "#0095DD";

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

  195. }

  196. 

  197. function keyDownHandler(e) {

  198.     if (e.keyCode == 39 || e.keyCode == 68) {

  199.         rightPressed = true;

  200.     } else if (e.keyCode == 37 || e.keyCode == 65) {

  201.         leftPressed = true;

  202.     }

  203. }

  204. 

  205. function keyUpHandler(e) {

  206.     if (e.keyCode == 39 || e.keyCode == 68) {

  207.         rightPressed = false;

  208.     } else if (e.keyCode == 37 || e.keyCode == 65) {

  209.         leftPressed = false;

  210.     }

  211. }

  212. 

  213. function pauseKeyPress(e) {

  214.     if (e.keyCode == 27) {

  215.         paused = !paused;

  216.         console.log(paused);

  217.     }

  218. }

  219. 

  220. function mouseMoveHandler(e) {

  221.     var relativeX = e.clientX - canvas.offsetLeft;

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

  223.         var newPaddleX = relativeX - paddleWidth / 2;

  224. 

  225.         if (newPaddleX >= 0 && newPaddleX + paddleWidth <= canvas.width) {

  226.             paddleX = newPaddleX;

  227.         }

  228.     }

  229. }

  230. 

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

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

  233. document.addEventListener("keyup", pauseKeyPress, false);

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

  235. //setInterval(draw, 10);

  236. draw();

// Canvas related variables
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// Game related variables
var lives = 3;
var gameOver = false;
var paused = false;
var score = 0;
var autoplayToggle = document.getElementById("autoplay");
autoplayToggle.checked = false;

// Ball relates variables
var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 1.5;
var dy = -1.5;
var ballRadius = 10;
var maxSpeed = 3.5;
var speedMultiplier = 1;

// Paddle related variables
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width - paddleWidth) / 2;
var paddleY = canvas.height - (paddleHeight + 5);
var rightPressed = false;
var leftPressed = false;
var paddleSpeed = 7;

// Brick related variables
var brickRowCount = 3;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
var bricks = [];
for (c = 0; c < brickColumnCount; c++) {
    bricks[c] = [];
    for (r = 0; r < brickRowCount; r++) {
        bricks[c][r] = {
            x: 0,
            y: 0,
            status: 2
        };
    }
}

function draw() {    
    if (!paused) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        if (autoplayToggle.checked) {
            autoPlay();
        }
        drawPaddle();
        drawBricks();
        drawBall();
        collisionDetection();
        drawScore();
        drawLives();

        x += dx;
        y += dy;
    }
    if (x + dx > (canvas.width - ballRadius) || x + dx < ballRadius) {
        dx = -dx;
    }
    if (y + dy < ballRadius) {
        dy = -dy;
    } else if (y + dy > (canvas.height - (2 * ballRadius))) {

        if (x > paddleX && x < paddleX + paddleWidth) {
            dy = -dy;
            if (Math.abs(dx) < maxSpeed && Math.abs(dy) < maxSpeed) {
                dx *= speedMultiplier;
                dy *= speedMultiplier;

                console.log(dx);
            }
        } else {
            lives--;
            if (!lives) {
                alert("游戏结束");
                document.location.reload();
            } else {
                x = canvas.width / 2;
                y = canvas.height - 30;
                dx = 2;
                dy = -2;
                paddleX = (canvas.width - paddleWidth) / 2;
            }

        }

    }

    if (lives <= 0) {
        loseMessage.style.display = "block";
    }
    
    requestAnimationFrame(draw);
}

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, paddleY, paddleWidth, paddleHeight);
    ctx.fillStyle = "#00FFFF";
    ctx.fill();
    ctx.closePath();

    if (rightPressed) {
        if (paddleX + paddleSpeed < canvas.width - paddleWidth) {
            paddleX += paddleSpeed;
        }
    } else if (leftPressed) {
        if (paddleX - paddleSpeed > 0) {
            paddleX -= paddleSpeed;
        }
    }
}

function autoPlay() {
    var newX = x - (paddleWidth / 2);

    if (newX >= 0 && newX <= canvas.width - paddleWidth) {
        paddleX = newX;
    }
}

function drawBricks() {
    for (c = 0; c < brickColumnCount; c++) {
        for (r = 0; r < brickRowCount; r++) {
            if (bricks[c][r].status > 0) {
                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 = bricks[c][r].status == 2 ? "#ddd000" : "#dd1e00";
                ctx.fill();
                ctx.closePath();
            }
        }
    }
}

function collisionDetection() {
    for (c = 0; c < brickColumnCount; c++) {
        for (r = 0; r < brickRowCount; r++) {
            var b = bricks[c][r];
            if (b.status != 0) {
                if (x > b.x && x < b.x + brickWidth && y - ballRadius > b.y && y - ballRadius < b.y + brickHeight) {
                    dy = -dy;
                    b.status--;

                    if (b.status == 0) {
                        dy = -dy;
                        score++;

                        if (score == brickRowCount * brickColumnCount) {
                            alert("恭喜你~ 你赢了！");
                            document.location.reload();
                        }
                    }
                }
            }
        }
    }
}

function drawScore() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("得分: " + score, 8, 20);
}

function drawLives() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("生命: " + lives, canvas.width - 65, 20);
}

function keyDownHandler(e) {
    if (e.keyCode == 39 || e.keyCode == 68) {
        rightPressed = true;
    } else if (e.keyCode == 37 || e.keyCode == 65) {
        leftPressed = true;
    }
}

function keyUpHandler(e) {
    if (e.keyCode == 39 || e.keyCode == 68) {
        rightPressed = false;
    } else if (e.keyCode == 37 || e.keyCode == 65) {
        leftPressed = false;
    }
}

function pauseKeyPress(e) {
    if (e.keyCode == 27) {
        paused = !paused;
        console.log(paused);
    }
}

function mouseMoveHandler(e) {
    var relativeX = e.clientX - canvas.offsetLeft;
    if (relativeX > 0 && relativeX < canvas.width) {
        var newPaddleX = relativeX - paddleWidth / 2;

        if (newPaddleX >= 0 && newPaddleX + paddleWidth <= canvas.width) {
            paddleX = newPaddleX;
        }
    }
}

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
document.addEventListener("keyup", pauseKeyPress, false);
document.addEventListener("mousemove", mouseMoveHandler, false);
//setInterval(draw, 10);
draw();

站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服
标签： bootstrap小游戏弹珠游戏打砖块游戏游戏源码小游戏源码canvas
相关资源 / 抽奖&游戏
查看更多

jquery无缝滚动在线抽奖机老虎机特效

 一款模拟老虎机游戏机抽奖代码，停止和开始均为分开控制了，点击开始按钮，三位数字立即转动，按停止按钮可抽奖。
  抽奖&游戏
 9916  0

vue现金红包九宫格抽奖

 一款基于vue的红包抽奖插件，可随意配置 m * n 宫格, 格子大小和形状可自定义，支持同步 / 异步抽奖, 概率前后端可控。
  抽奖&游戏
 3324  0

纯javascript在线网球双人小游戏代码

 一款在线打网球小游戏源码，按住键盘上下方向键移动左侧人物，带比分显示。
  抽奖&游戏
 4307  0

jquery模拟老虎机滚动数字抽奖程序

 0~9三列数字随机滚动，中奖结果每一列取一个数字，一共三个数字。
  抽奖&游戏
 9810  0

评论数(1) 回复有机会获得K币 用户协议

    masker0
    2023-12-10 13:58:49
    这个游戏源码不错~ 下载研究一下看看怎么二次开发~
    回复
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论