吃豆人小游戏欢迎来到程序小院
玩法：
键盘方向键上键 ↑ 左键 ← 右键 → 下键 ↓控制方向,空格键开始、暂停、继续,经过路线即消除豆子，避开虫子，只有三次生命哦^^
开始游戏
<canvas id="canvas" width="760" height="640"></canvas>
css
canvas{
position: relative;
left: 50%;
transform: translateX(-50%);
display:block;
border: 1px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #fff, #fff),
linear-gradient(120deg, #f7716d, #60C4FD, #EDC951, #7ac630, #f7716d,
#60C4FD, #EDC951, #7ac630,#7ac630, #f7716d, #60C4FD, #EDC951, #7ac630);
}
js
stage.createitem({
x:game.width/2,
y:game.height*.45,
width:100,
height:100,
frames:3,
draw:function(context){
var t = Math.abs(5-this.times);
context.fillStyle = '#f7716d';
context.beginPath();
context.arc(this.x,this.y,this.width/2,t*.04*Math.PI,(2-t*.04)*Math.PI,false);
context.lineTo(this.x,this.y);
context.closePath();
context.fill();
context.fillStyle = '#fff';
context.beginPath();
context.arc(this.x 5,this.y-27,7,0,2*Math.PI,false);
context.closePath();
context.fill();
}
});
//开始
stage.createItem({
x:game.width/2,
y:game.height-10,
draw:function(context){
context.fillStyle = '#eee';
context.font = '15px Helvetica';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText("按【空格】键开始",this.x,this.y);
}
});
//游戏名
stage.createItem({
x:game.width/2,
y:game.height*.6,
draw:function(context){
context.font = 'bold 42px Helvetica';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillStyle = '#f7716d';
context.fillText('吃豆人',this.x,this.y);
}
});
//事件绑定
stage.bind('keydown',function(e){
switch(e.keyCode){
case 13:
case 32:
game.nextStage();
break;
}
});
})();
//游戏主程序
(function(){
var stage,map,beans,player,times;
stage = game.createStage({
update:function(){
var stage = this;
if(stage.status==1){ //场景正常运行
items.forEach(function(item){
if(map&&!map.get(item.coord.x,item.coord.y)&&!map.get(player.coord.x,player.coord.y)){
var dx = item.x-player.x;
var dy = item.y-player.y;
if(dx*dx dy*dy<750&&item.status!=4){ //物体检测
if(item.status==3){
item.status = 4;
_SCORE = 10;
}else{
stage.status = 3;
stage.timeout = 30;
}
}
}
});
if(JSON.stringify(beans.data).indexOf(0)<0){ //当没有物品的时候，进入结束画面
game.nextStage();
}
}else if(stage.status==3){ //场景临时状态
if(!stage.timeout){
_LIFE--;
if(_LIFE){
stage.resetItems();
}else{
game.nextStage();
return false;
}
}
}
}
});
//绘制地图
map = stage.createMap({
x:60,
y:10,
data:_DATA,
cache:true,
draw:function(context){
context.lineWidth = 2;
for(var j=0; j<this.y_length; j ){
for(var i=0; i<this.x_length; i ){
var value = this.get(i,j);
if(value){
var code = [0,0,0,0];
if(this.get(i 1,j)&&!(this.get(i 1,j-1)&&this.get(i 1,j 1)&&this.get(i,j-1)&&this.get(i,j 1))){
code[0]=1;
}
if(this.get(i,j 1)&&!(this.get(i-1,j 1)&&this.get(i 1,j 1)&&this.get(i-1,j)&&this.get(i 1,j))){
code[1]=1;
}
if(this.get(i-1,j)&&!(this.get(i-1,j-1)&&this.get(i-1,j 1)&&this.get(i,j-1)&&this.get(i,j 1))){
code[2]=1;
}
if(this.get(i,j-1)&&!(this.get(i-1,j-1)&&this.get(i 1,j-1)&&this.get(i-1,j)&&this.get(i 1,j))){
code[3]=1;
}
if(code.indexOf(1)>-1){
context.strokeStyle=value==2?"#FFF":"#eee";
var pos = this.coord2position(i,j);
switch(code.join('')){
case '1100':
context.beginPath();
context.arc(pos.x this.size/2,pos.y this.size/2,this.size/2,Math.PI,1.5*Math.PI,false);
context.stroke();
context.closePath();
break;
case '0110':
context.beginPath();
context.arc(pos.x-this.size/2,pos.y this.size/2,this.size/2,1.5*Math.PI,2*Math.PI,false);
context.stroke();
context.closePath();
break;
case '0011':
context.beginPath();
context.arc(pos.x-this.size/2,pos.y-this.size/2,this.size/2,0,.5*Math.PI,false);
context.stroke();
context.closePath();
break;
case '1001':
context.beginPath();
context.arc(pos.x this.size/2,pos.y-this.size/2,this.size/2,.5*Math.PI,1*Math.PI,false);
context.stroke();
context.closePath();
break;
default:
var dist = this.size/2;
code.forEach(function(v,index){
if(v){
context.beginPath();
context.moveTo(pos.x,pos.y);
context.lineTo(pos.x-_COS[index]*dist,pos.y-_SIN[index]*dist);
context.stroke();
context.closePath();
}
});
}
}
}
}
}
}
});
//物品地图
beans = stage.createMap({
x:60,
y:10,
data:_DATA,
frames:8,
draw:function(context){
for(var j=0; j<this.y_length; j ){
for(var i=0; i<this.x_length; i ){
if(!this.get(i,j)){
var pos = this.coord2position(i,j);
context.fillStyle = "#aaa";
if(_GOODS[i ',' j]){
context.beginPath();
context.arc(pos.x,pos.y,3 this.times%2,0,2*Math.PI,true);
context.fill();
context.closePath();
context.fillStyle = '#fff';
context.beginPath();
context.arc(this.x 2,this.y-9,1,1,2*Math.PI,false);
context.closePath();
context.fill();
}else{
context.fillRect(pos.x-2,pos.y-2,4,4);
}
}
}
}
}
});
//得分
stage.createItem({
x:630,
y:50,
draw:function(context){
context.font = 'bold 20px Helvetica';
context.textAlign = 'left';
context.textBaseline = 'bottom';
context.fillStyle = '#4a4a4a';
context.fillText('成绩',this.x,this.y);
context.font = '20px Helvetica';
context.textAlign = 'left';
context.textBaseline = 'bottom';
context.fillStyle = '#f7716d';
context.fillText(_SCORE,this.x 50,this.y);
}
});
//生命值
stage.createItem({
x:700,
y:100,
width:30,
height:30,
draw:function(context){
for(var i=0;i<_LIFE;i ){
var x=this.x 40*i,y=this.y;
context.fillStyle = '#f7716d';
context.beginPath();
context.arc(x,y,this.width/2,.15*Math.PI,-.15*Math.PI,false);
context.lineTo(x,y);
context.closePath();
context.fill();
context.fillStyle = '#fff';
context.beginPath();
context.arc(this.x 2 (i*40),this.y-9,1,1,2*Math.PI,false);
context.closePath();
context.fill();
context.font = 'bold 20px Helvetica';
context.textAlign = 'left';
context.textBaseline = 'bottom';
context.fillStyle = '#4a4a4a';
context.fillText('生命',this.x-70,this.y 10);
}
}
});
//状态文字
stage.createItem({
x:680,
y:420,
frames:25,
draw:function(context){
if(stage.status==2&&this.times%2){
context.font = 'bold 30px Helvetica';
context.textAlign = 'left';
context.textBaseline = 'center';
context.fillStyle = '#f7716d';
context.fillText('暂停',this.x,this.y);
}
}
});
//暂停
stage.createItem({
x:game.width/2,
y:game.height-10,
draw:function(context){
context.fillStyle = '#eee';
context.font = '15px Helvetica';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('按【空格】键暂停',this.x,this.y);
}
});
源码
需要源码请关注添加好友哦^ ^
转载：欢迎来到本站，转载请注明文章出处https://ormcc.com/
