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

代码语言：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(){

	}



	// 主程序调用 生成精灵
	generateSprite(){
		if(this.spriteList.length<5){
			if(Math.random()*100<=2){
				let typeBase = Math.random()*10;
				const left = Math.random()*this.bgWidth;
				const id = this.spriteList.length;
				const type = typeBase > 5 ? 0 : 1; 
				const sprite = new Sprite(left,type,id);
				this.spriteList.push(sprite);
			}
		}
	}


	//绘制背景
	drawBg(){
		const _this = this;
		this.bg = new Image();
		this.bg.setAttribute('crossOrigin', 'Anonymous');
		this.bg.onload = function(){
			_this.ctx.drawImage(_this.bg,0,0,_this.bgWidth,_this.bgHeight)
		}
		this.bg.src="//repo.bfw.wiki/bfwrepo/image/6297fad316ce8.png";
	}
	// 背景自动滚动
	// 视差滚动法则
	rollBg(){
		if(this.bgPosition>=this.bgHeight){
			this.bgReset = 0;
		}
		this.bgPosition = ++this.bgReset*this.bgMoveSpeed;
		this.ctx.drawImage(this.bg,0,this.bgPosition-this.bgHeight,this.bgWidth,this.bgHeight);
		this.ctx.drawImage(this.bg,0,this.bgPosition,this.bgWidth,this.bgHeight);
	}
}


class ImageManage{

		constructor(){
			this.imgArray = [];
		}
		createImage (src){
			return typeof this.imgArray[src] != 'undefined' ? this.imgArray[src] : (this.imgArray[src] = new Image(), this.imgArray[src].src .........完整代码请登录后点击上方下载按钮下载查看