【笔记】直播编程写游戏 - 2

其他 2018-10-24 10:31:40 阅读次数: 0

饮水思源：https://www.bilibili.com/video/av12168808

添加砖块（先写一个砖块 再弄成n个）&通过暂停与减速来debug：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas {
                border: 1px black solid;
            }
        </style>
    </head>
    <body>
        <canvas id="id-canvas" width="400" height="300"></canvas>
        <script>    
            let makeGuaGame = function(fps) {
                let g = {
                    actions: {},
                    keydowns: {},
                };
                g.canvas = document.querySelector("#id-canvas");
                g.context = g.canvas.getContext('2d');
                
                g.registerAction = function(key, callback) {
                    g.actions[key] = callback;
                };
                
                g.drawImage = function(guaImage) {
                    this.context.drawImage(guaImage.img, guaImage.x, guaImage.y);    
                }
                
                window.addEventListener("keydown", event => {
                    g.keydowns[event.key] = true;
                });
    
                window.addEventListener("keyup", event => {
                    g.keydowns[event.key] = false;
                });                
 
                setInterval(function() {
                    // events
                    let keys = Object.keys(g.keydowns);
                    for (let i = 0; i != keys.length; ++i) {
                        let k = keys[i];
                        if (g.keydowns[k]) {
                            g.actions[k]();
                        }
                    }
                    // update 
                    g.update();
                    // clear
                    g.context.clearRect(0, 0, g.canvas.width, g.canvas.height);
                    // draw
                    g.draw();            
                }, 1000/fps); 
                
                return g;
            };

            let imgFromPath = function(path) {
                let img = new Image(path);
                img.src = path;
                return img;
            };
            
            let makePaddle = function() {
                let img = imgFromPath('img/paddle.png');
                let o = {
                    img: img,
                    x: 200,
                    y: 250,
                    speed: 5,
                };
                o.moveLeft = function() {
                    this.x -= this.speed;
                    if (this.x < 0) {
                        this.x = 0;
                    }
                };
                o.moveRight = function() {
                    this.x += this.speed;
                    if (this.x > 400 - this.img.naturalWidth) {
                        this.x = 400 - this.img.naturalWidth;
                    }
                };
                o.collide = function(guaImg) {
                    if (Math.abs(o.x - guaImg.x) < o.img.naturalWidth/2 + guaImg.img.naturalWidth/2 
                      && Math.abs(o.y - guaImg.y) < o.img.naturalHeight/2 + guaImg.img.naturalHeight/2 
                    ) {
                      return true;
                    }
                    return false;
                };
                
                return o;
            };
            
            let makeBall = function() {
                let img = imgFromPath('img/ball.png');
                let o = {
                    img: img,
                    x: 200, 
                    y: 250,
                    speedX: 7,
                    speedY: -7,
                    fired: false,
                };
                o.fire = function() {
                    this.fired = true;
                }
                
                o.move = function() {
                    if (this.fired) {    
                        if (this.x > 400 || this.x < 0) {
                            this.speedX *= -1;
                        } else if (this.y > 300 || this.y < 0) {
                            this.speedY *= -1;
                        }    
                        this.x += this.speedX;
                        this.y += this.speedY;                        
                    }
                };
                o.反弹 = function() {
                    this.speedY *= -1;
                }
                
                return o;                
            };
            
            let makeBrick = function() {
                let img = imgFromPath('img/brick.png');
                let o = {
                    img: img,
                    x: 50, 
                    y: 50,
                    alive: true,
                };        
                o.kill = function() {
                    this.alive = false;
                }
                o.collide = function(guaImg) {
                    if (!this.alive) return false;
                    if (Math.abs(o.x - guaImg.x) < o.img.naturalWidth/2 + guaImg.img.naturalWidth/2 
                      && Math.abs(o.y - guaImg.y) < o.img.naturalHeight/2 + guaImg.img.naturalHeight/2 
                    ) {
                      return true;
                    }
                    return false;
                };
                
                return o;
            };
            
            let __main = function() {
                let game = makeGuaGame(fps=30);
                
                let paddle = makePaddle();
                
                let ball = makeBall();
                
                let bricks = [];
                for (let i = 0; i != 3; ++i) {
                    let b = makeBrick();
                    b.x = i * 150;
                    bricks.push(b);
                }
                
                game.registerAction('a', function() {
                    paddle.moveLeft();
                });
                
                game.registerAction('d', function() {
                    paddle.moveRight();    
                });

                game.registerAction('f', function() {
                    ball.fire();    
                });
                
                let pause = false;
                window.addEventListener("keydown", event => {
                    if (event.key == 'p') {
                        pause = !pause;
                    }
                });
                game.update = function() {    
                    if (pause) { // 暂停的移动
                        return;
                    }
                    
                    ball.move();
                    if (paddle.collide(ball)) {
                        ball.反弹();
                    }
                    for (let i = 0; i != bricks.length; ++i) {
                        if (bricks[i].collide(ball)) {
                            bricks[i].kill();
                            ball.反弹();
                        }
                    }
                };
                
                game.draw = function() {
                    game.drawImage(paddle);    
                    game.drawImage(ball);    
                    for (let i = 0; i != bricks.length; ++i) {
                        if (bricks[i].alive) {
                            game.drawImage(bricks[i]);    
                        }    
                    }
                };            
            };            
            
            __main();
        </script>
    </body>
</html>
View Code

将各部分代码拆分为独立文件 &添加关卡以及debug模式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas {
                border: 1px black solid;
            }
        </style>
        <script src="js/utils.js"></script>
        <script src="js/guagame.js"></script>
        <script src="js/paddle.js"></script>
        <script src="js/ball.js"></script>
        <script src="js/brick.js"></script>
        <script src="js/levels.js"></script>
    </head>
    
    <body>
        <canvas id="id-canvas" width="400" height="300"></canvas>
        <script>    
            
            let pause = false;                    
            let enableDebugMode = function(enable) {
                if (!enable) {
                    return;
                }
                window.addEventListener("keydown", event => {
                    if (event.key == 'p') {
                        pause = !pause;
                    }
                });                    
            };
            
            let __main = function() {
                enableDebugMode(false);
                
                let game = makeGuaGame(fps=40);                
                let paddle = makePaddle();                
                let ball = makeBall();                
                let bricks = loadLevel(0);
                
                game.registerAction('a', function() {
                    paddle.moveLeft();
                });            
                game.registerAction('d', function() {
                    paddle.moveRight();    
                });
                game.registerAction('f', function() {
                    ball.fire();    
                });
                        
                game.update = function() {    
                    if (pause) { // 暂停球的移动
                        return;
                    }                    
                    ball.move();
                    if (paddle.collide(ball)) {
                        ball.反弹();
                    }
                    for (let i = 0; i != bricks.length; ++i) {
                        if (bricks[i].collide(ball)) {
                            bricks[i].kill();
                            ball.反弹();
                        }
                    }
                };
                
                game.draw = function() {
                    game.drawImage(paddle);    
                    game.drawImage(ball);    
                    for (let i = 0; i != bricks.length; ++i) {
                        if (bricks[i].alive) {
                            game.drawImage(bricks[i]);    
                        }    
                    }
                };            
            };            
            
            __main();
        </script>
    </body>
</html>
View Code

砖块生命值 &动态调fps ：

let makeBrick = function(x, y, HP=1) {
    // x, y 是砖块的坐标
    let img = imgFromPath('img/brick.png');
    let o = {
        img: img,
        x: x,
        y: y,
        HP: HP,
        alive: true,
    };
    o.kill = function() {
        this.alive = false;
        // 根据生命值改变图片?先初始化一个img数组
    };
    o.hit = function() {
        console.log(this.HP);
        this.HP--;
        if (this.HP == 0) {
            this.kill();
        }
    };
    o.collide = function(guaImg) {
        if(!this.alive) return false;
        if(Math.abs(o.x - guaImg.x) < o.img.naturalWidth / 2 + guaImg.img.naturalWidth / 2 &&
            Math.abs(o.y - guaImg.y) < o.img.naturalHeight / 2 + guaImg.img.naturalHeight / 2
        ) {
            return true;
        }
        return false;
    };

    return o;
};
brick.js 
let levels = [
    [
        [100, 50],
    ],
    [
        [0, 50],
        [150, 50, 50],
        [300, 50],
    ],
];


let loadLevel = function(n) {
    // n表示第几关，该函数返回一个砖块数组
    let level = levels[n];
    
    let bricks = [];
    for (let i = 0; i != level.length; ++i) {
        let param = level[i];
        let b = makeBrick(param[0], param[1], param[2] || 1);
        bricks.push(b);
    }    
    
    return bricks;
};
levels.js 
let makeGuaGame = function() {
    let g = {
        actions: {},
        keydowns: {},
        fps: 40,
    };
    g.canvas = document.querySelector("#id-canvas");
    g.context = g.canvas.getContext('2d');

    g.registerAction = function(key, callback) {
        g.actions[key] = callback;
    };

    g.drawImage = function(guaImage) {
        this.context.drawImage(guaImage.img, guaImage.x, guaImage.y);
    };

    window.addEventListener("keydown", event => {
        g.keydowns[event.key] = true;
    });

    window.addEventListener("keyup", event => {
        g.keydowns[event.key] = false;
    });

    let repaintInfinitely = function() { 
        // events
        let keys = Object.keys(g.keydowns);
        for(let i = 0; i != keys.length; ++i) {
            let k = keys[i];
            if(g.keydowns[k] && g.actions[k] != null) {
                g.actions[k]();
            }
        }
        // update 
        g.update();
        // clear
        g.context.clearRect(0, 0, g.canvas.width, g.canvas.height);
        // draw
        g.draw();
        setTimeout(function() {
            repaintInfinitely(); // 递归调用setTimeout
        }, 1000 / g.fps);    
    };
    
    g.begin = function() { // 在一切就绪的时候调用（update和draw定义后）
        repaintInfinitely();    
    };

    return g;
};
guagame.js 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas {
                border: 1px black solid;
            }
        </style>
        <script src="js/utils.js"></script>
        <script src="js/guagame.js"></script>
        <script src="js/paddle.js"></script>
        <script src="js/ball.js"></script>
        <script src="js/brick.js"></script>
        <script src="js/levels.js"></script>
    </head>
    
    <body>
        <canvas id="id-canvas" width="400" height="300"></canvas>
        <p>fps:<input id="id-input-speed" type="range" /></p>
        <script>    
            let pause = false;
            let enableDebugMode = function(game, enable) {
                if (!enable) {
                    return;
                }
                window.addEventListener("keydown", event => {
                    if (event.key == 'p') {
                        pause = !pause;
                    }
                });
                document.querySelector("#id-input-speed").addEventListener("input", event => {
                    let newFps = Number(event.target.value);
                    game.fps = newFps;
                });
            };
            
            let __main = function() {                
                let game = makeGuaGame();
                enableDebugMode(game, true);
                
                let paddle = makePaddle();                
                let ball = makeBall();                
                let bricks = loadLevel(1);
                
                game.registerAction('a', function() {
                    paddle.moveLeft();
                });            
                game.registerAction('d', function() {
                    paddle.moveRight();    
                });
                game.registerAction('f', function() {
                    ball.fire();    
                });
                        
                game.update = function() {    
                    if (pause) { // 暂停球的移动
                        return;
                    }    
                    
                    ball.move();
                    if (paddle.collide(ball)) {
                        ball.反弹();
                    }
                    for (let i = 0; i != bricks.length; ++i) {
                        if (bricks[i].collide(ball)) {
                            bricks[i].hit();
                            ball.反弹();
                        }
                    }
                };
                
                game.draw = function() {
                    game.drawImage(paddle);    
                    game.drawImage(ball);    
                    for (let i = 0; i != bricks.length; ++i) {
                        if (bricks[i].alive) {
                            game.drawImage(bricks[i]);    
                        }    
                    }
                };        
                
                game.begin();
            };            
            
            __main();
        </script>
    </body>
</html>
index.html

 

 截屏留念，这是一个血很厚的砖块。。

猜你喜欢

转载自www.cnblogs.com/xkxf/p/9832699.html
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022