html5游戏开发的示例分析
小编给大家分享一下html5游戏开发的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联公司主营赣州网站建设的网络公司,主营网站建设方案,重庆APP开发公司,赣州h5微信小程序开发搭建,赣州网站营销推广欢迎赣州等地区企业咨询
一直对HMTL5做游戏饶有兴趣,而这本书刚好就是HTML5 2游戏初级入门的书。Demo简单注释详细,可以拿来练练手,一个星期左右就可以读完。若要追求酷炫高大上效果,这本书恐怕要让你失望了。但作为上手书还是不错的。
http://pan.baidu.com/s/1dD29Nhf
一共十章,都是类似于下面的小游戏,从浅到深。 Demo下载
图形和图片的绘制都很简单,关键的地方还是用数组和定时器去实现游戏的业务逻辑和效果。简单的本地存储、声音视频播放。但含金量太少了,不能满足学游戏的胃口。当当上面评价却不错。 书的出发点也是做基本的入门。The Essential Guide to Html5
1.基本图形:
//ball 球function Ball(sx, sy, rad, stylestring) { this.sx = sx; this.sy = sy; this.rad = rad; this.draw = drawball; this.moveit = moveball; this.fillstyle = stylestring; }function drawball() { ctx.fillStyle = this.fillstyle; ctx.beginPath(); //ctx.fillStyle= rgb(0,0,0); ctx.arc(this.sx, this.sy, this.rad, 0, Math.PI * 2, true); ctx.fill(); }function moveball(dx, dy) { this.sx += dx; this.sy += dy; }//Rect 方形function Myrectangle(sx, sy, swidth, sheight, stylestring) { this.sx = sx; this.sy = sy; this.swidth = swidth; this.sheight = sheight; this.fillstyle = stylestring; this.draw = drawrects; this.moveit = moveball;//move方法是一样的}function drawrects() { ctx.fillStyle = this.fillstyle; ctx.fillRect(this.sx, this.sy, this.swidth, this.sheight); }//多边形function Polycard(sx, sy, rad, n, frontbgcolor, backcolor, polycolor) { this.sx = sx; this.sy = sy; this.rad = rad; this.draw = drawpoly; this.frontbgcolor = frontbgcolor; this.backcolor = backcolor; this.polycolor = polycolor; this.n = n; this.angle = (2 * Math.PI) / n; //parens may not be needed. this.moveit = generalmove; }//画多边形function drawpoly() { ctx.fillStyle = this.frontbgcolor; ctx.strokeStyle = this.backcolor; ctx.fillRect(this.sx - 2 * this.rad, this.sy - 2 * this.rad, 4 * this.rad, 4 * this.rad); ctx.beginPath(); ctx.fillStyle = this.polycolor; var i; var rad = this.rad; ctx.beginPath(); ctx.moveTo(this.sx + rad * Math.cos(-.5 * this.angle), this.sy + rad * Math.sin(-.5 * this.angle)); for (i = 1; i < this.n; i++) { ctx.lineTo(this.sx + rad * Math.cos((i - .5) * this.angle), this.sy + rad * Math.sin((i - .5) * this.angle)); } ctx.fill(); }function generalmove(dx, dy) { this.sx += dx; this.sy += dy; }//图像function Picture(sx, sy, swidth, sheight, imga) { this.sx = sx; this.sy = sy; this.img = imga; this.swidth = swidth; this.sheight = sheight; this.draw = drawAnImage; }function drawAnImage() { ctx.drawImage(this.img, this.sx, this.sy, this.swidth, this.sheight); }
View Code
2.获取鼠标位置:
(ev.layerX || ev.layerX == 0) { mx == (ev.offsetX || ev.offsetX == 0) { mx ==
3. 获取按键输入:
function getkey(event) { var keyCode; if(event == null) { keyCode = window.event.keyCode; window.event.preventDefault(); } else { keyCode = event.keyCode; event.preventDefault(); } switch(keyCode) { case 68: //按下D deal(); break; case 72: //按下H playerdone(); break; case 78: //按下N newgame(); break; default: alert("Press d, h, or n."); } }
4. 添加事件监听:
var canvas1 = document.getElementById('canvas'); canvas1.addEventListener('mousedown', startwall, false);//false表示事件冒泡的顺序。 canvas1.addEventListener('mousemove', stretchwall, false); canvas1.addEventListener('mouseup', finish, false);
5.运动的图形一般都是统一加载在一个数组中,定时器每触发一次就重绘一次。每一个对象都有draw方法。
var mypent = new Token(100, 100, 20, "rgb(0,0,250)", 5); everything.push(mypent); function drawall() { ctx.clearRect(0, 0, cwidth, cheight); var i; for (i = 0; i < everything.length; i++) { everything[i].draw(); } }
6.javascript面向对象的能力没有那些高级语言强,很多功能的实现都是巧妙的运用了数组。比如洗牌的动作。
//洗牌就是更换了牌的位置 function shuffle() { var i = deck.length - 1;//deck代表一副牌 var s; while (i>0) {//这里循环一次 每张牌平均更换了两次位置 s = Math.floor(Math.random()*(i+1));//随机范围是0-i (包括i) swapindeck(s,i);//交换位置 i--; } } function swapindeck(j,k) { var hold = new MCard(deck[j].num,deck[j].suit,deck[j].picture.src); //MCard 是一张牌的对象。 deck[j] = deck[k]; deck[k] = hold; }
7.很多地方要用到数学知识:比如小球碰撞,就需要改变x和y的运动方向即可。判断是否在击中目标。就是判断xy是否在一定的区间。但判断一个移动的物体能不能经过前面的路,且不能能穿越墙。就有点复杂了。像迷宫那个游戏。本质是要判断线段到球心的距离不小于球的半径。
.sx +=.sy += (i = 0; i < walls.length; i++= (intersect(wall.sx, wall.sy, wall.fx, wall.fy, .sx, .sy, .sx -=.sy -== fx -= fy -= 0.0 - ((sx - cx) * dx + (sy - cy) * dy) / ((dx * dx) + (dy * (t < 0.0= 0.0 (t > 1.0= 1.0= (sx+t*(fx-sx))-= (sy +t*(fy-sy))-= (dx*dx) +(dy* (rt<(rad*
以上是“html5游戏开发的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
分享文章:html5游戏开发的示例分析
网页网址:http://scjbc.cn/article/jijipp.html