﻿ h5的游戏开发详解 - 鸿网互联

# h5的游戏开发详解

http://pan.baidu.com/s/1dD29Nhf

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.beginPath();
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:
}

}```

4. 添加事件监听：

```      var canvas1 = document.getElementById('canvas');

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*`

Nodejs路由与控制器的使用

html5动画实现舞动的雨伞

css3的聊天气泡样式

【转自：美国cn2服务器 http://www.558idc.com/mg.html欢迎留下您的宝贵建议】

<