Html5游戏开发攻略(Canvas设置篇)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunwanxin4/article/details/20365307

我们要在页面上绘画出游戏场景,必然要有一个画布(canvas)。

那么,我们就来讲讲如何进行画布设置吧~

虾米?你早就会了?canvas.getContext("2d")?

那你就错了,这里学问可大着呢。继续往下看看吧。


首先第一点,我们要了解canvas的分辨率设置。

一般来说,游戏标准的4:3分辨率是800X600、1024X768。16:9的是960X540、1366X768。

假设,我们想要将一个800X600的画布拉伸至1024X768应该怎么做?

难道直接把画布的width和height设置成1024X768吗?这很显然不是拉伸。

其实这里涉及到了一个关键点:硬件缩放。

我们在做一般前端的时候都会使用到css,这里也不例外。

假设我们有这样一个元素:

<canvas id="gameCanvas" width="800" height="600"></canvas>
然后我们再加上这段css:

#gameCanvas{
    width: 1024px;
    height: 768px;
}

如果你在这个画布中绘制了东西的话就会发现,哇塞~真的缩放了耶!

而且这里的缩放是硬件缩放,因此,性能将会十分的高(前提是设备支持硬件加速)。


通过以上方式我们知道了如何进行硬件缩放,若你在此之前已经绑定了鼠标事件会发现,怎么鼠标获取到X和Y和现在的图形所显示的X和Y对不上呢?这该怎么办?

这是因为我们绘制的时候设置的大小是800X600而真实显示的是1024X768。在这期间画布中的图形已经按照比例进行了缩放。因此,我们需要手动计算以弥补差值。

伪公式 :鼠标X * (画布宽度 / css设置宽度) = 鼠标映射到绘制时使用的分辨率的X位置

套入公式,计算(假设当前鼠标在550X300的位置):550 * (800 / 1024) ≈ 430

因此,计算得出 ,鼠标当前的X位置指向的应该是画布中绘制的430的位置。

鼠标的Y位置同理。


好的~上面我们已经介绍了如何进行硬件缩放且如何获得鼠标指向的位置。

接下来我们就来通过以上两个方法做出同比缩放效果吧!

何为同比缩放?请看图:



通过上图我们可以看出,无论我们如何对浏览器进行缩放,画布宽高比永恒不变。

这就是我们所需要的效果了。下面我们就来实现吧!


第一步:计算原始宽高比,假设我们的画布是800X600的分辨率。那么宽高比就是:800 / 600 ≈ 1.33

第二步:定义一个函数,根据宽高、上层元素宽高计算缩放值。将缩放值与原始宽高进行计算。将元素显示到上层元素中心。

function resize(){
    // 获取画布元素
    var canvas = document.getElementById("gameCanvas");
    // 画布元素的上层元素
    var pe = canvas.parentElement || canvas.parentNode || document.body;

    // 画布元素的上层元素宽度和高度
    var pw = pe.clientWidth;
    var ph = pe.clientHeight;

    // 画布元素的宽度和高度
    var width = canvas.width;
    var height = canvas.height;

    // 缩放值
    var scaling = Math.min(pw / width, ph / height);

    // 设置新宽度和高度
    canvas.style.width = (width * scaling) + "px";
    canvas.style.height = (height * scaling) + "px";

    // 如果当前画布在body中则显示在最中央
    if (pe == document.body){
        canvas.style.marginTop = ((ph - height * scaling) / 2) + "px";
        canvas.style.marginLeft = ((pw - width * scaling) / 2) + "px";
    }
}

// 绑定事件
window.addEventListener("resize", resize, false);
// 强制使用单屏应用方式
if (pe == document.body){
    var ss = document.createElement("style");
    ss.innerHTML = "html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;}";
    document.getElementByTagName("head").item(0).appendChild(ss);
}
这样就可以了!~


最后的同比缩放加上前面的鼠标位置计算就是完美的应用分辨率自适应了!~

这是一个很简单但是却会经常忽略掉的一些处理 。


另外,这个方法在配合使用Fullscreen API的时候会出现一些计算错误,只需要修改上面代码的一小部分就可以搞定,就留作作业吧~!如果真心搞不定,请在评论中留盐~~~~


最后放一个演示结束~请期待下一篇~

展开阅读全文

[网页设计]Html5游戏开发攻略(免费的音乐面包篇)

10-31

这一篇我们来尝尝免费的面包,至少目前是这样的。rnQQ音乐相信大家或多或少都使用过,里面的音乐资源非常多。rn这个时候你可能就明白了,没错,我们要在游戏中使用QQ音乐的资源当背景音乐~~~~~哦耶~!rn咳咳,不过呢,由于QQ音乐在线接口是加密的,所以我们需要一系列工作来解密并调用。可要做好准备哟!rn rn先放一张预览图:rnrn rn过程其实很简单。rn第一步:申请QQ音乐服务器访问权限。rn第二步:获取不同的音乐列表(根据你的选择获取到)。rn第三步:根据不同列表进行分析。rn第四步:获取音乐信息。rn第五步:从音乐信息中分析数据。rn第六步:播放音乐。rn rn/* rn QQ音乐插件 rn*/ rnvoid function (w) rn rn // QQ音乐对象 rn var QQMusic = ; rn rn setInterval(function getJurisdiction() rn /// 申请QQ音乐服务器访问权限 rn rn injectScript("http://qzone-music.qq.com/fcg-bin/fcg_set_musiccookie.fcg?fromtag=31"); rn return getJurisdiction; rn (), 3 * 60 * 1000); rn rn function injectScript(url) rn /// 引用脚本 rn /// 地址 rn rn var oScript = document.createElement("script"); rn oScript.src = url; rn oScript.charset = 'gb2312'; rn document.body.appendChild(oScript); rn document.body.removeChild(oScript); rn rn rn function getAlbumPicture(albumId) rn /// 获取专辑图片 rn /// 专辑编号 rn /// 专辑图片地址 rn rn return "http://imgcache.qq.com/music/photo/album/" + parseInt(albumId) % 100 + "/albumpic_" + albumId + "_0.jpg"; rn rn rn function getSingerPicture(singerId) rn /// 获取歌手图片 rn /// 歌手编号 rn /// 歌手图片地址 rn rn return "http://imgcache.qq.com/music/photo/singer/" + parseInt(singerId) % 100 + "/singerpic_" + singerId + "_0.jpg"; rn rn rn // 回调函数 rn var cb = null; rn rn QQMusic.getGuessYouLike = function (callback) rn /// 获取猜你喜欢列表 rn /// 回调函数 rn rn var lableId = []; rn for (var i = 118; i < 142; i++) rn lableId.push(i); rn rn lableId.push(150, 160); rn rn window.JsonCallBack = window.SongRecCallback = listAnalysis; rn rn cb = callback; rn rn injectScript("http://radio.cloud.music.qq.com/fcgi-bin/qm_guessyoulike.fcg?labelid=" + lableId[(lableId.length * Math.random()) | 0] + "&start=0&num=20&rnd=" + new Date().getTime()); rn ; rn rn QQMusic.searchSongs = function (key, callback) rn /// 搜索歌曲 rn /// 关键字 rn /// 回调函数 rn rn cb = callback; rn rn key = encodeURI(key); rn rn window.MusicJsonCallBack = searchAnalysis; rn rn injectScript("http://s.plcloud.music.qq.com/fcgi-bin/smartbox.fcg?o_utf8=1&utf8=1&key=" + key + "&inCharset=GB2312&outCharset=utf-8"); rn ; rn rn QQMusic.getSongInfo = function (song, callback) rn /// 获取歌曲信息 rn /// 歌曲对象 rn /// 回调函数 rn rn cb = function (info) rn info.name = song.name; rn info.singer = song.singer; rn info.imgUrl = getAlbumPicture(song.albumId); rn callback(info); rn ; rn rn window.JsonCallback = musicAnalysis; rn rn injectScript("http://qzone-music.qq.com/fcg-bin/fcg_mv_getinfo_bysongid.fcg?mids=" + song.mid + "&uin=10000&loginUin=0&hostUin=0&outCharset=utf-8"); rn ; rn rn function listAnalysis(data) rn /// 随机音乐列表解析 rn /// 随机列表数据 rn rn var playList = []; rn var regexp = new RegExp('(upload|stream)(\\d+)\\.(music\\.qzone\\.soso\\.com|qqmusic\\.qq\\.com)\\/(\\d+)\\.wma'); rn var replacement = function (word, x, a, y, b) rn return 'stream' + (10 + Number(a)) + '.qqmusic.qq.com/' + (18000000 + Number(b)) + '.mp3'; rn ; rn var songs = data.songs; rn for (var i = 0; i < songs.length; ++i) rn var song = songs[i]; rn var args = decodeURIComponent(song.data).replace(/\+/g, ' ').split('|'); rn var singerId = args[2]; rn var albumId = args[4]; rn var name = args[1]; rn var singer = args[3]; rn playList.push( rn name: name, rn singer: singer, rn url: decodeURIComponent(song.url).replace(regexp, replacement), rn imgUrl: getAlbumPicture(albumId), rn singerImgUrl: getSingerPicture(singerId) rn ); rn rn cb && cb(playList); rn ; rn rn function searchAnalysis(data) rn /// 搜索列表解析 rn /// 搜索列表数据 rn rn var songs = data.tips.song; rn var albums = data.tips.album; rn for (var i = songs.length; i--;) rn songs[i] = rn id: songs[i].id, rn mid: songs[i].mid, rn name: songs[i].name, rn singer: songs[i].singer_name, rn albumId: function () rn for (var n = 0; n < albums.length; n++) rn if (albums[n].singer_name == songs[i].singer_name) rn return albums[n].id; rn rn rn () rn ; rn rn cb && cb(songs); rn ; rn rn function musicAnalysis(data) rn /// 单曲音乐解析 rn /// 单曲音乐源数据 rn rn cb && cb( rn url: 'http://stream' + (10 + Number(data.num)) + '.qqmusic.qq.com/' + (30000000 + Number(data.mvlist[0].songid)) + '.mp3' rn ); rn ; rn rn w.QQMusic = QQMusic; rn(window); rnrnrnOK!~写好后我们怎么样才能获得数据并播放呢?rn rn好,下面请看~rn假设我们要获取到随机歌曲列表,那么只需要调用 rnQQMusic.getGuessYouLike(function(list) rn loadNewMusic(list[0]); rn); rnrnrn然后~我们再写一个loadNewMusic函数来播放它就可以了~rn rnfunction loadNewMusic(musicInfo) rn /// 加载新音乐 rn /// 音乐信息 rn rn var audio = new Audio(); rn audio.autoplay=true; rn audio.src=musicInfo.url; rn audio.load(); rn rnrnrnOk!运行一下吧!? 论坛

没有更多推荐了,返回首页