'use strict'; //活动对象构造 function Item(options){ options = options||{}; var _ = this; var settings = { x:0, //横坐标 y:0, //纵坐标 width:20, //宽 height:20, //高 type:1, //对象类型 status:1, //对象状态,1表示正常 orientation:0, //当前定位方向,0表示上,1表示右,2表示下,3表示左 vector:{ //目标坐标 x:0, y:0 }, speed:1, //速度等级,1表示与刷新频率一致 update:function(){}, //更新参数信息 draw:function(){} //绘制 }; for(var i in settings){ _[i] = options[i]||settings[i]; } } //游戏对象 function Game(id,options){ var _ = this; var _settings = { name:'Pac-Man', //游戏名称 copyright:'passer-by.com', //版权信息 width:960, //画布宽度 height:640, //画布高度 map:{ //地图信息 x:0, //地图起点坐标 y:0, size:20, //地图单元的宽度 data:[] }, audio:[], //音频资源 images:[], //图片资源 }; for(i in options){ _settings[i] = options[i]; } var $canvas = document.getElementById(id); $canvas.width = _settings.width; $canvas.height = _settings.height; var _context = $canvas.getContext('2d'); //画布上下文环境 var _items = []; //动画对象队列 var _status, //页面状态 _hander; //画布更新 //动画开始 this.startAnimate = function(callback,frame){ frame = frame||1; var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.msRequestAnimationFrame; var t = 0; //帧数计算 var fn = function(){ t++; if(!(t%frame)){ _context.clearRect(0,0,_settings.width,_settings.height); //清除画布 callback(t/frame); } _hander = requestAnimationFrame(fn); }; _.stopAnimate(); _hander = requestAnimationFrame(fn); }; //动画开始 this.stopAnimate = function(){ var cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame ||window.msCancelAnimationFrame; _hander&&cancelAnimationFrame(_hander); }; //事件坐标 this.windowToCanvas = function(x,y){ var box = $canvas.getBoundingClientRect(); return { x:x-box.left*(_settings.width/box.width), y:y-box.top*(_settings.height/box.height) }; } //开始画面 this.launch = function(){ _status = 0; _.startAnimate(function(t){ //logo _context.fillStyle = '#FC3'; _context.beginPath(); if(t%2){ _context.arc(_settings.width/2,_settings.height*.45,50,.20*Math.PI,1.80*Math.PI,false); _context.lineTo(_settings.width/2,_settings.height*.45); }else{ _context.arc(_settings.width/2,_settings.height*.45,50,.01*Math.PI,1.99*Math.PI,false); _context.lineTo(_settings.width/2,_settings.height*.45); } _context.closePath(); _context.fill(); _context.fillStyle = '#000'; _context.beginPath(); _context.arc(_settings.width/2+5,_settings.height*.45-27,7,0,2*Math.PI,false); _context.closePath(); _context.fill(); //游戏名 _context.font = 'bold 42px Helvetica'; _context.textAlign = 'center'; _context.textBaseline = 'middle'; _context.fillStyle = '#FFF'; _context.fillText(_settings.name,_settings.width/2,_settings.height*.6); //版权信息 _context.font = '14px Helvetica'; _context.textAlign = 'right'; _context.textBaseline = 'bottom'; _context.fillStyle = '#AAA'; _context.fillText('© '+_settings.copyright,_settings.width-12,_settings.height-5); },10); }; //开始游戏 this.start = function(){ _status = 1; _.startAnimate(function(){ },10); }; //更新画布 this.update = function(){ _startAnimate(function(t){ _items.forEach(function(item,index){ item.update(t); }); }); }; //添加对象 this.addItem = function(item){ _items.push(item); }; //条件嗅探 this.render = function(){ }; //绘图 this.draw = function(){ }; //事件 //鼠标点击事件 $canvas.addEventListener('mousedown',function(e){ var position = _.windowToCanvas(e.clientX,e.clientY); if(!_status){ _.start(); } }); $canvas.addEventListener('mouseup',function(e){ var position = _.windowToCanvas(e.clientX,e.clientY); //React to the mouse down event }); }