|
8
|
1 <!DOCTYPE html>
|
|
|
2 <!--
|
|
|
3 /*
|
|
|
4 * Copyright (C) 2009 Apple Inc. All Rights Reserved.
|
|
|
5 *
|
|
|
6 * Redistribution and use in source and binary forms, with or without
|
|
|
7 * modification, are permitted provided that the following conditions
|
|
|
8 * are met:
|
|
|
9 * 1. Redistributions of source code must retain the above copyright
|
|
|
10 * notice, this list of conditions and the following disclaimer.
|
|
|
11 * 2. Redistributions in binary form must reproduce the above copyright
|
|
|
12 * notice, this list of conditions and the following disclaimer in the
|
|
|
13 * documentation and/or other materials provided with the distribution.
|
|
|
14 *
|
|
|
15 * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
|
|
|
16 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
|
|
17 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
|
|
18 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
|
|
|
19 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
|
|
20 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
|
|
|
21 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
|
|
|
22 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
|
|
|
23 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
|
|
24 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
|
25 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
|
26 */
|
|
|
27 -->
|
|
|
28 <html>
|
|
|
29 <head>
|
|
|
30 <title>WebGL dandy</title>
|
|
|
31 <script src="resources/CanvasMatrix.js"> </script>
|
|
|
32 <script src="resources/utils3d.js"> </script>
|
|
|
33 <script src="resources/jkl-parsexml.js"> </script>
|
|
|
34 <script src="resources/makePanel.js"> </script>
|
|
|
35 <script src="resources/Character_state.js"> </script>
|
|
|
36 <script src="resources/Character.js"> </script>
|
|
|
37 <script src="resources/schedule.js"> </script>
|
|
|
38 <script src="resources/Player.js"> </script>
|
|
|
39 <script src="resources/enemy.js"> </script>
|
|
|
40 <script src="resources/bullet.js"> </script>
|
|
|
41 <script src="resources/collision.js"> </script>
|
|
|
42 <script src="resources/constKey.js"> </script>
|
|
|
43 <script src="resources/keybord.js"> </script>
|
|
|
44 <script src="resources/boss.js"> </script>
|
|
|
45 <script src="resources/parse.js"> </script>
|
|
9
|
46 <script src="resources/bom.js"> </script>
|
|
11
|
47 <script src="resources/pause.js"> </script>
|
|
|
48 <script src="resources/tama.js"> </script>
|
|
|
49 <script src="resources/sankaku.js"> </script>
|
|
12
|
50 <script src="resources/syokika.js"> </script>
|
|
8
|
51
|
|
|
52 <script id="vshader" type="x-shader/x-vertex">
|
|
|
53 uniform mat4 u_modelViewProjMatrix;
|
|
|
54 uniform mat4 u_normalMatrix;
|
|
|
55 uniform vec3 lightDir;
|
|
|
56
|
|
|
57 attribute vec3 vNormal;
|
|
|
58 attribute vec4 vTexCoord;
|
|
|
59 attribute vec4 vPosition;
|
|
|
60
|
|
|
61 varying float v_Dot;
|
|
|
62 varying vec2 v_texCoord;
|
|
|
63
|
|
|
64 void main()
|
|
|
65 {
|
|
|
66 gl_Position = u_modelViewProjMatrix * vPosition;
|
|
|
67 v_texCoord = vTexCoord.st;
|
|
|
68 vec4 transNormal = u_normalMatrix * vec4(vNormal,1);
|
|
|
69 v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
|
|
|
70 // v_Dot = min(dot(transNormal.xyz, lightDir), 1.0);
|
|
|
71 }
|
|
|
72 </script>
|
|
|
73
|
|
|
74 <script id="fshader" type="x-shader/x-fragment">
|
|
|
75 uniform sampler2D sampler2d;
|
|
|
76
|
|
|
77 varying float v_Dot;
|
|
|
78 varying vec2 v_texCoord;
|
|
|
79
|
|
|
80 void main()
|
|
|
81 {
|
|
|
82 vec4 color = texture2D(sampler2d,v_texCoord);
|
|
12
|
83 // color += vec4(0.1,0.1,0.1,1);
|
|
|
84 // if(color.a == 1)color=vec4(1,0,0,1);
|
|
|
85 // else color=vec4(0,1,1,1);
|
|
8
|
86 gl_FragColor = vec4(color.xyz * v_Dot, color.a);
|
|
|
87 // gl_FragColor = vec4(color.xyz * v_Dot, 0.5);
|
|
|
88 }
|
|
|
89 </script>
|
|
|
90
|
|
|
91 <script>
|
|
|
92 //audioの試運転
|
|
|
93 var audio = window.Audio && new Audio("sound/sample.wav");
|
|
|
94 var audioShoot = window.Audio && new Audio("sound/shota.wav");
|
|
|
95
|
|
|
96 //画面(canvas)の大きさ
|
|
|
97 var w = 1024;
|
|
|
98 var h = 640;
|
|
|
99
|
|
|
100
|
|
|
101
|
|
|
102 function init()
|
|
|
103 {
|
|
|
104 var gl = initWebGL("example", "vshader", "fshader",
|
|
|
105 [ "vNormal", "vTexCoord", "vPosition"],
|
|
|
106 [ 0, 0, 0, 1 ], 10000);
|
|
|
107
|
|
|
108 gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);
|
|
|
109 gl.uniform1i(gl.getUniformLocation(gl.program, "sampler2d"), 0);
|
|
|
110
|
|
|
111 gl.enable(gl.TEXTURE_2D);
|
|
|
112
|
|
11
|
113 sankakuf();//mycos,mysinの作成 sankaku.js
|
|
9
|
114
|
|
|
115 parseXml(gl);//parse.js
|
|
8
|
116
|
|
|
117 return gl;
|
|
|
118 }
|
|
|
119
|
|
|
120 width = -1;
|
|
|
121 height = -1;
|
|
|
122
|
|
|
123 function reshape(ctx, ortho)
|
|
|
124 {
|
|
|
125 var canvas = document.getElementById('example');
|
|
|
126 if (canvas.width == width && canvas.width == height)
|
|
|
127 return;
|
|
|
128
|
|
|
129
|
|
|
130 width = canvas.width;
|
|
|
131 height = canvas.height;
|
|
|
132
|
|
|
133 ctx.viewport(0, 0, width, height);
|
|
|
134
|
|
|
135 ctx.perspectiveMatrix = new CanvasMatrix4();
|
|
|
136 ctx.perspectiveMatrix.lookat(0,0,-60, 0, 0, 0, 0, 1, 0);
|
|
|
137 ctx.perspectiveMatrix.ortho(ortho.left, ortho.right, ortho.top, -ortho.bottom, 0, 10000);
|
|
13
|
138 // ctx.perspectiveMatrix.ortho(-600, 600, 600, -600, 0, 10000);
|
|
8
|
139 }
|
|
|
140
|
|
|
141
|
|
|
142
|
|
|
143 function loop(ctx, ortho)
|
|
|
144 {
|
|
|
145 reshape(ctx, ortho);
|
|
|
146 ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);
|
|
|
147
|
|
12
|
148
|
|
|
149
|
|
8
|
150 Player(ctx, jiki, pad, ortho);
|
|
11
|
151
|
|
8
|
152 obj_draw(ctx);
|
|
13
|
153
|
|
11
|
154 PutBom(ctx);
|
|
|
155 pause();
|
|
|
156
|
|
|
157
|
|
8
|
158 ctx.flush();
|
|
|
159
|
|
|
160 filpcount++;
|
|
|
161 schedule();
|
|
11
|
162
|
|
8
|
163 state_update();
|
|
11
|
164
|
|
8
|
165 collision_detect();
|
|
11
|
166 delete_obj( ctx )
|
|
9
|
167
|
|
8
|
168 framerate.snapshot();
|
|
|
169 }
|
|
|
170
|
|
11
|
171 function opening(ctx, ortho)
|
|
|
172 {
|
|
|
173 reshape(ctx, ortho);
|
|
|
174 ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);
|
|
|
175
|
|
|
176 PutSpriteF(ctx, 100, 70, 1, font[10]);
|
|
|
177 PutSpriteF(ctx, 170, 50, 1, font[11]);
|
|
|
178 PutSpriteF(ctx, 40, 120, 1, font[12]);
|
|
|
179
|
|
12
|
180
|
|
11
|
181 ctx.flush();
|
|
12
|
182
|
|
|
183 if(pad.start == 0) {setTimeout(o, 100);}
|
|
|
184 if(pad.start != 0) {
|
|
|
185 jiki.bf = true;
|
|
|
186 pad.st = 1;
|
|
|
187 gameflage = 1;
|
|
|
188 audio && audio.play();
|
|
|
189 setInterval(f, 10);
|
|
|
190 }
|
|
11
|
191 }
|
|
8
|
192 function start()
|
|
|
193 {
|
|
13
|
194 // event.onkeydown = keydown;
|
|
|
195 // event.onkeypress = keypress;
|
|
|
196 // event.onkeyup = keyup;
|
|
|
197
|
|
8
|
198 var ortho = makeOrthoPara(0,200,140,0);
|
|
|
199
|
|
|
200 var c = document.getElementById("example");
|
|
|
201
|
|
|
202
|
|
|
203 //画面の大きさ
|
|
|
204 c.width = w;
|
|
|
205 c.height = h;
|
|
|
206
|
|
|
207 var ctx = init();
|
|
|
208
|
|
|
209 currentAngle = 0;
|
|
11
|
210 // var f = function() { loop(ctx, ortho) };
|
|
|
211 f = function() { loop(ctx, ortho) };
|
|
|
212 o = function() {opening(ctx, ortho)}
|
|
|
213 setTimeout(o, 10);
|
|
|
214 // if(pad.start != 0) setInterval(f, 10);
|
|
|
215 // setInterval(f, 10);
|
|
8
|
216 framerate = new Framerate("framerate");
|
|
|
217 }
|
|
|
218 </script>
|
|
|
219 <style type="text/css">
|
|
|
220 canvas {
|
|
|
221 border: 2px solid black;
|
|
|
222 }
|
|
|
223 </style>
|
|
|
224 </head>
|
|
13
|
225 <body onload="start()" onkeydown="keybordDown()" onkeypress="keybordPress()" onkeyup="keybordUp()" style='overflow:hidden'>
|
|
|
226 <!--<body onload = "start()" style='overflow:hidden'> -->
|
|
8
|
227 <canvas id="example">
|
|
|
228 There is supposed to be an example drawing here, but it's not important.
|
|
|
229 </canvas>
|
|
|
230 <div id="framerate"></div>
|
|
|
231 <div id="console"></div>
|
|
|
232
|
|
|
233 <img id="test" style="border:1px solid red">
|
|
|
234
|
|
|
235 </body>
|
|
|
236 </html>
|
