1、素材的获取
游戏最重要的就是需要素材，每个人都有自己喜欢的素材环境。我自己喜欢的素材网址就是爱给网。进入网址搜索黄金矿工可以得到需要的素材。
2、获取canvas
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d")
3、场景的编写
写游戏最大的改变思路就是场景，也就是舞台跟css3的3d功能很像。需要一个舞台元素。上面的所有东西都是演员。比如背景、石头、车子、人、钩子等等。所以我们需要把舞台构建好。
3-1建立场景类
(function(w) {
var scene;
function Scene(cxt, imgobj) {
this.cxt=cxt;
this.imgObj=imgobj;
this.bg = getBg(this.cxt, this.imgObj.bg);
this.ren = getRen(this.cxt, this.imgObj.ren, 8, 1, 200, 56)
this.gouzi = getgouzi(this.cxt, this.imgObj.gouzi, 220, 110)
this.weizi = [];
this.shuji = Math.random() * 4 + 5
for(var i = 0; i < this.shuji; i++) {
this.weizi[i] = {}
this.weizi[i].x = Math.round(Math.random() * 300 + 50)
this.weizi[i].y = Math.round(Math.random() * 250 + 200)
}
this.ZiyuanArray = [];
for(var i = 0; i < this.shuji; i++) {
this.ZiyuanArray = getZiyuan(cxt, this.imgObj.jinzi, this.weizi[i].x, this.weizi[i].y)
}
this.fenshu = 0;
this.geshu = this.ZiyuanArray.length;
}
Scene.prototype.draw=function(){
this.cxt.clearRect(0, 0, this.cxt.canvas.width, this.cxt.canvas.height)
this.bg.render()
for(var i = 0; i < this.ZiyuanArray.length; i++) {
this.ZiyuanArray[i].render()
}
this.cxt.textAlign = "right",
this.cxt.textBaseline = "top",
this.cxt.font = "20px 微软雅黑"
this.cxt.fillText("你抓了" + this.fenshu + "个", this.cxt.canvas.width, 0)
this.ren.render()
this.ren.update()
if(this.fenshu == this.geshu) {
this.next()
}
this.gouzi.render()
this.gouzi.update()
var self=this
this.ZiyuanArray.forEach(function(ziyuan) {
if(((self.gouzi.x + self.gouzi.width / 2) > ziyuan.x) && ((self.gouzi.x + self.gouzi.width / 2) < (ziyuan.x + ziyuan.width)) && (self.gouzi.y > ziyuan.y) && (self.gouzi.y < ziyuan.y + ziyuan.height)) {
self.gouzi.upspeed = -10
self.gouzi.leftspeed = 10 * Math.tan(self.gouzi.currentAngle)
self.fenshu++
setInterval(function() {
ziyuan.x = self.gouzi.x;
ziyuan.y = self.gouzi.y;
if(ziyuan.x == 220 && ziyuan.y == 110) {
ziyuan.x = 0;
ziyuan.y = 0;
ziyuan.width = 0;
ziyuan.height = 0;
}
}, 0)
}
})
}
Scene.prototype.next=function() {
this.shuji = Math.random() * 4 + 5
for(var i = 0; i < this.shuji; i++) {
this.weizi[i] = {}
this.weizi[i].x = Math.round(Math.random() * 300 + 50)
this.weizi[i].y = Math.round(Math.random() * 250 + 200)
}
for(var i = 0; i < this.shuji; i++) {
this.ZiyuanArray = getZiyuan(this.cxt, this.imgObj.jinzi, this.weizi[i].x, this.weizi[i].y)
}
this.geshu = this.ZiyuanArray.length
}
w.getScene=function(cxt, imgobj){
if(!scene){
scene=new Scene(cxt,imgobj)
}
return scene
}
}(window))
建立资源金子类
(function(w){
var ziyuan=[];
var shumu=0;
function Ziyuan(cxt, img, x, y) {
this.cxt = cxt;
this.img = img;
this.x = x;
this.y = y;
this.name=Ziyuan.len;
this.width = this.img.width;
this.height = this.img.height;
Ziyuan.len++
}
Ziyuan.len=0
Ziyuan.prototype = {
constructor: Ziyuan,
render: function() {
this.cxt.drawImage(this.img, this.x, this.y, this.width, this.height)
}
}
w.getZiyuan=function(cxt, img, x, y){
ziyuan.push(new Ziyuan(cxt, img, x, y))
return ziyuan
}
}(window))
建立人类
(function(w){
var ren;
function Ren(cxt, img, widthFrame, heightFrame, x, y, ) {
this.cxt = cxt;
this.img = img;
this.widthFrame = widthFrame;
this.heightFrame = heightFrame
this.width = this.img.width / this.widthFrame;
this.height = this.img.height / this.heightFrame;
this.x = x;
this.y = y;
this.currentFrame = 0;
}
Ren.prototype = {
constructor: Ren,
render: function() {
this.cxt.drawImage(this.img, this.width * this.currentFrame, 0, this.width, this.height, this.x, this.y, this.width, this.height)
},
update: function() {
this.currentFrame++
this.currentFrame = this.currentFrame > 3 ? 0 : this.currentFrame;
}
}
w.getRen=function(cxt, img, widthFrame, heightFrame, x, y){
if(!ren){
ren=new Ren(cxt, img, widthFrame, heightFrame, x, y)
}
return ren
}
}(window))
建立钩子类
// gouzi构造函数
(
function(w) {
var gouzi=null;
function Gouzi(cxt, img, x, y, speed) {
this.cxt = cxt;
this.img = img;
this.width = this.img.width;
this.height = this.img.height;
this.x = x;
this.y = y;
this.upspeed = 0;
this.speed = speed || 0.1;
this.currentAngle = 0;
this.leftspeed = 0;
this._bind();
}
Gouzi.prototype = {
constructor: Gouzi,
render: function() {
this.cxt.save();
this.cxt.translate(this.x + this.width / 2, this.y)
this.cxt.rotate(this.currentAngle)
this.cxt.drawImage(this.img, -this.width / 2, 0, this.width, this.height)
this.cxt.restore();
this.cxt.beginPath();
this.cxt.moveTo(220 + this.width / 2, 110);
this.cxt.lineTo(this.x + this.width / 2, this.y);
this.cxt.lineWidth = 4;
var gradient = this.cxt.createLinearGradient(this.x + this.width / 2, 110, 222, 552);
gradient.addColorStop(0, "#888");
gradient.addColorStop(1, "#fff");
this.cxt.strokeStyle = gradient
this.cxt.stroke()
},
update: function() {
this.y += this.upspeed
this.x += this.leftspeed
if(this.y <= 110) {
this.y = 110;
this.x = 220;
this.currentAngle += this.speed;
if(this.currentAngle > Math.PI / 180 * 80) {
this.speed = -0.1;
} else if(this.currentAngle < Math.PI / 180 * -80) {
this.speed = 0.1;
}
} else if(this.y >= this.cxt.canvas.height - 100 || this.x < 10 || this.x > 414) {
this.upspeed = -10
this.leftspeed = 10 * Math.tan(this.currentAngle)
}
},
_hui: function() {
if(this.y <= 110) {
this.y = 110;
this.x = 220;
this.currentAngle += this.speed;
if(this.currentAngle > Math.PI / 180 * 80) {
this.speed = -0.1;
} else if(this.currentAngle < Math.PI / 180 * -80) {
this.speed = 0.1;
}
} else if(this.y >= this.cxt.canvas.height - 100 || this.x < 10 || this.x > 414) {
this.upspeed = -10
this.leftspeed = 10 * Math.tan(this.currentAngle)
}
},
_bind: function() {
var self = this
document.addEventListener("click", function() {
self.upspeed = 10
self.leftspeed = -10 * Math.tan(self.currentAngle)
})
}
}
w.getgouzi=function(cxt, img, x, y, speed){
if(!gouzi){
gouzi=new Gouzi(cxt, img, x, y, speed)
}
return gouzi;
}
}(window)
)
建立背景类
(function(w){
var bg
function Bg(cxt, img) {
this.cxt = cxt;
this.img = img;
this.width = this.img.width;
this.height = this.img.height;
this.x = 0;
this.y = 0;
}
Bg.prototype = {
constructor: Bg,
render: function() {
this.cxt.drawImage(this.img, this.x, this.y)
}
}
w.getBg=function(cxt,img){
if(!bg){
bg=new Bg(cxt,img)
}
return bg
}
}(window))
建立结束场景类
(function(w){
function OverScene(cxt){
this.cxt=cxt
}
OverScene.prototype.draw=function(){
this.cxt.save()
this.cxt.fillStyle="rgba(0,0,0,.3)"
this.cxt.fillRect(0,0,this.cxt.canvas.width,this.cxt.canvas.height)
this.cxt.fillStyle="red";
this.font="40px 微软雅黑";
this.textAlign="center";
this.textBaseline="top";
this.cxt.fillText("时间到",this.cxt.canvas.width/2,this.cxt.canvas.height/2)
this.cxt.restore()
}
w.getOverScene=function(cxt){
return new OverScene(cxt)
}
}(window))
function OverScene(cxt){
this.cxt=cxt
}
OverScene.prototype.draw=function(){
this.cxt.save()
this.cxt.fillStyle="rgba(0,0,0,.3)"
this.cxt.fillRect(0,0,this.cxt.canvas.width,this.cxt.canvas.height)
this.cxt.fillStyle="red";
this.font="40px 微软雅黑";
this.textAlign="center";
this.textBaseline="top";
this.cxt.fillText("时间到",this.cxt.canvas.width/2,this.cxt.canvas.height/2)
this.cxt.restore()
}
w.getOverScene=function(cxt){
return new OverScene(cxt)
}
}(window))
最后也是最重要的事需要使用图片懒加载进行图片加载，防止进入游戏而图片没有加载成。
function loadImages(img, fn) {
var ImgData = {};
var temImg;
var loaded = 0;
var current = 0
for(var key in img) {
current++
temImg = new Image();
temImg.src = img[key];
temImg.onload = function() {
loaded++
if(loaded >= current) {
fn(ImgData)
}
}
ImgData[key] = temImg;
}
}
以上就是我编写黄金矿工的全部流程，因为技术有限，大家对不足之处欢迎指正。