登录  /  注册
首页 > web前端 > H5教程 > 正文

h5的游戏开发详解

php中世界最好的语言
发布: 2018-05-11 13:42:20
原创
14170人浏览过

这次给大家带来h5的游戏开发详解,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 <p style="text-align: left;">View Code</p><p style="text-align: left;">  2.获取鼠标位置:</p><pre class="brush:php;toolbar:false"> (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 <p style="text-align: left;">6.<a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a><a href="http://www.php.cn/code/6286.html" target="_blank">面向对象</a>的能力没有那些高级语言强,很多功能的实现都是巧妙的运用了数组。比如洗牌的动作。</p><pre class="brush:php;toolbar:false">      //洗牌就是更换了牌的位置  function shuffle() {  var i = deck.length - 1;//deck代表一副牌
  var s;  while (i&gt;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  1.0= 1.0= (sx+t*(fx-sx))-= (sy +t*(fy-sy))-= (dx*dx) +(dy* (rt<p>相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!</p><p>推荐阅读:</p><p><a href="http://www.php.cn/js-tutorial-388844.html" target="_blank">Nodejs路由与控制器的使用</a><br></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388846.html" target="_blank">html5动画实现舞动的雨伞 </a><br></p><p style="text-align: left;"><a href="http://www.php.cn/css-tutorial-388836.html" target="_blank">css3的聊天气泡样式</a><br></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388834.html" target="_blank">怎样用nodejs搭建服务器</a><br></p>
登录后复制

以上就是h5的游戏开发详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号