canvas教程

html5 canvas实现酷炫的小游戏例子

字号+ 作者:H5之家 来源:H5之家 2018-02-09 13:00 我要评论( )

html5本身就可以做小游戏了在这里我们来看一篇通过html5 canvas实现酷炫的小游戏例子,具体的步骤细节如下文介绍。

html5 canvas实现酷炫的小游戏例子


前言

首先,一个游戏最重要的就是动画,怎么让元素动起来呢?先来看一句话:
元素的位置移动,就形成了动画。
一帧一帧的来渲染这个元素,而且这个元素每一帧的位置都不一样,我们的眼睛看到的就是动画了。OK,先来介绍requestAnimationFrame这个函数。
我们都知道,隔一段时间重新渲染,可以用到setTimeout 和setInterval这两个函数,那这里为什么不用呢?

我来简单举个例子吧:

setInterval(myFun, 1); 意思是隔一毫秒执行一个myFun函数,但是这样就有一个问题了,比如我myFun函数里面绘制的东西比较耗时,而1ms之内还没有完全绘制出来,但是这段代码强制1ms之后又开始绘制下一帧了,所以就会出现丢帧的问题,而如果时间设置太长,就会出现视觉卡顿的问题。
requestAnimationFrame(myFun); 如果我们这样写,又是什么意思呢?意思是根据一定的时间间隔,会自动执行myFun函数来进行绘制。这个”一定的时间间隔”就是根据浏览器的性能或者网速快慢来决定了,总之,它会保证你绘制完这一帧,才会绘制下一帧,保证性能的同时,也保证动画的流畅。
动画解决了,那么用什么来绘制每一帧的页面呢?这时就要用到h5的神奇—-canvas了,所以canvas画布的API非常重要。

html文件

<div class="page">
    <div class="content" id = "main">
        <canvas id = "canvas1" width="800" height="600">
        </canvas>
        <canvas id = "canvas2" width="800" height="600">
        </canvas>
    </div>
</div>

定义两个画布,分别在画布上绘制相应的物体;
canvas2 上绘制,背景、海葵、果实;
canvas1 上绘制,大鱼、小鱼、显示文字、圆圈特效;

js文件

    function init(){
        can1 = document.getElementById('canvas1');     //画布
        ctx1 = can1.getContext('2d');   //画笔
        can2 = document.getElementById('canvas2');
        ctx2 = can2.getContext('2d');   //下面的canvas
    }
    function gameloop(){
        requestAnimFrame(gameLoop);
        //绘制物体...
    }
    var requestAnimFrame = (function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback, element) {
            return window.setTimeout(callback, 1000 / 60);
        };
})();

init函数初始化一些变量,比如海葵对象,大鱼、小鱼对象等等。
gameloop函数用于绘制每一帧的页面。下面所介绍的所有绘制函数都是在这里执行。
requestAnimFrame函数是为了兼容所有浏览器。
下面我们就开始绘制游戏中出现的东西,顺便看看都用到了哪些有趣的API函数。go!go!go!
绘制背景和海葵
背景是一张图,而海葵是一个类,它有x坐标,y坐标,个数等等属性,有初始化init和draw方法。
drawImage(image, x, y, width, height)
ctx2.save();
ctx2.globalAlpha = 0.7;
ctx2.lineWidth = 20;
ctx2.lineCap = 'round';
ctx2.strokeStyle = '#3b154e';
ctx2.beginPath();
ctx2.moveTo(this.rootx[i], canHei);     //起始点
ctx2.lineTo(this.rootx[i], canHei - 220,);  //结束点    ctx2.stroke();
ctx2.restore();
ctx2.drawImage(image, x, y, width, height) //x,y代表坐标,width和height代表宽高
ctx2.save(); //定义作用空间
ctx2.globalAlpha = 0.7; //定义线的透明度
ctx2.lineWidth = 20; // 宽度
ctx2.lineCap = ‘round’; // 圆角
ctx2.strokeStyle = ‘#3b154e’; //定义绘制线条的颜色
ctx2.beginPath(); //开始路径
ctx2.moveTo(x,y); //线的起点,x,y代表坐标(坐标原点在左上角)
ctx2.lineTo(x,y); // 线条从起点连接到这个点
ctx2.stroke(); // 开始绘制线条
ctx2.restore(); //作用空间结束

海葵产生果实

果实也是一个类,他的属性有:坐标、类型(黄色和蓝色)、大小、状态(显示还是隐藏)、速度(向上漂浮的速度)等等属性;他的方法有:初始化init、出生born和绘制draw。
draw方法:
for(var i =0;i< this.num; i++){
    if(this.alive[i]){
        //find an ane, grow, fly up...
        if(this.size[i] <= 16){   //长大状态
            this.grow[i] = false;
            this.size[i] += this.speed[i] * diffframetime * 0.8;
        }else{   //已经长大,向上漂浮
            this.grow[i] = true;
            this.y[i] -= this.speed[i] * 5 * diffframetime;
        }
        var pic = this.orange;
        if(this.type[i] == 'blue')   pic = this.blue;
        ctx2.drawImage(pic, this.x[i] - this.size[i] * 0.5, this.y[i] - this.size[i] * 0.5, this.size[i], this.size[i]);
        if(this.y[i] < 8){
            this.alive[i] = false;
        }
    }
}

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题

    完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题

    2018-01-28 17:00

  • 向军的技术课程

    向军的技术课程

    2018-01-28 16:06

  • 《HTML5 Canvas基础教程(英)霍克著》

    《HTML5 Canvas基础教程(英)霍克著》

    2018-01-28 14:07

  • Canvas粒子背景效果 前端开发,JQUERY特效,全栈开发,vue开发

    Canvas粒子背景效果 前端开发,JQUERY特效,全栈开发,vue开发

    2018-01-28 14:00

网友点评
t