论坛徽章:: 0

电梯直达

1楼 [收藏(0)] [报告]

发表于 2011-12-09 17:22 |只看该作者 |倒序浏览

html5游戏--初试

我觉得，html5很有前景，移动终端智能化、普及是一个大趋势，html5的应用有跨平台这一大的优势，传统的应用很依赖终端的系统，同样一个应用，html5也能实现，它就可以在所有的智能终端下使用，而且又有本地存储，离线使用等特性，这使得它成为未来的主流
      用html5开发游戏是一件很激动人心的事，好的，开始我的html5游戏之路吧
      先不看别人怎么写的，先去看一下html5给我们提供什么东西，然后说说我的想法吧
      经过阅读html5 Canvas API，发现，提供的东西不多，无非是一些数学图形画法，有点、线、矩形等，然后还有一个外加载图像的功能，不过有一个激动人心的东西，就是它也提供像素级处理，这个强大，因为直接对像素处理可以进行复杂的图像变换，比强像ps里面的滤镜效果，除此之外，还有一些样式控制，状态控制。这个Canvas让我想到了和Ps的里的对比，只是让我们直观了解下Canvas
      首先，Canvas里的beginPath等就是Ps里的路径，stroke就像是描边，fill就是油漆桶填充，Gradient就是渐变，bezierCurveTo就是钢笔绘贝塞尔曲线
      做动画，首先想到的是，像html的div移动一样，不断改变div的css值就行了，后来发现，Canvas是绘图的，不是做动画的，它没有图层的概念，你将某个图片放到画布上，它就是整一个图片了，你不可能控制这个图片的移动了。后来想，那就不移动它，再重新画一张就行了

      以Flash的模式来用Canvas做游戏动画
      舞台、祯、元件这些概念用在Canvas上
      想一想Flash的逐祯动画的制作过程
      一个小丑的移动过程：每一祯都是一幅图像，每一幅图像中，小丑向前移动一步，Flash控制每隔很短的时间显示一祯，这样就形成了一个动画
      对就Canvas里就可以这么做，一个舞台对象，舞台上有各种小丑（元件），一祯一祯的显示，这一祯显示完了就把舞台清空，然后重新绘制下一祯
      Flash里边涉及两个问题：
      一条主控时间线，控制舞台的显示，然后对于每个元件，可能还会一个自己的时间线，就是当元件是动画的时候
      那么在Canvas里，就可以对应着这样的设计模式
      构造一个舞台对像Stage，将各个元件放在舞台上，不要时间主线，Stage有一个擦空原来舞台，根据Stage的各元件状态重绘舞台的方法，每一个元件要做动画的时候就生成一个自己的时间线，比如小丑要移动的时候，可以在任何时候要求舞台Stage重绘舞台，这样，可能会在某个时刻，没有一个元件要求重绘舞台，那么Canvas的祯频就是0，这样的帧频是动态变化的

Javascript代码

1.var Stage = {};
2.Stage.paint(){
3. //根据舞台上每个小丑当前时刻的状态，重绘舞台
4.}
5.function Sprite(){
6. this.go = function(){
7. setInterval(goAhead,100);
8. function goAhead(){
9. //一些状态改变代码.......
10. Stage.paint();//要求舞台重绘
11. }
12. }
13.}
14.function Sprite2(){
15. This.go = function(){
16. setInterval(goAhead,100);
17. function goAhead(){
18. //一些状态改变代码.......
19. Stage.paint();//要求舞台重绘
20. }
21. }
22.}
var Stage = {};
Stage.paint(){
//根据舞台上每个小丑当前时刻的状态，重绘舞台
}
function Sprite(){
this.go = function(){
setInterval(goAhead,100);
function goAhead(){
//一些状态改变代码.......
Stage.paint();//要求舞台重绘
}
}
}
function Sprite2(){
This.go = function(){
setInterval(goAhead,100);
function goAhead(){
//一些状态改变代码.......
Stage.paint();//要求舞台重绘
}
}
}

复制代码

另外一种设计模式是，只有一个时间线，每隔固定时间显示一祯，就是每隔一定时间舞台Stage步进一祯，步进的时候舞台上所有元件同时步进一次，任何元件要产生动画的时候，加入到这个时间主线中，跟着Stage步进而步进，这样的帧频是固定的，即使在不产生动画的情况下，Stage也是在不停地重绘着
Javascript代码

1.var Stage = {};
2.Stage.players = {
3. //...将小丑添加至舞台
4.};
5.Stage.step(){
6. for(i in Stage.players){
7. Stage.players.step();//舞台上每个小丑步进
8. }
9. setTimeout(this.step,100);//舞台每隔一定时间步进
10.}
11.function Sprite(){
12. this.step = function(){
13. //......步进
14. }
15.}
var Stage = {};
Stage.players = {
//...将小丑添加至舞台
};
Stage.step(){
for(i in Stage.players){
Stage.players.step();//舞台上每个小丑步进
}
setTimeout(this.step,100);//舞台每隔一定时间步进
}
function Sprite(){
this.step = function(){
//......步进
}
}
写了一个简单的控制小丑移动的程序
]

复制代码

Javascript代码

1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2.<html lang="en">
3.<head>
4. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5. <title></title>
6.</head>
7.<body>
8.<canvas id='canvas' width="800" height="800"></canvas>
9.<script type='text/javascript' src='jquery.js'></script>
10.<script type='text/javascript'>
11.var kit = {};
12.var FPS = 30;
13.kit.imgArr = ["img/player.gif","img/bg.png"];
14.kit.load = function(){
15. this.img = [];
16. for(i in this.imgArr){
17. this.img[i] = new Image();
18. this.img[i].src = this.imgArr[i];
19. }
20.}
21.kit.load();
22.var ctx = document.getElementById("canvas").getContext("2d");
23.var controller = {};//控制对象
24.controller.stage = {};//舞台对象
25.controller.stage.players = {//舞台上的小丑们
26. scen:new Scen(),
27. player1:new Sprite()//一个小精灵
28.}
29.controller.stage.paint = function(){//绘制桢
30. ctx.fillStyle = "#fff";//清除前桢
31. ctx.fillRect(0,0,800,800);
32. for(every in this.players){
33. this.players[every].paint();//小丑们添加动作到舞台
34. }
35.}
36.controller.stage.endPaint = function(){
37. ctx.fillStyle = "#fff";//清除前桢
38. ctx.fillRect(0,0,800,800);
39. for(every in this.players){
40. this.players[every].endPaint();//小丑们添加动作到舞台
41. }
42.}
43.controller.walk = function(){//让精灵前进吧
44. var that = this;
45. clearInterval(kit.playerTime);
46. function go(){
47. that.stage.players.player1.walk();//精灵自己走一步吧
48. that.stage.paint();//绘制此桢
49. }
50. kit.playerTime = setInterval(go,1000/FPS);
51.}
52.
53.controller.back = function(){//让精灵后退吧
54. var that = this;
55. clearInterval(kit.playerTime);
56. function back(){
57. that.stage.players.player1.back();//精灵自己走一步吧
58. that.stage.paint();//绘制此桢
59. }
60. kit.playerTime = setInterval(back,1000/FPS);
61.}
62.controller.jump = function(){
63. var that = this;
64. clearInterval(kit.playerTime);
65. var count = 0;
66. function jump(){
67. count++;
68. that.stage.players.player1.jump();
69. that.stage.paint();
70. if(count < 50){
71. setTimeout(jump,1000/FPS);
72. }
73.
74. }
75. jump();
76.}
77.function Sprite(){//一个精灵类
78. this.stageCount = 0;//记录精灵向舞台添加的次数
79. this.nowDot = [30,202];//精灵现在的坐标
80. this.towards = 0;
81. this.frame = [];
82. this.frame[0] = [
83. [163,0,28,60,0,0,28,60]
84. ];
85. this.frame[1] = [
86. [140,0,22,60,0,0,22,60],
87. [112,0,28,60,0,0,28,60],
88. [81,0,31,60,0,0,31,60]
89. ];
90. this.frame[2] = [
91. [0,0,22,60,0,0,22,60],
92. [22,0,28,60,0,0,28,60],
93. [50,0,31,60,0,0,31,60]
94. ];
95. this.frame[3] = [
96. ];
97. var i = 0;
98. this.walk = function(){//精灵向前走
99. this.nowDot[0]++;
100. this.towards = 1;
101. this.stageCount++;
102. }
103. this.back = function(){//精灵向后走
104. this.nowDot[0]--;
105. this.towards = 2;
106. this.stageCount++;
107. }
108. this.jump = function(){
109. this.nowDot[1]--;
110. this.stageCount++;
111. }
112. this.paint = function(){//精灵添加动作到舞台
113. var i = this.stageCount/4 % this.frame[1].length;
114. i = parseInt(i);
115. var t = this.frame[this.towards];
116. ctx.drawImage(kit.img[0],t[i][0],t[i][1],t[i][2],t[i][3],this.nowDot[0],this.nowDot[1],t[i][6]*2,t[i][7]*2);
117. }
118. this.endPaint = function(){
119. i = 0;
120. var t = this.frame[0];
121. ctx.drawImage(kit.img[0],t[i][0],t[i][1],t[i][2],t[i][3],this.nowDot[0],this.nowDot[1],t[i][6]*2,t[i][7]*2);
122. }
123.}
124.function Scen(){
125. this.paint = function (){
126. ctx.drawImage(kit.img[1],0,0);
127. }
128. this.endPaint = this.paint;
129.}
130.var state = 0;
131.$(document).keydown(function(e){
132. if(state > 0) return;
133. if(e.keyCode == 37) {
134. controller.back();
135. state ++;
136. }
137. if(e.keyCode == 39){
138. controller.walk();
139. state++;
140. }
141. if(e.keyCode == 38){
142. controller.jump();
143. state++;
144. }
145.});
146.$(document).keyup(function(e){
147. state = 0;
148. clearInterval(kit.playerTime);
149. controller.stage.endPaint();
150.});
151.</script>
152.</body>
153.</html>

复制代码

HTML

文库|博客

寂寞冲咖啡

稍有积蓄

论坛徽章:: 0

2楼 [报告]

发表于 2011-12-24 20:22 |只看该作者

谢谢分享希望于楼主多多交流

实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？

返回列表

Chinaunix › 论坛 › 程序设计 › Web开发 › html5游戏--初试

html5游戏--初试 [复制链接]