|
1.html - <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>像素鸟测试</title>
- <meta name="description" content="">
- <meta name="keywords" content="">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
- <link href="style/reset.css" rel="stylesheet">
- <link href="style/common.css" rel="stylesheet">
- <style>
- #canvas{
- border:1px solid #000;
- }
- </style>
- </head>
- <body>
- <canvas id="canvas"></canvas>
- <script src="js/Game.js"></script>
- <script>
- var game = new Game({
- id :'#canvas',
- Rjsonurl : 'R.json'
- });
- </script>
- </body>
- </html>
复制代码
2.js/Game.js- (function(){
- // 一个类 是一个闭包
- var Game = window.Game = function(params){
- this.canvas = document.querySelector(params.id);
- this.ctx = this.canvas.getContext("2d");
- this.Rjsonurl = params.Rjsonurl;
- // 帧编号
- this.fno = 0;
- // 设置画布的宽和高
- this.init();
- var self = this;
- // 读取资源 这里有个注意的点,这是异步回调函数 ,方法得写在这里而不是外面
- this.loadAllResource(function() {
- // 这里表示所有资源读取完毕
- self.start();
- });
- }
- // 初始化,设置画布的宽度和高度
- Game.prototype.init = function(){
- // 读取视口的高度
- var windowW = document.documentElement.clientWidth;
- var windowH = document.documentElement.clientHeight;
- // 验收
- if(windowW>414)
- {
- windowW = 414;
- }else if(windowW<320){
- windowW = 320;
- }
- if(windowH >736){
- windowH = 736;
- }else if(windowH <500){
- windowH = 500;
- }
- // 让canvas 匹配视口 不需要特意模拟手机
- this.canvas.width = windowW;
- this.canvas.height = windowH;
- }
- // 读取资源
- Game.prototype.loadAllResource=function(callback){
- this.R={}; //用于存放图片对象
- var self =this;
- var xhr = new XMLHttpRequest();
- xhr.open('get', this.Rjsonurl ,true );
- xhr.send(null);
- xhr.onreadystatechange = function()
- {
- if(xhr.readyState==4){
- var Robj = JSON.parse(xhr.responseText);
- var loadNum = 0;
- for(var i=0; i<Robj.images.length; i++)
- {
- // 创建一个同名的类
- self.R[Robj.images[i].name] = new Image();
- // 图片预加载的请求.src=
- self.R[Robj.images[i].name].src = Robj.images[i].url
- // 监听
- self.R[Robj.images[i].name].onload = function (){
- // 计数
- loadNum++
- // 加载提示文字
- self.ctx.clearRect(0,0,self.canvas.width,self.canvas.height); //清屏
- self.ctx.font = "24px serif"; //字体样式
- self.ctx.textAlign ="center"; //对齐方式
- self.ctx.fillText('已加载'+loadNum+'项目',self.canvas.width/2,self.canvas.height*(1-0.618)/2);//文字与位置
- if(loadNum==Robj.images.length){
- callback();
- }
- }
- }
- }
- }
- }
- // 启动游戏
- Game.prototype.start = function(){
- var self = this;
- this.timer = setInterval(function(){
- self.ctx.clearRect(0,0,self.canvas.width,self.canvas.height); //清屏
- self.fno++;
- self.ctx.fillText('FNO:'+self.fno,100,100);
- },20)
- }
-
- })();
复制代码
3.资源文件 R.json- {
- "images":[
- {"name" : "bg_day","url":"img/bg_day.png"},
- {"name" : "bg_night","url":"img/bg_night.png"},
-
- {"name" : "bird0_0","url":"img/bird0_0.png"},
- {"name" : "bird0_1","url":"img/bird0_1.png"},
- {"name" : "bird0_2","url":"img/bird0_2.png"},
- {"name" : "bird1_0","url":"img/bird1_0.png"},
- {"name" : "bird1_1","url":"img/bird1_1.png"},
- {"name" : "bird1_2","url":"img/bird1_2.png"},
- {"name" : "bird2_0","url":"img/bird2_0.png"},
- {"name" : "bird2_1","url":"img/bird2_1.png"},
- {"name" : "bird2_2","url":"img/bird2_2.png"}
- ]
- }
复制代码
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
|