设为首页收藏本站
立即注册 找回密码

QQ登录

只需要一步，快速开始

APP扫码登录

只需要一步，快速开始

手机号码，快捷登录

手机号码，快捷登录

快捷导航
  • 优惠福利
  • 美食天下
  • 旅游户外
  • 亲子乐园
  • 编程源码
  • 金典软件
  • 视频教学
  • 文档资料
  • 修改头像
  • 我的积分
  • 修改密码
  • 个人资料
  • 推广奖励
  • 改用户名
    • 泡泡马甲»泡泡马甲 › 分类导航 › 编程源码 › JS+HTML实现经典游戏吃豆人
    返回列表 发新帖
    查看: 5573|回复: 0

    [HTML/CSS/JS] JS+HTML实现经典游戏吃豆人

    [复制链接]
    admin

    等级头衔

    积分成就    金币 : 2841
       泡泡 : 1516
       精华 : 6 篇
       在线时间 : 1294 小时
       最后登录 : 2024-11-21

    丰功伟绩

    优秀达人突出贡献荣誉管理论坛元老

    联系方式
    发表于 2022-4-16 16:45:45 | 显示全部楼层 |阅读模式
    ⏹ 阅读停止中
    一、前言- }/ |: d. d7 k' P. j# p
           很早就知道canvas，当时一直没应用到，最近闲来无事就顺便写写看。吃豆游戏可以说是我们80，90后共同的回忆录，小时候常常在学习机上玩，所以也就有了强烈的欲望去写。为了写这个游戏，看了很多吃豆人游戏的相关信息，包括游戏规则，历史，其它相关游戏设计。又去了各个小游戏平台玩了下，找些灵感！！！就连最简单的配色，也是反复斟酌几个小时确定的方案……哈哈，不容易啊代码分两部分，游戏引擎和游戏主程序，引擎用来类的定义，管理动画场景，事件定义等等……游戏主程序主要组织业务逻辑。算面向对象编程吧，纯手工打造是男人就吃光所有豆子!!! 1 G0 w7 Q6 f' `
    项目结构
    ( W3 t6 }8 p5 q 1.jpg
    " M1 ^- k( N% D" M( H       因需要四个文件即可实现，index.html 游戏主页，index.js 主页控制，game.js 游戏控制，favicon.png 图标。代码简单，易懂。后续小伙伴们还可以自己加入音乐！可以部署到服务器上，也可用浏览器直接打开index.html玩耍！！！# I! z& [1 M( f, d
    二、HTML代码* U3 t, K) S5 a  B6 \5 E
    复制代码
    1. <html>

    2.         <head>

    3.                 <meta charset="utf8">

    4.                 <title>Pac-Man . 吃豆游戏</title>

    5.                 <link rel="shortcut icon" href="favicon.png" rel="external nofollow" >

    6.                 <style>

    7.                         body{background-color: #292929}

    8.                         *{padding:0;margin:0;}

    9.                         .wrapper{

    10.                                 width: 960px;

    11.                                 margin:0 auto;

    12.                                 line-height:36px;

    13.                                 text-align:center;

    14.                                 color:#999;

    15.                         }

    16.                         canvas{display:block;background: #000;}

    17.                         .mod-botton{

    18.                                 height: 32px;

    19.                                 padding: 15px 0;

    20.                                 text-align: center;

    21.                         }

    22.                 </style>

    23.         </head>

    24.         <body>

    25.                 <div class="wrapper">

    26.                         <canvas id="canvas" width="960" height="640">不支持画布</canvas>

    27.                         <p>按［空格］暂停或继续</p>                

    28.                 </div>

    29.                 <script src="game.js"></script>

    30.                 <script src="index.js"></script>

    31.                 

    32.         </body>

    33. </html>
    三、JS代码
    1 J; k. P8 I5 A. A
    复制代码
    1. //主程序,业务逻辑

    2. (function(){

    3.         var _DATA = [                //地图数据

    4.                 [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],

    5.                 [1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1],

    6.                 [1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],

    7.                 [1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],

    8.                 [1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],

    9.                 [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],

    10.                 [1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],

    11.                 [1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],

    12.                 [1,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,0,1],

    13.                 [1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1],

    14.                 [1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1],

    15.                 [1,1,1,1,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1],

    16.                 [1,1,1,1,1,1,0,1,1,0,1,1,1,2,2,1,1,1,0,1,1,0,1,1,1,1,1,1],

    17.                 [1,1,1,1,1,1,0,1,1,0,1,2,2,2,2,2,2,1,0,1,1,0,1,1,1,1,1,1],

    18.                 [0,0,0,0,0,0,0,0,0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,0,0,0,0],

    19.                 [1,1,1,1,1,1,0,1,1,0,1,2,2,2,2,2,2,1,0,1,1,0,1,1,1,1,1,1],

    20.                 [1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1],

    21.                 [1,1,1,1,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1],

    22.                 [1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1],

    23.                 [1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1],

    24.                 [1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1],

    25.                 [1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],

    26.                 [1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],

    27.                 [1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1],

    28.                 [1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,1],

    29.                 [1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,1],

    30.                 [1,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,0,1],

    31.                 [1,0,1,1,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,1,1,0,1],

    32.                 [1,0,1,1,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,1,1,0,1],

    33.                 [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],

    34.                 [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]

    35.         ],

    36.         _GOODS = {                        //能量豆

    37.                 '1,3':1,

    38.                 '26,3':1,

    39.                 '1,23':1,

    40.                 '26,23':1

    41.         },

    42.         _COS = [1,0,-1,0],

    43.         _SIN = [0,1,0,-1],

    44.         _COLOR = ['#F00','#F93','#0CF','#F9C'],//红,橙,

    45.         _LIFE = 3,

    46.         _SCORE = 0;                //得分

    47.  

    48.         var game = new Game('canvas');

    49.         //启动页

    50.         (function(){

    51.                 var stage = game.createStage();

    52.                 //logo

    53.                 stage.createItem({

    54.                         x:game.width/2,

    55.                         y:game.height*.45,

    56.                         width:100,

    57.                         height:100,

    58.                         frames:3,

    59.                         draw:function(context){

    60.                                 var t = Math.abs(5-this.times%10);

    61.                                 context.fillStyle = '#FFE600';

    62.                                 context.beginPath();

    63.                                 context.arc(this.x,this.y,this.width/2,t*.04*Math.PI,(2-t*.04)*Math.PI,false);

    64.                                 context.lineTo(this.x,this.y);

    65.                                 context.closePath();

    66.                                 context.fill();

    67.                                 context.fillStyle = '#000';

    68.                                 context.beginPath();

    69.                                 context.arc(this.x+5,this.y-27,7,0,2*Math.PI,false);

    70.                                 context.closePath();

    71.                                 context.fill();

    72.                         }

    73.                 });

    74.                 //游戏名

    75.                 stage.createItem({

    76.                         x:game.width/2,

    77.                         y:game.height*.6,

    78.                         draw:function(context){

    79.                                 context.font = 'bold 42px Helvetica';

    80.                                 context.textAlign = 'center';

    81.                                 context.textBaseline = 'middle';

    82.                                 context.fillStyle = '#FFF';

    83.                                 context.fillText('Pac-Man',this.x,this.y);

    84.                         }

    85.                 });

    86.                 //版权信息

    87.                 stage.createItem({

    88.                         x:game.width-12,

    89.                         y:game.height-5,

    90.                         draw:function(context){

    91.                                 context.font = '14px Helvetica';

    92.                                 context.textAlign = 'right';

    93.                                 context.textBaseline = 'bottom';

    94.                                 context.fillStyle = '#AAA';

    95.                                 context.fillText('© passer-by.com',this.x,this.y);

    96.                         }

    97.                 });

    98.                 //事件绑定

    99.                 stage.bind('keydown',function(e){

    100.                         switch(e.keyCode){

    101.                                 case 13:

    102.                                 case 32:

    103.                                 game.nextStage();

    104.                                 break;

    105.                         }

    106.                 });

    107.         })();

    108.         //游戏主程序

    109.         (function(){

    110.                 var stage,map,beans,player,times;

    111.                 stage = game.createStage({

    112.                         update:function(){

    113.                                 var stage = this;

    114.                                 if(stage.status==1){                                                                //场景正常运行

    115.                                         items.forEach(function(item){

    116.                                                 if(map&&!map.get(item.coord.x,item.coord.y)&&!map.get(player.coord.x,player.coord.y)){

    117.                                                         var dx = item.x-player.x;

    118.                                                         var dy = item.y-player.y;

    119.                                                         if(dx*dx+dy*dy<750&&item.status!=4){                //物体检测

    120.                                                                 if(item.status==3){

    121.                                                                         item.status = 4;

    122.                                                                         _SCORE += 10;

    123.                                                                 }else{

    124.                                                                         stage.status = 3;

    125.                                                                         stage.timeout = 30;

    126.                                                                 }

    127.                                                         }

    128.                                                 }

    129.                                         });

    130.                                         if(JSON.stringify(beans.data).indexOf(0)<0){        //当没有物品的时候，进入结束画面

    131.                                                 game.nextStage();

    132.                                         }

    133.                                 }else if(stage.status==3){                //场景临时状态

    134.                                         if(!stage.timeout){

    135.                                                 _LIFE--;

    136.                                                 if(_LIFE){

    137.                                                         stage.resetItems();

    138.                                                 }else{

    139.                                                         game.nextStage();

    140.                                                         return false;

    141.                                                 }

    142.                                         }

    143.                                 }

    144.                         }

    145.                 });

    146.                 //绘制地图

    147.                 map = stage.createMap({

    148.                         x:60,

    149.                         y:10,

    150.                         data:_DATA,

    151.                         cache:true,

    152.                         draw:function(context){

    153.                                 context.lineWidth = 2;

    154.                                 for(var j=0; j<this.y_length; j++){

    155.                                         for(var i=0; i<this.x_length; i++){

    156.                                                 var value = this.get(i,j);

    157.                                                 if(value){

    158.                                                         var code = [0,0,0,0];

    159.                                                         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))){

    160.                                                                 code[0]=1;

    161.                                                         }

    162.                                                         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))){

    163.                                                                 code[1]=1;

    164.                                                         }

    165.                                                         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))){

    166.                                                                 code[2]=1;

    167.                                                         }

    168.                                                         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))){

    169.                                                                 code[3]=1;

    170.                                                         }

    171.                                                         if(code.indexOf(1)>-1){

    172.                                                                 context.strokeStyle=value==2?"#FFF":"#09C";

    173.                                                                 var pos = this.coord2position(i,j);

    174.                                                                 switch(code.join('')){

    175.                                                                         case '1100':

    176.                                                                                 context.beginPath();

    177.                                                                                 context.arc(pos.x+this.size/2,pos.y+this.size/2,this.size/2,Math.PI,1.5*Math.PI,false);

    178.                                                                                 context.stroke();

    179.                                                                                 context.closePath();

    180.                                                                                 break;

    181.                                                                         case '0110':

    182.                                                                                 context.beginPath();

    183.                                                                                 context.arc(pos.x-this.size/2,pos.y+this.size/2,this.size/2,1.5*Math.PI,2*Math.PI,false);

    184.                                                                                 context.stroke();

    185.                                                                                 context.closePath();

    186.                                                                                 break;

    187.                                                                         case '0011':

    188.                                                                                 context.beginPath();

    189.                                                                                 context.arc(pos.x-this.size/2,pos.y-this.size/2,this.size/2,0,.5*Math.PI,false);

    190.                                                                                 context.stroke();

    191.                                                                                 context.closePath();

    192.                                                                                 break;

    193.                                                                         case '1001':

    194.                                                                                 context.beginPath();

    195.                                                                                 context.arc(pos.x+this.size/2,pos.y-this.size/2,this.size/2,.5*Math.PI,1*Math.PI,false);

    196.                                                                                 context.stroke();

    197.                                                                                 context.closePath();

    198.                                                                                 break;

    199.                                                                         default:

    200.                                                                                 var dist = this.size/2;

    201.                                                                                 code.forEach(function(v,index){

    202.                                                                                         if(v){

    203.                                                                                                 context.beginPath();

    204.                                                                                                 context.moveTo(pos.x,pos.y);

    205.                                                                                                 context.lineTo(pos.x-_COS[index]*dist,pos.y-_SIN[index]*dist);

    206.                                                                                                 context.stroke();

    207.                                                                                                 context.closePath();                                                        

    208.                                                                                         }

    209.                                                                                 });

    210.                                                                 }

    211.                                                         }

    212.                                                 }

    213.                                         }

    214.                                 }

    215.                         }

    216.                 });

    217.                 //物品地图

    218.                 beans = stage.createMap({

    219.                         x:60,

    220.                         y:10,

    221.                         data:_DATA,

    222.                         frames:8,

    223.                         draw:function(context){

    224.                                 for(var j=0; j<this.y_length; j++){

    225.                                         for(var i=0; i<this.x_length; i++){

    226.                                                 if(!this.get(i,j)){

    227.                                                         var pos = this.coord2position(i,j);

    228.                                                         context.fillStyle = "#F5F5DC";

    229.                                                         if(_GOODS[i+','+j]){

    230.                                                                 context.beginPath();

    231.                                                                 context.arc(pos.x,pos.y,3+this.times%2,0,2*Math.PI,true);

    232.                                                                 context.fill();

    233.                                                                 context.closePath();

    234.                                                         }else{

    235.                                                                 context.fillRect(pos.x-2,pos.y-2,4,4);

    236.                                                         }

    237.                                                 }

    238.                                         }

    239.                                 }

    240.                         }

    241.                 });

    242.                 //得分

    243.                 stage.createItem({

    244.                         x:690,

    245.                         y:100,

    246.                         draw:function(context){

    247.                                 context.font = 'bold 28px Helvetica';

    248.                                 context.textAlign = 'left';

    249.                                 context.textBaseline = 'bottom';

    250.                                 context.fillStyle = '#C33';

    251.                                 context.fillText('SCORE',this.x,this.y);

    252.                                 context.font = '28px Helvetica';

    253.                                 context.textAlign = 'left';

    254.                                 context.textBaseline = 'top';

    255.                                 context.fillStyle = '#FFF';

    256.                                 context.fillText(_SCORE,this.x+12,this.y);

    257.                         }

    258.                 });

    259.                 //状态文字

    260.                 stage.createItem({

    261.                         x:690,

    262.                         y:320,

    263.                         frames:25,

    264.                         draw:function(context){

    265.                                 if(stage.status==2&&this.times%2){

    266.                                         context.font = '24px Helvetica';

    267.                                         context.textAlign = 'left';

    268.                                         context.textBaseline = 'center';

    269.                                         context.fillStyle = '#09F';

    270.                                         context.fillText('PAUSE',this.x,this.y);

    271.                                 }

    272.                         }

    273.                 });

    274.                 //生命值

    275.                 stage.createItem({

    276.                         x:705,

    277.                         y:540,

    278.                         width:30,

    279.                         height:30,

    280.                         draw:function(context){

    281.                                 for(var i=0;i<_LIFE-1;i++){

    282.                                         var x=this.x+40*i,y=this.y;

    283.                                         context.fillStyle = '#FFE600';

    284.                                         context.beginPath();

    285.                                         context.arc(x,y,this.width/2,.15*Math.PI,-.15*Math.PI,false);

    286.                                         context.lineTo(x,y);

    287.                                         context.closePath();

    288.                                         context.fill();

    289.                                 }

    290.                         }

    291.                 });

    292.                 //NPC

    293.                 for(var i=0;i<4;i++){

    294.                         stage.createItem({

    295.                                 width:30,

    296.                                 height:30,

    297.                                 orientation:3,

    298.                                 color:_COLOR[i],

    299.                                 location:map,

    300.                                 coord:{x:12+i,y:14},

    301.                                 vector:{x:12+i,y:14},

    302.                                 type:2,

    303.                                 frames:10,

    304.                                 speed:1,

    305.                                 timeout:Math.floor(Math.random()*120),

    306.                                 update:function(){

    307.                                         var new_map;

    308.                                         if(this.status==3&&!this.timeout){

    309.                                                 this.status = 1;

    310.                                         }

    311.                                         if(!this.coord.offset){                        //到达坐标中心时计算

    312.                                                 if(this.status==1){

    313.                                                         if(!this.timeout){                //定时器

    314.                                                                 new_map = JSON.parse(JSON.stringify(map.data).replace(/2/g,0));

    315.                                                                 var id = this._id;

    316.                                                                 items.forEach(function(item){

    317.                                                                         if(item._id!=id&&item.status==1){        //NPC将其它所有还处于正常状态的NPC当成一堵墙

    318.                                                                                 new_map[item.coord.y][item.coord.x]=1;

    319.                                                                         }

    320.                                                                 });

    321.                                                                 this.path = map.finder({

    322.                                                                         map:new_map,

    323.                                                                         start:this.coord,

    324.                                                                         end:player.coord

    325.                                                                 });

    326.                                                                 if(this.path.length){

    327.                                                                         this.vector = this.path[0];

    328.                                                                 }

    329.                                                         }

    330.                                                 }else if(this.status==3){

    331.                                                         new_map = JSON.parse(JSON.stringify(map.data).replace(/2/g,0));

    332.                                                         var id = this._id;

    333.                                                         items.forEach(function(item){

    334.                                                                 if(item._id!=id){

    335.                                                                         new_map[item.coord.y][item.coord.x]=1;

    336.                                                                 }

    337.                                                         });

    338.                                                         this.path = map.finder({

    339.                                                                 map:new_map,

    340.                                                                 start:player.coord,

    341.                                                                 end:this.coord,

    342.                                                                 type:'next'

    343.                                                         });

    344.                                                         if(this.path.length){

    345.                                                                 this.vector = this.path[Math.floor(Math.random()*this.path.length)];

    346.                                                         }

    347.                                                 }else if(this.status==4){

    348.                                                         new_map = JSON.parse(JSON.stringify(map.data).replace(/2/g,0));

    349.                                                         this.path = map.finder({

    350.                                                                 map:new_map,

    351.                                                                 start:this.coord,

    352.                                                                 end:this._params.coord

    353.                                                         });

    354.                                                         if(this.path.length){

    355.                                                                 this.vector = this.path[0];

    356.                                                         }else{

    357.                                                                 this.status = 1;

    358.                                                         }

    359.                                                 }

    360.                                                 //是否转变方向

    361.                                                 if(this.vector.change){

    362.                                                         this.coord.x = this.vector.x;

    363.                                                         this.coord.y = this.vector.y;

    364.                                                         var pos = map.coord2position(this.coord.x,this.coord.y);

    365.                                                         this.x = pos.x;

    366.                                                         this.y = pos.y;

    367.                                                 }

    368.                                                 //方向判定

    369.                                                 if(this.vector.x>this.coord.x){

    370.                                                         this.orientation = 0;

    371.                                                 }else if(this.vector.x<this.coord.x){

    372.                                                         this.orientation = 2;

    373.                                                 }else if(this.vector.y>this.coord.y){

    374.                                                         this.orientation = 1;

    375.                                                 }else if(this.vector.y<this.coord.y){

    376.                                                         this.orientation = 3;

    377.                                                 }

    378.                                         }

    379.                                         this.x += this.speed*_COS[this.orientation];

    380.                                         this.y += this.speed*_SIN[this.orientation];

    381.                                 },

    382.                                 draw:function(context){

    383.                                         var isSick = false;

    384.                                         if(this.status==3){

    385.                                                 isSick = this.timeout>80||this.times%2?true:false;

    386.                                         }

    387.                                         if(this.status!=4){

    388.                                                 context.fillStyle = isSick?'#BABABA':this.color;

    389.                                                 context.beginPath();

    390.                                                 context.arc(this.x,this.y,this.width*.5,0,Math.PI,true);

    391.                                                 switch(this.times%2){

    392.                                                         case 0:

    393.                                                         context.lineTo(this.x-this.width*.5,this.y+this.height*.4);

    394.                                                         context.quadraticCurveTo(this.x-this.width*.4,this.y+this.height*.5,this.x-this.width*.2,this.y+this.height*.3);

    395.                                                         context.quadraticCurveTo(this.x,this.y+this.height*.5,this.x+this.width*.2,this.y+this.height*.3);

    396.                                                         context.quadraticCurveTo(this.x+this.width*.4,this.y+this.height*.5,this.x+this.width*.5,this.y+this.height*.4);

    397.                                                         break;

    398.                                                         case 1:

    399.                                                         context.lineTo(this.x-this.width*.5,this.y+this.height*.3);

    400.                                                         context.quadraticCurveTo(this.x-this.width*.25,this.y+this.height*.5,this.x,this.y+this.height*.3);

    401.                                                         context.quadraticCurveTo(this.x+this.width*.25,this.y+this.height*.5,this.x+this.width*.5,this.y+this.height*.3);

    402.                                                         break;

    403.                                                 }

    404.                                                 context.fill();

    405.                                                 context.closePath();

    406.                                         }

    407.                                         context.fillStyle = '#FFF';

    408.                                         if(isSick){

    409.                                                 context.beginPath();

    410.                                                 context.arc(this.x-this.width*.15,this.y-this.height*.21,this.width*.08,0,2*Math.PI,false);

    411.                                                 context.arc(this.x+this.width*.15,this.y-this.height*.21,this.width*.08,0,2*Math.PI,false);

    412.                                                 context.fill();

    413.                                                 context.closePath();

    414.                                         }else{

    415.                                                 context.beginPath();

    416.                                                 context.arc(this.x-this.width*.15,this.y-this.height*.21,this.width*.12,0,2*Math.PI,false);

    417.                                                 context.arc(this.x+this.width*.15,this.y-this.height*.21,this.width*.12,0,2*Math.PI,false);

    418.                                                 context.fill();

    419.                                                 context.closePath();

    420.                                                 context.fillStyle = '#000';

    421.                                                 context.beginPath();

    422.                                                 context.arc(this.x-this.width*(.15-.04*_COS[this.orientation]),this.y-this.height*(.21-.04*_SIN[this.orientation]),this.width*.07,0,2*Math.PI,false);

    423.                                                 context.arc(this.x+this.width*(.15+.04*_COS[this.orientation]),this.y-this.height*(.21-.04*_SIN[this.orientation]),this.width*.07,0,2*Math.PI,false);

    424.                                                 context.fill();

    425.                                                 context.closePath();

    426.                                         }

    427.                                 }

    428.                         });

    429.                 }

    430.                 items = stage.getItemsByType(2);

    431.                 //主角

    432.                 player = stage.createItem({

    433.                         width:30,

    434.                         height:30,

    435.                         type:1,

    436.                         location:map,

    437.                         coord:{x:13.5,y:23},

    438.                         orientation:2,

    439.                         speed:2,

    440.                         frames:10,

    441.                         update:function(){

    442.                                 var coord = this.coord;

    443.                                 if(!coord.offset){

    444.                                         if(this.control.orientation!='undefined'){

    445.                                                 if(!map.get(coord.x+_COS[this.control.orientation],coord.y+_SIN[this.control.orientation])){

    446.                                                         this.orientation = this.control.orientation;

    447.                                                 }

    448.                                         }

    449.                                         this.control = {};

    450.                                         var value = map.get(coord.x+_COS[this.orientation],coord.y+_SIN[this.orientation]);

    451.                                         if(value==0){

    452.                                                 this.x += this.speed*_COS[this.orientation];

    453.                                                 this.y += this.speed*_SIN[this.orientation];

    454.                                         }else if(value<0){

    455.                                                 this.x -= map.size*(map.x_length-1)*_COS[this.orientation];

    456.                                                 this.y -= map.size*(map.y_length-1)*_SIN[this.orientation];

    457.                                         }

    458.                                 }else{

    459.                                         if(!beans.get(this.coord.x,this.coord.y)){        //吃豆

    460.                                                 _SCORE++;

    461.                                                 beans.set(this.coord.x,this.coord.y,1);

    462.                                                 if(_GOODS[this.coord.x+','+this.coord.y]){        //吃到能量豆

    463.                                                         items.forEach(function(item){

    464.                                                                 if(item.status==1||item.status==3){        //如果NPC为正常状态，则置为临时状态

    465.                                                                         item.timeout = 450;

    466.                                                                         item.status = 3;

    467.                                                                 }

    468.                                                         });

    469.                                                 }

    470.                                         }

    471.                                         this.x += this.speed*_COS[this.orientation];

    472.                                         this.y += this.speed*_SIN[this.orientation];

    473.                                 }

    474.                         },

    475.                         draw:function(context){

    476.                                 context.fillStyle = '#FFE600';

    477.                                 context.beginPath();

    478.                                 if(stage.status!=3){        //玩家正常状态

    479.                                         if(this.times%2){

    480.                                                 context.arc(this.x,this.y,this.width/2,(.5*this.orientation+.20)*Math.PI,(.5*this.orientation-.20)*Math.PI,false);

    481.                                         }else{

    482.                                                 context.arc(this.x,this.y,this.width/2,(.5*this.orientation+.01)*Math.PI,(.5*this.orientation-.01)*Math.PI,false);

    483.                                         }

    484.                                 }else{        //玩家被吃

    485.                                         if(stage.timeout) {

    486.                                                 context.arc(this.x,this.y,this.width/2,(.5*this.orientation+1-.02*stage.timeout)*Math.PI,(.5*this.orientation-1+.02*stage.timeout)*Math.PI,false);

    487.                                         }

    488.                                 }

    489.                                 context.lineTo(this.x,this.y);

    490.                                 context.closePath();

    491.                                 context.fill();

    492.                         }

    493.                 });

    494.                 //事件绑定

    495.                 stage.bind('keydown',function(e){

    496.                         switch(e.keyCode){

    497.                                 case 13: //回车

    498.                                 case 32: //空格

    499.                                 this.status = this.status==2?1:2;

    500.                                 break;

    501.                                 case 39: //右

    502.                                 player.control = {orientation:0};

    503.                                 break;

    504.                                 case 40: //下

    505.                                 player.control = {orientation:1};

    506.                                 break;

    507.                                 case 37: //左

    508.                                 player.control = {orientation:2};

    509.                                 break;

    510.                                 case 38: //上

    511.                                 player.control = {orientation:3};

    512.                                 break;

    513.                         }

    514.                 });

    515.         })();

    516.         //结束画面

    517.         (function(){

    518.                 var stage = game.createStage();

    519.                 //游戏结束

    520.                 stage.createItem({

    521.                         x:game.width/2,

    522.                         y:game.height*.35,

    523.                         draw:function(context){

    524.                                 context.fillStyle = '#FFF';

    525.                                 context.font = 'bold 48px Helvetica';

    526.                                 context.textAlign = 'center';

    527.                                 context.textBaseline = 'middle';

    528.                                 context.fillText('GAME OVER',this.x,this.y);

    529.                         }

    530.                 });

    531.                 //记分

    532.                 stage.createItem({

    533.                         x:game.width/2,

    534.                         y:game.height*.5,

    535.                         draw:function(context){

    536.                                 context.fillStyle = '#FFF';

    537.                                 context.font = '20px Helvetica';

    538.                                 context.textAlign = 'center';

    539.                                 context.textBaseline = 'middle';

    540.                                 context.fillText('FINAL SCORE: '+(_SCORE+50*Math.max(_LIFE-1,0)),this.x,this.y);

    541.                         }

    542.                 });

    543.                 //事件绑定

    544.                 stage.bind('keydown',function(e){

    545.                         switch(e.keyCode){

    546.                                 case 13: //回车

    547.                                 case 32: //空格

    548.                                 _SCORE = 0;

    549.                                 _LIFE = 3;

    550.                                 var st = game.setStage(1);

    551.                                 st.reset();

    552.                                 break;

    553.                         }

    554.                 });

    555.         })();

    556.         game.init();

    557. })();
    四、游戏截图
    ( r1 a2 U( Z& {7 @  f% a 2.jpg ) I/ Q% s) Y  a0 u/ Z
    3.jpg
    游戏, 经典

    相关帖子
    回复

    举报

    返回列表 发新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

    GMT+8, 2024-11-22 00:26

    Powered by paopaomj X3.5 © 2016-2025 sitemap

    快速回复 返回顶部 返回列表