|
25
|
1 <!DOCTYPE html>
|
|
|
2
|
|
|
3 <html>
|
|
|
4 <head>
|
|
|
5 <title>WebGL dandy</title>
|
|
|
6 <script src="resources/J3DI.js"> </script>
|
|
|
7 <script src="resources/J3DIMath.js"> </script>
|
|
|
8 <script src="resources/jkl-parsexml.js"> </script>
|
|
|
9 <script src="resources/makePanel2.js"> </script>
|
|
|
10 <script src="resources/Character_state.js"> </script>
|
|
|
11 <script src="resources/Character.js"> </script>
|
|
|
12 <script src="resources/schedule.js"> </script>
|
|
|
13 <script src="resources/Player.js"> </script>
|
|
|
14 <script src="resources/enemy.js"> </script>
|
|
|
15 <script src="resources/bullet.js"> </script>
|
|
|
16 <script src="resources/collision.js"> </script>
|
|
|
17 <script src="resources/constKey.js"> </script>
|
|
|
18 <script src="resources/keybord.js"> </script>
|
|
|
19 <script src="resources/boss.js"> </script>
|
|
|
20 <script src="resources/parse.js"> </script>
|
|
|
21 <script src="resources/bom.js"> </script>
|
|
|
22 <script src="resources/pause.js"> </script>
|
|
|
23 <script src="resources/tama.js"> </script>
|
|
|
24 <script src="resources/sankaku.js"> </script>
|
|
|
25 <script src="resources/syokika.js"> </script>
|
|
|
26 <script src="resources/sound.js"> </script>
|
|
|
27 <script src="resources/const.js"> </script>
|
|
|
28 <script src="resources/charaTable.js"> </script>
|
|
|
29
|
|
|
30 <script id="vshader" type="x-shader/x-vertex">
|
|
|
31 uniform mat4 u_modelViewProjMatrix;
|
|
|
32 uniform mat4 u_normalMatrix;
|
|
|
33 uniform vec3 lightDir;
|
|
|
34
|
|
|
35 attribute vec3 vNormal;
|
|
|
36 attribute vec4 vTexCoord;
|
|
|
37 attribute vec4 vPosition;
|
|
|
38
|
|
|
39 varying float v_Dot;
|
|
|
40 varying vec2 v_texCoord;
|
|
|
41
|
|
|
42 void main()
|
|
|
43 {
|
|
|
44 gl_Position = u_modelViewProjMatrix * vPosition;
|
|
|
45 v_texCoord = vTexCoord.st;
|
|
|
46 vec4 transNormal = u_normalMatrix * vec4(vNormal,1);
|
|
|
47 v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
|
|
|
48 }
|
|
|
49 </script>
|
|
|
50
|
|
|
51
|
|
|
52 <script id="fshader" type="x-shader/x-fragment">
|
|
|
53 #ifdef GL_ES
|
|
|
54 precision mediump float;
|
|
|
55 #endif
|
|
|
56
|
|
|
57 uniform sampler2D sampler2d;
|
|
|
58
|
|
|
59 varying float v_Dot;
|
|
|
60 varying vec2 v_texCoord;
|
|
|
61
|
|
|
62 void main()
|
|
|
63 {
|
|
|
64 vec4 color = texture2D(sampler2d,v_texCoord);
|
|
|
65 // color += vec4(0.1,0.1,0.1,1);
|
|
|
66 // if(color.a == 1)color=vec4(1,0,0,1);
|
|
|
67 // else color=vec4(0,1,1,1);
|
|
|
68 gl_FragColor = vec4(color.xyz * v_Dot, color.a);
|
|
|
69 // gl_FragColor = vec4(color.xyz * v_Dot, 0.5);
|
|
|
70 }
|
|
|
71 </script>
|
|
|
72
|
|
|
73 <script>
|
|
|
74
|
|
|
75 //画面(canvas)の大きさ
|
|
|
76 var w = 1024;
|
|
|
77 var h = 640;
|
|
|
78 function init()
|
|
|
79 {
|
|
|
80 var gl = initWebGL("example", "vshader", "fshader",
|
|
|
81 [ "vNormal", "vTexCoord", "vPosition"],
|
|
|
82 [ 0, 0, 0, 1 ], 10000);
|
|
|
83
|
|
|
84 gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);
|
|
|
85 gl.uniform1i(gl.getUniformLocation(gl.program, "sampler2d"), 0);
|
|
|
86
|
|
|
87 gl.enable(gl.TEXTURE_2D);
|
|
|
88
|
|
|
89 sankakuf();//mycos,mysinの作成 sankaku.js
|
|
|
90 parseXml(gl);//parse.js
|
|
|
91 initEnemyTable(gl);//parseXmlの後に呼ぶこと
|
|
|
92
|
|
|
93 return gl;
|
|
|
94 }
|
|
|
95
|
|
|
96 width = -1;
|
|
|
97 height = -1;
|
|
|
98
|
|
|
99 function reshape(ctx, ortho)
|
|
|
100 {
|
|
|
101 var canvas = document.getElementById('example');
|
|
|
102 if (canvas.width == width && canvas.width == height)
|
|
|
103 return;
|
|
|
104
|
|
|
105
|
|
|
106 width = canvas.width;
|
|
|
107 height = canvas.height;
|
|
|
108
|
|
|
109 ctx.viewport(0, 0, width, height);
|
|
|
110
|
|
|
111 ctx.perspectiveMatrix = new J3DIMatrix4();
|
|
|
112 // ctx.perspectiveMatrix.ortho(50, -150, 0, -140, -1000, 10000);
|
|
|
113 ctx.perspectiveMatrix.ortho(ortho.left, -ortho.right, ortho.top, -ortho.bottom, 0, 10000);
|
|
|
114
|
|
|
115 // ctx.perspectiveMatrix.perspective(30, width/height, 1, 10000);
|
|
|
116 }
|
|
|
117
|
|
|
118
|
|
|
119
|
|
|
120 function loop(ctx, ortho)
|
|
|
121 {
|
|
|
122 reshape(ctx, ortho);
|
|
|
123 ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);
|
|
|
124
|
|
|
125 Player(ctx, jiki, pad, ortho);
|
|
|
126
|
|
|
127 obj_draw(ctx);
|
|
|
128
|
|
|
129 PutBom(ctx);
|
|
|
130 pause();
|
|
|
131
|
|
|
132
|
|
|
133 ctx.flush();
|
|
|
134
|
|
|
135 filpcount++;
|
|
|
136 schedule();
|
|
|
137
|
|
|
138 state_update();
|
|
|
139
|
|
|
140 collision_detect();
|
|
|
141 delete_obj( ctx )
|
|
|
142
|
|
|
143 framerate.snapshot();
|
|
|
144 }
|
|
|
145
|
|
|
146 function opening(ctx, ortho)
|
|
|
147 {
|
|
|
148 reshape(ctx, ortho);
|
|
|
149 ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);
|
|
|
150
|
|
|
151 PutSpriteF(ctx, 100, 70, 1, font[10]);
|
|
|
152 PutSpriteF(ctx, 170, 50, 1, font[11]);
|
|
|
153 PutSpriteF(ctx, 40, 120, 1, font[12]);
|
|
|
154
|
|
|
155 ctx.flush();
|
|
|
156
|
|
|
157 if(pad.start == 0) {setTimeout(o, 100);}
|
|
|
158 if(pad.start != 0) {
|
|
|
159 jiki.bf = true;
|
|
|
160 pad.st = 1;
|
|
|
161 gameflage = 1;
|
|
|
162 SoundPlay(0);
|
|
|
163 setInterval(f, 10);
|
|
|
164 }
|
|
|
165 }
|
|
|
166 function start()
|
|
|
167 {
|
|
|
168 var ortho = makeOrthoPara(0,200,140,0);
|
|
|
169
|
|
|
170 var c = document.getElementById("example");
|
|
|
171
|
|
|
172
|
|
|
173 //画面の大きさ
|
|
|
174 c.width = w;
|
|
|
175 c.height = h;
|
|
|
176
|
|
|
177 var ctx = init();
|
|
|
178
|
|
|
179
|
|
|
180 currentAngle = 0;
|
|
|
181 incAngle = 10;
|
|
|
182 f = function() { loop(ctx, ortho) };
|
|
|
183 o = function() {opening(ctx, ortho)}
|
|
|
184 setTimeout(o, 10);
|
|
|
185 framerate = new Framerate("framerate");
|
|
|
186 }
|
|
|
187 </script>
|
|
|
188 <style type="text/css">
|
|
|
189 canvas {
|
|
|
190 border: 2px solid black;
|
|
|
191 }
|
|
|
192 </style>
|
|
|
193 </head>
|
|
|
194 <body onload="start()" onkeydown="keybordDown()" onkeypress="keybordPress()" onkeyup="keybordUp()" style='overflow:hidden'>
|
|
|
195 <!--<body onload = "start()" style='overflow:hidden'> -->
|
|
|
196 <canvas id="example">
|
|
|
197 There is supposed to be an example drawing here, but it's not important.
|
|
|
198 </canvas>
|
|
|
199 <div id="framerate"></div>
|
|
|
200 <div id="console"></div>
|
|
|
201
|
|
|
202 <img id="test" style="border:1px solid red">
|
|
|
203
|
|
|
204 </body>
|
|
|
205 </html>
|
