Simple Canvas Game

啦啦啦我的第一个h5小游戏：抓怪兽，查看原教程
点击打开[参考教程]

目录

1.界面

2. JS代码实现思路

A.create the canvas

B.background/hero/monster image

background

hero

monster

C.Game Objects

hero

monster

monsterCaught

D.Player Input

E.New Game

F.Update

G.Draw everything

H.main game loop

I.cross-browser support for requestAnimationFrame

J.Start Game!!!

---

 

1.界面

有三个部分都是png形式图片
    background:
    hero:
    monster:

2. JS代码实现思路

 

A.create the canvas

//create the canvas
	var canvas=document.createElement("canvas");
	var ctx=canvas.getContext("2d");
	canvas.width=512;
	canvas.height=480;
    document.body.appendChild(canvas);

B.background/hero/monster image

background

//background image
	var bgReady=false;
	var bgImage=new Image();
	bgImage.onload=function(){
		bgReady=true;
		console.log("bg is ready");
	};
	bgImage.src="images/background.png";

hero

//hero
	var heroReady=false;
	var heroImage=new Image();
	heroImage.onload=function(){
		heroReady=true;
		console.log("hero is ready");
	};
	heroImage.src="images/hero.png";

monster

var monsterReady=false;
	var monsterImage=new Image();
	monsterImage.onload=function(){
		monsterReady=true;
		console.log("monster is ready");
	};
	monsterImage.src="images/monster.png";

C.Game Objects

hero

var hero={
		speed:256,
		x:0,
		y:0
	};

monster

var monster={
		x:0,
		y:0
	};

monsterCaught

//存储玩家捕获的怪物数量。
	var monsterCaught=0;

D.Player Input

//handle keyboard controls
	// 将用户输入存储起来，希望我们的游戏逻辑只能在一个地方生活，以保持对事情发生的时间和情况的严格控制。
	// keysDown存储任何事件的变量keyCode
	var keysDown={};
	addEventListener("keydown",function(e){
		keysDown[e.keyCode]=true;
	},false);

	addEventListener("keyup",function(e){
		delete keysDown[e.keyCode];
	},false);

E.New Game

var reset=function(){
		hero.x=canvas.width/2;
		hero.y=canvas.height/2;

	//throw the monster somewhere on the screen randomly

	monster.x=32+(Math.random()*canvas.width-64);
	monster.y=32+(Math.random()*canvas.height-64);
};

F.Update

var update=function(modifier){
	if(38 in keysDown){//player holding up
		hero.y-=hero.speed*modifier;
	}
	if(40 in keysDown){//player holding down
		hero.y+=hero.speed*modifier;
	}
	if(37 in keysDown){//player holding left
		hero.x-=hero.speed*modifier;
	}
	if(39 in keysDown){//player holding right
		hero.x+=hero.speed*modifier;
	}

	//are they touching?
	// modifier是基于1的基于时间的数字
	if(
		hero.x<=(monster.x+32)
		&&monster.x<=(hero.x+32)
		&&hero.y<=(monster.y+32)
		&&monster.y<=(hero.y+32)
		){
		++monsterCaught;
	reset(); 
}

};

G.Draw everything

var render=function(){
	if(bgReady){
		ctx.drawImage(bgImage,0,0);
	}
	if(heroReady){
		ctx.drawImage(heroImage,hero.x,hero.y);
	}
	if(monsterReady){
		ctx.drawImage(monsterImage,monster.x,monster.y);
	}
	//score
	ctx.fillStyle="rgb(250,250,250)";
	ctx.font="24px Helvetica";
	ctx.textAlign="left";
	ctx.textBaseLine="top";
	ctx.fillText("Monsters caught:"+monsterCaught,32,32);
}

H.main game loop

var main=function(){
	var now =Date.now();
	var delta=now-then;
	update(delta/1000);
	render();
	then=now;
	//request to do this again ASAP
	requestAnimationFrame(main);
}

I.cross-browser support for requestAnimationFrame

var w=window;
requestAnimationFrame = w.requestAnimationFrame ||
                        w.webkitRequestAnimationFrame ||
                        w.msRequestAnimationFrame || 
                        w.mozRequestAnimationFrame;

J.Start Game!!!

var then=Date.now();
reset();
main();