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

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

javascript弹珠打砖块2D网页小游戏源码 ie兼容6
反馈问题  查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

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

    • index.html

使用方法

// 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. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 抽奖&游戏

原生js圣诞老人过悬崖游戏源码

一款html5响应式圣诞老人过悬崖的游戏代码,任何地方按住不懂显示柱子,放手后可架桥。
  抽奖&游戏
 1320  0

jquery空间商促销活动大转盘雷达抽奖特效

可自定义设置多个参数:帧高度、跑马灯开关、阻力值、加速度等。
  抽奖&游戏
 8429  0

jquery手机移动端九宫格抽奖特效代码

一款在线抽奖前端页面,支持自定义设置抽奖参数,比如:起始位置、中奖位置、转动速度、转动次数等,都可以修改js参数来设定。
  抽奖&游戏
 243  0

jquery年会幸运观众qq头像抽奖系统代码

可自动抽奖,而且还可设置指定中奖人(作弊),以及设置单次抽奖人数!
  抽奖&游戏
 4286  0

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

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