Changeset 17676

Show
Ignore:
Timestamp:
08/15/08 21:15:42 (5 months ago)
Author:
amachang
Message:

ちょこっと変更

Files:
1 modified

Legend:

Unmodified
Added
Removed

  • docs/amachang/20080813-procamp2008/index.html

    r17675 r17676  
    22912291 
    22922292                <div> 
    2293                     <h3>配列が継承しているオブジェクト</h3> 
    2294  
    2295 <pre><code>&lt;!DOCTYPE html&gt; 
    2296 &lt;html&gt; 
    2297     &lt;head&gt; 
    2298         &lt;meta charset=utf-8&gt; 
    2299         &lt;title&gt;Sample&lt;/title&gt; 
    2300         &lt;script type="text/javascript"&gt; 
    2301  
    2302             <strong>Array.prototype.each = function(fn) {</strong> 
    2303                 <strong>var result = [];</strong> 
    2304                 <strong>for (var i = 0; i &lt; this.length; i ++) {</strong> 
    2305                     <strong>result[i] = fn(this[i], i);</strong> 
    2306                 <strong>}</strong> 
    2307                 <strong>return result;</strong> 
    2308             <strong>};</strong> 
    2309  
    2310             var ctx; 
    2311             var blocks = [ 
    2312                 [ 
    2313                     [1,1], 
    2314                     [0,1], 
    2315                     [0,1] 
    2316                 ], 
    2317                 [ 
    2318                     [1,1], 
    2319                     [1,0], 
    2320                     [1,0] 
    2321                 ], 
    2322                 [ 
    2323                     [1,1], 
    2324                     [1,1] 
    2325                 ], 
    2326                 [ 
    2327                     [1,0], 
    2328                     [1,1], 
    2329                     [1,0] 
    2330                 ], 
    2331                 [ 
    2332                     [1,0], 
    2333                     [1,1], 
    2334                     [0,1] 
    2335                 ], 
    2336                 [ 
    2337                     [0,1], 
    2338                     [1,1], 
    2339                     [1,0] 
    2340                 ], 
    2341                 [ 
    2342                     [1], 
    2343                     [1], 
    2344                     [1], 
    2345                     [1] 
    2346                 ] 
    2347             ]; 
    2348  
    2349             var block = blocks[Math.floor(Math.random() * blocks.length)]; 
    2350             var posx = 0, posy = 0; 
    2351             var mapWidth = 10, mapHeight = 20; 
    2352  
    2353             <strong>var map = new Array(mapHeight).each(function() {</strong> 
    2354                 <strong>return new Array(mapWidth).each(function() { return 0; });</strong> 
    2355             <strong>});</strong> 
    2356  
    2357             var load = function() { 
    2358                 var elmTarget = document.getElementById('target'); 
    2359                 ctx = elmTarget.getContext('2d'); 
    2360  
    2361                 setInterval(function() { 
    2362                     ctx.clearRect(0, 0, 200, 400); 
    2363                     paintMatrix(block, posx, posy, 'rgb(255, 0, 0)'); 
    2364                     paintMatrix(map, 0, 0, 'rgb(128, 128, 128)'); 
    2365  
    2366                     if (check(map, block, posx, posy + 1)) { 
    2367                         posy = posy + 1; 
    2368                     } 
    2369                     else { 
    2370                         mergeMatrix(map, block, posx, posy); 
    2371                         clearRows(map); 
    2372                         posx = 0; posy = 0; 
    2373                         block = blocks[Math.floor(Math.random() * blocks.length)]; 
    2374                     } 
    2375                 }, 200); 
    2376             }; 
    2377  
    2378             var paintMatrix = function(matrix, offsetx, offsety, color) { 
    2379                 ctx.fillStyle = color; 
    2380                  
    2381                 <strong>matrix.each(function(row, y) {</strong> 
    2382                     <strong>row.each(function(val, x) {</strong> 
    2383                         <strong>if (val) {</strong> 
    2384                             <strong>ctx.fillRect((x + offsetx) * 20, (y + offsety) * 20, 20, 20);</strong> 
    2385                         <strong>}</strong> 
    2386                     <strong>});</strong> 
    2387                 <strong>});</strong> 
    2388             }; 
    2389  
    2390             var check = function(map, block, offsetx, offsety) { 
    2391                 if (offsetx &lt; 0 || offsety &lt; 0 || 
    2392                     mapHeight &lt; offsety + block.length || 
    2393                     mapWidth &lt; offsetx + block[0].length) { 
    2394                     return false; 
    2395                 } 
    2396  
    2397                 <strong>var ok = true;</strong> 
    2398                 <strong>block.each(function(row, y) {</strong> 
    2399                     <strong>row.each(function(val, x) {</strong> 
    2400                         <strong>if (val &amp;&amp; map[y + offsety][x + offsetx]) {</strong> 
    2401                             <strong>ok = false;</strong> 
    2402                         <strong>}</strong> 
    2403                     <strong>});</strong> 
    2404                 <strong>});</strong> 
    2405                 <strong>return ok;</strong> 
    2406             }; 
    2407  
    2408             var mergeMatrix = function(map, block, offsetx, offsety) { 
    2409                 <strong>map.each(function(row, y) {</strong> 
    2410                     <strong>row.each(function(val, x) {</strong> 
    2411                         <strong>if (block[y - offsety] &amp;&amp; block[y - offsety][x - offsetx]) {</strong> 
    2412                             <strong>row[x]++;</strong> 
    2413                         <strong>}</strong> 
    2414                     <strong>});</strong> 
    2415                 <strong>});</strong> 
    2416             }; 
    2417  
    2418             var clearRows = function(map) { 
    2419                 <strong>map.each(function(row, y) {</strong> 
    2420                     <strong>var full = true;</strong> 
    2421                     <strong>row.each(function(val, x) {</strong> 
    2422                         <strong>if (!val) {</strong> 
    2423                             <strong>full = false;</strong> 
    2424                         <strong>}</strong> 
    2425                     <strong>});</strong> 
    2426                     <strong>if (full) {</strong> 
    2427                         <strong>map.splice(y, 1);</strong> 
    2428                         <strong>map.unshift(new Array(mapWidth).each(function() { return 0 }));</strong> 
    2429                     <strong>}</strong> 
    2430                 <strong>});</strong> 
    2431             }; 
    2432  
    2433             var rotate = function(block) { 
    2434                 <strong>return new Array(block[0].length).each(function(_, y) {</strong> 
    2435                     <strong>return new Array(block.length).each(function(_, x) {</strong> 
    2436                         <strong>return block[block.length - x - 1][y];</strong> 
    2437                     <strong>});</strong> 
    2438                 <strong>});</strong> 
    2439             }; 
    2440  
    2441             var key = function(keyCode) { 
    2442                 switch (keyCode) { 
    2443                     case 38: 
    2444                         if (!check(map, rotate(block), posx, posy)) { 
    2445                             return; 
    2446                         } 
    2447                         block = rotate(block); 
    2448                         break; 
    2449                     case 39: 
    2450                         if (!check(map, block, posx + 1, posy)) { 
    2451                             return; 
    2452                         } 
    2453                         posx = posx + 1; 
    2454                         break; 
    2455                     case 37: 
    2456                         if (!check(map, block, posx - 1, posy)) { 
    2457                             return; 
    2458                         } 
    2459                         posx = posx - 1; 
    2460                         break; 
    2461                     case 40: 
    2462                         var y = posy; 
    2463                         while (check(map, block, posx, y)) { y++; } 
    2464                         posy = y - 1; 
    2465                         break; 
    2466                     default: 
    2467                         return; 
    2468                 } 
    2469                 ctx.clearRect(0, 0, 200, 400); 
    2470                 paintMatrix(block, posx, posy, 'rgb(255, 0, 0)'); 
    2471                 paintMatrix(map, 0, 0, 'rgb(128, 128, 128)'); 
    2472             }; 
    2473  
    2474         &lt;/script&gt; 
    2475     &lt;/head&gt; 
    2476  
    2477     &lt;body onload="load()" onkeydown="key(event.keyCode)"&gt; 
    2478         &lt;canvas id="target" style="border: 5px solid gray" width="200" height="400"&gt;&lt;/canvas&gt; 
    2479     &lt;/body&gt; 
    2480 &lt;/html&gt;</code></pre> 
    2481                     <p> 
    2482                         <a onclick="html(this)" href="javascript:void(0)">サンプル</a> 
    2483                     </p> 
    2484                 </div> 
    2485  
    2486                 <div> 
    24872293                    <h3>オブジェクト指向</h3> 
    24882294