canvas实现端午节接粽子小游戏代码-html代码-BFW代码库

canvas实现端午节接粽子小游戏代码

代码语言：html

所属分类：游戏

代码描述：canvas实现端午节接粽子小游戏代码，移动小女孩接天上掉下的粽子，不能接到鞭炮。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
   <style>
       .canvas{
	border:1px solid #ccc;
}
   </style>
</head>

<body>

    <canvas id="canvas" class="canvas" width="320" height="568"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zepto.1.2.0.js"></script>
    <script >

// 主程序，场景类
class Main {

	constructor(){
		this.bgWidth = 320;
		this.bgHeight = 963;
		this.bgPosition = 0;
		this.bgReset = 0;
		this.bgMoveSpeed = 1;
		this.spriteList = []; //负责存储精灵对象
		this.init();
	}

	init(){
		const _this = this;
		const canvas = document.querySelector("#canvas");
		this.ctx = canvas.getContext("2d");
		this.girl = new Girl(this.ctx)
		this.drawBg();
		this.start();

	}

	// 开始游戏
	start(){
		const _this = this;
		
		// _this.rollBg()
		//  new Girl(_this.ctx);//绘制女孩
		//  _this.generateSprite();//生成精灵
		// //绘制精灵
		// for(let i =0;i<_this.spriteList.length;i++){
		// 	if(_this.spriteList[i]){
		// 		_this.spriteList[i].drawSprite(_this.ctx);
		// 		_this.spriteList[i].down(_this.ctx,_this.spriteList);

		// 	}
		// }
		
			_this.ctx.clearRect(0, 0, _this.bgWidth, _this.bgHeight);
			_this.rollBg()
	
			_this.girl.init();
			
			 _this.generateSprite();//生成精灵
			//绘制精灵
			for(let i =0;i<_this.spriteList.length;i++){
				if(_this.spriteList[i]){
					_this.spriteList[i].drawSprite(_this.ctx);
					_this.spriteList[i].down(_this.ctx,_this.spriteList);
				}
				
			}
			_this.girl.eatFood(_this.spriteList)
		 requestAnimationFrame(_this.start.bind(_this))



		// const girl = new Girl(_this.ctx);//绘制女孩
		
		// this.timer= setInterval(function(){
		
		// 	_this.ctx.clearRect(0, 0, _this.bgWidth, _this.bgHeight);
		// 	_this.rollBg()
	
		// 	girl.init();
			
		// 	 _this.generateSprite();//生成精灵
		// 	//绘制精灵
		// 	for(let i =0;i<_this.spriteList.length;i++){
		// 		if(_this.spriteList[i]){
		// 			_this.spriteList[i].drawSprite(_this.ctx);
		// 			_this.spriteList[i].down(_this.ctx,_this.spriteList);
		// 		}
				
		// 	}
		// 	girl.eatFood(_this.spriteList);
		// },Math.round(1000/60));



	}

	// 结束游戏
	stop(){
		clearInterval(this.timer)
	}

	//重新开始游戏
	reset(){

	}
.........完整代码请登录后点击上方下载按钮下载查看