Canvas 游戏起步封装【胖子制作】

周大胖子 · 发表于 2018-12-16 23:28:53

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"}
]
}

复制代码

Canvas 游戏起步封装【胖子制作】

本帖子中包含更多资源