前端实战小案例--canvas实战之FlappyBird小游戏

最新推荐文章于 2023-06-01 23:53:57 发布
最新推荐文章于 2023-06-01 23:53:57 发布
阅读量1k 收藏 16
点赞数
分类专栏： 前端实战案例 文章标签： FlappyBird 前端实战 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16687863/article/details/102926284
版权

前端实战小案例--canvas实战之FlappyBird小游戏

想练习更多前端案例，请进个人主页，点击前端实战案例->传送门

觉得不错的记得点个赞?支持一下我0.0！谢谢了！

不积跬步无以至千里，不积小流无以成江海。

效果图如下：(由于图片有大小限制，所以录制的是10帧，有点卡顿的感觉，实际是很流畅的)

素材如下：

 

文件结构目录如下：

代码如下：

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title>FlappyBird</title>
		<link rel="stylesheet" href="./css/index.css" />
	</head>
	<body>
		<canvas>
			<span>您的浏览器不支持画布元素，请使用谷歌浏览器</span>
		</canvas>
	</body>
	<script src="./js/Game.js"></script>
	<script src="./js/Background.js"></script>
	<script src="./js/Land.js"></script>
    <script src="./js/Pipe.js"></script>
    <script src="./js/Bird.js"></script>
	<script src="./js/SceneManager.js"></script>
	<script>
		var game = new Game();
	</script>
</html>

index.css

*{
	margin: 0;
	padding: 0;
}

canvas{
	display: block;
	margin: 0 auto;
}

resource.json

[
	{
		"imgs":[
			{"name":"Back1", "url":"./resource/images/Back1.png"},
			{"name":"Bird", "url":"./resource/images/Bird.png"},
			{"name":"Flash", "url":"./resource/images/Flash.png"},
			{"name":"Logo", "url":"./resource/images/Logo.png"},
			{"name":"Number", "url":"./resource/images/Number.png"},
			{"name":"Land2", "url":"./resource/images/Road2.png"},
            {"name":"Pipe1", "url":"./resource/images/Pipe1.png"},
            {"name":"Pipe2", "url":"./resource/images/Pipe2.png"},
			{"name":"Bomb", "url":"./resource/images/Bomb.png"}
		]
	}
]

Background.js

//背景类
(function () {
    var Background = window.Background = function () {
        this.image = game.imgArr["Back1"];
        this.speed = 0;
    };
    Background.prototype.render = function () {
        game.ctx.clearRect(0,0,game.canvas.width,game.canvas.height);
        game.ctx.drawImage(this.image,this.speed,game.canvas.height*0.618-this.image.height*0.618);
        game.ctx.drawImage(this.image,this.image.width+this.speed,game.canvas.height*0.618-this.image.height*0.618);
        game.ctx.drawImage(this.image,this.image.width*2+this.speed,game.canvas.height*0.618-this.image.height*0.618);
        game.ctx.save();
        game.ctx.fillStyle = "#4EC0CA";
        game.ctx.beginPath();
        game.ctx.fillRect(0,0,game.canvas.width,game.canvas.height*0.618-this.image.height*0.618+10);
        game.ctx.restore();
        game.ctx.save();
        game.ctx.fillStyle = "#DED895";
        game.ctx.beginPath();
        game.ctx.fillRect(0,game.canvas.height*0.618+this.image.height*(1-0.618)-10,game.canvas.width,game.canvas.height*(1-0.618)-this.image.height*(1-0.618)+10);
        game.ctx.restore();
    };
    Background.prototype.update = function () {
        this.speed--;
        if(-this.speed === this.image.width){
            this.speed = 0;
        }
    }
})();

Bird.js

(function () {
    var Bird = window.Bird = function () {
        this.image = game.imgArr["Bird"];
        this.x = game.canvas.width*(1-0.618);
        this.y = game.canvas.height*0.618*(1-0.618);
        //小鸟旋转的角度
        this.deg = 0;
        //小鸟是否在飞
        this.isFly = false;
        //帧数
        this.fno = 0;
        //鸟的颜色
        this.birdColor = 24*parseInt(Math.random()*3);
        //鸟扇动翅膀的图片的编号
        this.wingNo = 0;
        //下面的四个变量用于碰撞检测,代表鸟的上下左右的最小矩形框
        this.L = this.R = this.T = this.B = 0;
        //该变量用于保存鸟是否为死亡状态
        this.isDie = false;
    };
    Bird.prototype.render = function () {
        game.ctx.save();
        game.ctx.translate(this.x,this.y);
        game.ctx.rotate(this.deg);
        game.ctx.beginPath();
        game.ctx.drawImage(this.image,34*this.wingNo,this.birdColor,34,24,-17,-12,34,24);
        game.ctx.restore();
        // game.ctx.fillRect(this.L,this.T,34,24);

    };
    Bird.prototype.update = function () {
        this.L = this.x-17;
        this.R = this.x + 17;
        this.T = this.y-12;
        this.B = this.y + 12;

        //判断鸟是否飞出天空，真则不让飞出,
        if(this.T < 0){
            //这里不能使用this.T = 0;因为
            //game.ctx.drawImage(this.image,34*this.wingNo,this.birdColor,34,24,-17,-12,34,24);
            //game.ctx.translate(this.x,this.y);这里是根据x,y来绘制鸟的，固定T鸟还是飞出屏幕
            this.y = 12;
        }
        if(this.isFly){
            //这里为扇动翅膀动画
            if(this.fno%2 === 0){
                this.wingNo++;
            }
            if(this.wingNo > 2){
                this.wingNo = 0;
            }
            //当有点击事件时，鸟儿向上飞一段距离
            this.y -= 0.4 * (20-this.fno);
            if(this.fno === 20){
                this.fno = 0;
                this.isFly = false;
            }
            this.deg -= (Math.PI/180)*6;
            if(this.deg < -(Math.PI/180)*45){
                this.deg = -(Math.PI/180)*45;
            }
        }else{
            this.y += 0.4 * this.fno;
            this.deg += (Math.PI/180)*3;
            if(this.deg > (Math.PI/180)*90){
                this.deg = (Math.PI/180)*90;
            }
        }
        this.fno++;
    };
    Bird.prototype.fly = function () {
        this.fno = 0;
        this.isFly = true;
    }
})();

Game.js

(function(){
	var Game = window.Game = function(){
		this.canvas = document.querySelector("canvas");
		this.canvas.width = document.documentElement.clientWidth;
		this.canvas.height = document.documentElement.clientHeight;
        this.init();
        this.ctx = this.canvas.getContext('2d');
        //这是图片字典
		this.imgArr = {};
		//这是管子数组
        this.pipeArr = [];
        //游戏分数：即通过的管子数
        this.score = 0;

        //记录过多少时间new一个管子
        this.time_count = 0;

        //这里也需要使用箭头函数，否则this指向window而不是window.Game
		this.loadResource(()=>{
		    this.startGame();
        });
	};

	//初始化画布宽高，适配移动端不同机型
	Game.prototype.init =  function(){
		if(this.canvas.width < 320){
			this.canvas.width = 320;
		}else if(this.canvas.width > 414){
			this.canvas.width = 414;
		}
		if(this.canvas.height < 568){
			this.canvas.height = 568;
		}else if(this.canvas.height > 823){
			this.canvas.height = 823;
		}
	};

	//加载资源
	Game.prototype.loadResource = function(callback){
		//定义已加载的资源数
		var resource_count = 0;
		var xhr = new XMLHttpRequest();
		//这里需使用箭头函数，否则将出现this指向错误，
		xhr.onreadystatechange = ()=>{
		    //此时的this指向window.Game
			if(xhr.readyState === 4 && xhr.status === 200){
				var obj = JSON.parse(xhr.responseText);
				for(let i=0;i<obj[0]["imgs"].length;i++){
                    this.imgArr[obj[0]["imgs"][i].name] = new Image();
                    this.imgArr[obj[0]["imgs"][i].name].src = obj[0]["imgs"][i].url;
                    this.imgArr[obj[0]["imgs"][i].name].onload = ()=> {
                        resource_count++;
                        this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
                        this.ctx.save();
                        let text = "正在加载资源"+ resource_count +"/"+obj[0]["imgs"].length;
                        this.ctx.textAlign = "center";
                        this.ctx.font = "20px 微软雅黑";
                        this.ctx.beginPath();
                        this.ctx.fillText(text,this.canvas.width/2,this.canvas.height*(1-0.618));
                        this.ctx.restore();
                        //当加载图片的数量等于图片资源的数量时，说明图片资源加载完毕，执行回调函数
                        if(resource_count === obj[0]["imgs"].length){
                            callback();
                        }
                    }
				}
			}
		};
		xhr.open('GET',"./resource.json");
		xhr.send();
	};

    //主线程：游戏开始
    Game.prototype.startGame = function () {
        //实例化场景管理器
        this.sm = new SceneManager();

        this.timer = setInterval(()=>{
            this.time_count += 20;

            this.sm.render();
            this.sm.update();
        },20)
    };
})();

Land.js

//大地类
(function () {
    var Land = window.Land = function () {
        this.image = game.imgArr["Land2"];
        this.speed = 0;
    };

    Land.prototype.render =  function () {
        game.ctx.drawImage(this.image,this.speed,game.canvas.height*0.618+99);
        game.ctx.drawImage(this.image,this.image.width+this.speed,game.canvas.height*0.618+99);
    };

    Land.prototype.update =  function () {
        //每次更新判断鸟是否着地，着地则结束游戏
        if(game.bird.B > game.canvas.height*0.618+80){
            game.bird.isDie = true;
        }
        //近处的物体速度快，故大地的速度比远处的树林和白云快
        this.speed-=2;

        if(-this.speed > 640){
            this.speed = 0;
        }
    }
})();

Pipe.js

(function () {
    var Pipe = window.Pipe = function () {
        this.Pipe1 = game.imgArr["Pipe1"];
        this.Pipe2 = game.imgArr["Pipe2"];
        this.height = game.canvas.height*0.618+99;
        //两个管子之间的空隙高度
        this.interspace = 150;
        //上面的管子随机高度
        this.randomHeight = 140 + parseInt(Math.random()*180);
        //下面的管子的高度等于this.height-this.randomHeight-this.interspace
        this.Pipe2_height = this.height-this.randomHeight-this.interspace;
        this.speed = 0;
        //该变量用于碰撞检测
        this.L = 0;
        //该变量用于判断鸟是否已经通过管子，防止重复加分
        this.alreadyPass = false;
        //将自己推入数组
        game.pipeArr.push(this);
    };

    Pipe.prototype.render = function () {
        this.L = game.canvas.width+10+this.speed;
        //当下面的管子高度小于40时，重新取值
        while (this.Pipe2_height < 40){
            this.randomHeight = 140 + parseInt(Math.random()*180);
            this.Pipe2_height = this.height-this.randomHeight-this.interspace;
        }
        game.ctx.drawImage(this.Pipe1, 0, this.Pipe1.height-this.randomHeight, 52, this.randomHeight, this.L, 0, 52, this.randomHeight);
        game.ctx.drawImage(this.Pipe2, 0, 0, 52, this.Pipe2_height, this.L,  this.randomHeight+this.interspace, 52, this.Pipe2_height);
    };

    Pipe.prototype.update = function () {

        //每次更新判断管子是否碰到鸟clearInterval(game.timer)
        if(this.L < game.bird.R && this.L+52 > game.bird.L){
            if(this.randomHeight > game.bird.T || this.randomHeight + this.interspace < game.bird.B){
                game.bird.isDie = true;
            }
        }
        this.speed -= 2;
        //判断鸟是否通过管子，真则加分
        if(game.bird.L > game.canvas.width+this.speed+52 && !this.alreadyPass){
            game.score++;
            this.alreadyPass = true;
        }

        //当管子移出画布时，将其从数组中移除
        if(-this.speed > game.canvas.width + 60){
            game.pipeArr.shift();
            this.speed = 0;
        }
    }
})();

SceneManager.js

(function () {
    var sm = window.SceneManager = function () {
        //sm的场景编号
        this.sceneNo = 1;
        //实例化背景
        game.bg = new Background();
        //实例化大地
        game.land = new Land();
        //实例化鸟
        game.bird = new Bird();
        //Flash和Logo图片的Y值
        this.FlashY = 0;
        this.LogoY = game.canvas.height;
        this.bindEvent();
        //这两个参数用于控制爆炸效果
        this.i = 0;
        this.j = 0;
        //这个参数用于控制鸟死亡下落的重力
        this.g = 1;
    };
    sm.prototype.update = function () {
        switch (this.sceneNo) {
            case 1:
                this.FlashY += 4;
                this.LogoY -= 4;
                if(this.FlashY > game.canvas.height * (1-0.618)){
                    this.FlashY = game.canvas.height * (1-0.618);
                }
                if(this.LogoY < game.canvas.height * (1-0.618)+100){
                    this.LogoY = game.canvas.height * (1-0.618)+100
                }
                break;
            case 2:
                //判断鸟是否死亡，真则切换到场景3
                if(game.bird.isDie){
                    this.enter(3)
                }
                break;
            case 3:
                this.g ++;
                if(game.bird.y < game.canvas.height*0.618+99){
                    game.bird.y += 0.4 * this.g;
                }else{
                    this.enter(4);
                }
                break;
            case 4:
                if(game.time_count%100 === 0){
                    this.i++;
                    if(this.i > 3 && this.j === 0){
                        this.i = 0;
                        this.j = 1;
                    }else if(this.i > 3 && this.j === 1){
                        this.i = 3;
                        this.j = 1;
                        this.enter(5);
                    }
                }
                break;
            case 5:
                this.FlashY += 4;
                if(this.FlashY > game.canvas.height * (1-0.618)){
                    this.FlashY = game.canvas.height * (1-0.618);
                }
                break;
        }
    };
    sm.prototype.render = function () {
        //清屏
        game.ctx.clearRect(0,0,game.canvas.width,game.canvas.height);
        switch (this.sceneNo) {
            case 1:
                //场景1：游戏开始界面
                game.bg.render();
                game.land.render();
                game.bg.update();
                game.land.update();
                game.ctx.drawImage(game.imgArr["Flash"],0,0,204,69,game.canvas.width / 2 - 102,this.FlashY,204,69);
                game.ctx.drawImage(game.imgArr["Logo"],game.canvas.width / 2 - 160,this.LogoY);
                break;
            case 2:
                //场景2：游戏开始
                //每隔两秒new一个管子
                if(game.time_count > 2000){
                    game.time_count = 0;
                    new Pipe();
                }

                game.bg.render();
                game.land.render();
                game.bg.update();
                game.land.update();

                //遍历管子数组，更新并渲染
                for (let i=0;i<game.pipeArr.length;i++){
                    game.pipeArr[i].update();
                    game.pipeArr[i].render();
                }
                game.bird.update();
                game.bird.render();

                //绘制游戏分数
                game.ctx.save();
                game.ctx.font = "26px 微软雅黑";
                game.ctx.textBaseline = "top";
                game.ctx.beginPath();
                game.ctx.fillText("分数：",0,15);
                game.ctx.restore();
                var number = game.score.toString();
                for(let i=0; i<number.length; i++){
                    game.ctx.drawImage(game.imgArr["Number"],28*parseInt(number[i]),0,28,36,28*i+75,10,28,36);
                }
                break;
            case 3:
                //场景3：小鸟撞地死亡
                //每隔两秒new一个管子
                if(game.time_count === 2000){
                    game.time_count = 0;
                    new Pipe();
                }

                game.bg.render();
                game.land.render();

                //遍历管子数组，更新并渲染
                for (let i=0;i<game.pipeArr.length;i++){
                    game.pipeArr[i].render();
                }
                game.bird.render();

                //绘制游戏分数
                game.ctx.save();
                game.ctx.font = "26px 微软雅黑";
                game.ctx.textBaseline = "top";
                game.ctx.beginPath();
                game.ctx.fillText("分数：",0,15);
                game.ctx.restore();
                var number = game.score.toString();
                for(let i=0; i<number.length; i++){
                    game.ctx.drawImage(game.imgArr["Number"],28*parseInt(number[i]),0,28,36,28*i+75,10,28,36);
                }
                break;
            case 4:
                //游戏结束：鸟撞管子死亡动画
                //每隔两秒new一个管子
                if(game.time_count === 2000){
                    game.time_count = 0;
                    new Pipe();
                }

                game.bg.render();
                game.land.render();

                //遍历管子数组，更新并渲染
                for (let i=0;i<game.pipeArr.length;i++){
                    game.pipeArr[i].render();
                }

                //绘制游戏分数
                game.ctx.save();
                game.ctx.font = "26px 微软雅黑";
                game.ctx.textBaseline = "top";
                game.ctx.beginPath();
                game.ctx.fillText("分数：",0,15);
                game.ctx.restore();
                var number = game.score.toString();
                for(let i=0; i<number.length; i++){
                    game.ctx.drawImage(game.imgArr["Number"],28*parseInt(number[i]),0,28,36,28*i+75,10,28,36);
                }
                //当鸟的y值大于地面的高度，则产生爆炸效果
                if(game.bird.y > game.canvas.height*0.618+99){
                    game.ctx.drawImage(game.imgArr["Bomb"],128*this.i,128*this.j,128,128,game.bird.x-34,game.bird.y-34,34*2,34*2);
                }
                break;
            case 5:
                //游戏结束：GameOver
                if(game.time_count === 2000){
                    game.time_count = 0;
                    new Pipe();
                }

                game.bg.render();
                game.land.render();

                //遍历管子数组，更新并渲染
                for (let i=0;i<game.pipeArr.length;i++){
                    game.pipeArr[i].render();
                }

                //绘制游戏分数
                game.ctx.save();
                game.ctx.font = "26px 微软雅黑";
                game.ctx.textBaseline = "top";
                game.ctx.beginPath();
                game.ctx.fillText("分数：",0,15);
                game.ctx.restore();
                var number = game.score.toString();
                for(let i=0; i<number.length; i++){
                    game.ctx.drawImage(game.imgArr["Number"],28*parseInt(number[i]),0,28,36,28*i+75,10,28,36);
                }
                //GameOver图标往下移动到屏幕中间
                game.ctx.drawImage(game.imgArr["Flash"],204,0,204,69,game.canvas.width / 2 - 102,this.FlashY,204,69);

        }
    };
    //进入某个场景时需要做的操作
    sm.prototype.enter = function (sceneNo) {
        switch (sceneNo) {
            case 1:
                this.sceneNo = 1;
                this.FlashY = 0;
                this.LogoY = game.canvas.height;
                game.bird = new Bird();
                //实例化背景
                game.bg = new Background();
                //实例化大地
                game.land = new Land();
                game.pipeArr = [];
                game.time_count = 0;
                game.score = 0;
                //这两个参数用于控制爆炸效果
                this.i = 0;
                this.j = 0;
                //这个参数用于控制鸟死亡下落的重力
                this.g = 1;
                break;
            case 2:
                this.sceneNo = 2;
                //sm的场景编号
                break;
            case 3:
                this.sceneNo = 3;
                break;
            case 4:
                this.sceneNo = 4;
                break;
            case 5:
                this.sceneNo = 5;
                this.FlashY = 0;
                break;
        }
    };
    //
    sm.prototype.bindEvent = function () {
        //当点击canvas时，通过判断在哪个场景的哪个位置来做出相应的事件
        game.canvas.onclick =  () => {
            switch (this.sceneNo) {
                case 1:
                    game.bird.isDie = false;
                    game.bird.x = game.canvas.width*(1-0.618);
                    game.bird.y = game.canvas.height*0.618*(1-0.618);
                    this.enter(2);
                    break;
                case 2:
                    game.bird.fly();
                    break;
                case 3:
                    break;
                case 4:
                    break;
                case 5:
                    this.enter(1);
                    break;
            }
        }
    }
})();

 

朽木自雕xmzd
关注
  • 0
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas-flappybird
01-15
使用canvas制作的游戏 ，flappybird，里面图形资源齐全。
微信小程序-FlappyBird
04-27
微信小程序的canvas简单应用。 我本人不喜欢下载需要资源分的，但是手头分数不够我下载别的（3个资源要18分下载），我凑合一下把我前几天的微信小程序调查小东西分享出来（赚分），希望大家有兴趣的不吝赐分。。谢谢
H5 的canvas小游戏实例
01-07
html5 开发技术 游戏.很好玩的html5+canvas技术实现的拼图游戏
微信小程序之Canvas--玩坏FlappyBird
03-29
说点：小程序平台，玩过五子棋，玩过贪吃蛇， 你玩过FlappyBird吗？  效果图： (此图片来源于网络，如有侵权，请联系删除! )   实现细节：   JS逻辑: 主要包括 小鸟下降逻辑、随机空隙管道逻辑、 单机屏幕事件、碰撞事件、计数逻辑 小鸟下降：   birdDown:function(){   ctx.clearRect(0, 0, res.windowWidth, res.windowHeight)   bird.y += bird.factor   ctx.drawImage(birds[Math.floor(Math.random()*2)], bird.x, bird.y,
flappy-bird:of用Javascript和HTML Canvas制作的著名游戏《 Flappy Bird》的副本
05-12
:bird: 飞扬的鸟 用Javascript和Canvas编写的著名游戏的副本。 :party_popper: 贡献 :hammer_and_wrench: 使用的技术 HTML 画布API Java脚本 :male_sign:‍:male_sign: 怎么跑 # Clone repository $ git clone https://github.com/r3nanp/flappy-bird.git # Run in your browser: Open the index.html file in your browser. :camera_with_flash: 截屏 :link: 关联
前端小项目-Flappy Bird(像素鸟)-html+css+js 含视频课程+全套代码
robertzsun
04-07 777
项目完成后效果： 项目视频链接：https://pan.baidu.com/s/1K8SmL4CcgsjlrQyurkmEIg 提取码：95ef 项目源码： 链接：https://pan.baidu.com/s/1ipEXPPWUT6iqtZB81rkljg 提取码：p5ev 自己修改调整过后的代码（增加了左上角的分数线是，游戏结束时的分数牌外加再来一次的button按钮）： https://g...
为了让你们进阶 Canvas，我花 7 小时写了 3 个有趣的小游戏！！！
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
08-05 3781
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群前言大家好，我是林三心，相信大家看了我前一篇canvas入门文章为了让她10分钟入门canvas，我熬夜写了3个小项...
六一，用前端做个小游戏回味童年
黛琳ghz的博客，期待你的关注。
06-01 2900
六一儿童节。这是属于孩子们的节日，也是属于我们大人的节日（过期儿童）。在这个六一儿童节，一起「致童真」，用你手上的代码创造出童话王国，让这个世界多一份快乐和惊喜！ 趁着六一儿童节CSDN的创作活动，接下来通过前端技术做个小游戏回味童年。
纯前端的趣味小游戏
一起学习一起进步~
05-14 516
1、点击play后，游戏会提供4中不同的昆虫供玩家进行选择，这四种昆虫分别为：蟑螂、蛛蛛、蚊子和苍蝇。3、游戏会随机的生成玩家选择的昆虫到电脑屏幕，玩家利用鼠标点击到则得一分。4、游戏开始时屏幕上显示一只昆虫，随后逐渐增多，同时记录玩家游戏时长。今天搬了一天的家，状态不是很好，分享一个小游戏给大家吧~2、当玩家选择完昆虫后，游戏开始。5、一段时间后，弹出小惊喜给玩家。最后，祝大家玩的愉快~
JS写小游戏「跳一跳」外挂之Canvas图像识别
weixin_34218579的博客
07-12 1473
17年结尾的时候微信发布新版重点推出了「小游戏」概念，H5的游戏再次火了起来，新版微信开屏的游戏就是「跳一跳」游戏可玩度很高，网上也出现了各种语言版本的外挂，前几天看到一篇用nodejs搭建的外挂，需要手动点击截屏图片来判断当前和下一步的位置然后跳转，于是就起了用Canvas来实现图像的想法，后面有实现了自动跳转，算是齐活了。今天来完整说下图像识别。 代...
微信小程序源码 小程序完整demo：飞翔的小鸟：canvas实现，java后端(适用1221)（源码+截图）.rar
04-10
免责声明：资料部分来源于合法的互联网渠道收集和整理，部分自己学习积累成果，供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方，资料版权归原作者或出版方所有，本人不对所涉及的版权问题或内容负法律责任。如有侵权，请举报或通知本人删除。
HTML5-Canvas刀枪不入躲避小游戏代码.zip
07-11
代码片段：  <li>1. 避免红点。</li>     <li>2. 触摸绿色点刀枪不入。</li>     <li>3. 停留在中心, 不要接触侧面</li>     <li>4. 使用不易破坏的红点。</li>     <li>5. 通过到处移动来获得额外的分数。</li>     <li>6. 活下去</li>
前端-小程序echart-小程序echart可视化
最新发布
12-26
ec-canvas组件主要是用于小程序中进行数据的可视化，例如将枯燥的数据可视化为雷达图，历年数据可视化为折线变化图等，该组件主要是帮助前端开发人员，尤其是常使用小程序的前端小伙伴使用直观的图形动态渲染数据。
小程序完整demo：飞翔的小鸟：canvas实现&java后端
03-20
设计好的素材样例，配好后端即可使用，适合刚入手小程序开发的
FlappyBird（前端canvas制作）
02-08
原生js操作canvas制作的h5小游戏
canvas制作小游戏（欢乐的小鸟）
learning_endless的博客
09-23 2437
使用js画布制作小游戏，分为bird、sky、land、pipes、game和渲染页面index模块。
canvas 制作flappy bird（像素小鸟）全流程
Zzexi的博客
09-14 1449
flappy bird制作全流程： 一、前言 像素小鸟这个简单的游戏于2014年在网络上爆红，游戏上线一段时间内appleStore上的下载量一度达到5000万次，风靡一时， 近年来移动web的普及为这样没有复杂逻辑和精致动画效果，但是趣味十足的小游戏提供了良好的环境， 同时借助各大社交软件平台的传播效应，创意不断的小游戏有着良好的营销效果，得到了很多的关注。 此前在网上查询了很多关于这个小游戏...
仿写“跳一跳”微信小游戏
GitChat
04-12 5769
课程简介 2017-12-28 下午，微信发布最新版本，蓄势已久的“微信小游戏”终于来了。在 2018 微信公开课 Pro 上，微信游戏产品总监孙春光指出，小游戏的累计用户达到了 3.1 亿（微信日活超过 9 亿）。 孙春光表示，2017 年移动游戏的自然人有 4 亿多，他们用 20 天就达到了这样一个数据。 作为微信小游戏的入门教程，此达人课共计10篇文章，带你一步一步实战仿写微信“跳一跳”小游...
Canvas 从 0 到 1 -- 开发 2D 游戏《保卫家园》-- 【上篇】
世界和我们都不该止步于此
08-18 2406
Canvas 是 HTML5 提供的一种新的标签形式 - 画布标签通过名字就不难理解这个标签的意思，就和一张白纸一样，我们想呈现什么样的画面都可以（前提你需要一根画笔 – JavaScript）Canvas 是一个矩形画布，可以使用 JavaScript 在画布上进行作画，控制每一个像素，也就是说他本身不具备绘画功能，是需要 JavaScript 来进行作画的，Canvas 非常的丰富多彩，拥有多种的绘制路径，矩形，图形，字符，图像等等方法，使得 Web 网页更加的美丽。...
小程序wxml-to-canvas
09-02
您好！对于将小程序的 WXML 转换为 Canvas，您可以使用 `wx.createCanvasContext` 方法来创建一个 Canvas 对象，并利用其提供的绘图 API 进行绘制。下面是一个简单的示例： ```javascript // 在页面的 js 文件中 Page({ onReady() { const context = wx.createCanvasContext('myCanvas', this); context.setFillStyle('#ff0000'); context.fillRect(0, 0, 100, 100); context.draw(); } }); ``` ```wxml <!-- 在页面的 wxml 文件中 --> <canvas id="myCanvas" style="width: 100px; height: 100px;"></canvas> ``` 在上面的示例中，我们先在 WXML 中创建了一个 ID 为 `myCanvas` 的 Canvas 元素，并设置其宽度和高度。然后在页面的 JS 文件中，通过 `wx.createCanvasContext` 方法创建了一个 Canvas 上下文对象，并调用其提供的绘图 API 进行绘制。最后通过调用 `context.draw()` 方法将绘制结果显示在 Canvas 上。 当然，这只是一个简单示例，您可以根据实际需求使用其他绘图 API 来进行更复杂的绘制操作。希望能对您有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值