打灰机的游戏

小咪咪 2022-05-15 09:34 181阅读 0赞

睡不着想打灰机就做了个打灰机的小游戏，拿上来消遣消遣  
就监听左右方向键和空格键，你们懂的~~  
  
[打灰机.zip][.zip]

开发环境是Chrome13  
下面是代码：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div></div> <span></span> 
    <div> 
     <ol> 
      <li>&lt;html&gt;</li> 
      <li>&lt;head&gt;</li> 
      <li>&lt;style&gt;</li> 
      <li>body { </li> 
      <li>margin:0px;</li> 
      <li>padding:0px;</li> 
      <li>font-family:微软雅黑;</li> 
      <li>background-color:#aaa;</li> 
      <li>text-align:center;</li> 
      <li>}</li> 
      <li>&lt;/style&gt;</li> 
      <li> </li> 
      <li>&lt;script type="text/javascript"&gt;</li> 
      <li>/*http://2629783.blog.51cto.com/2619783/495283*/</li> 
      <li>var canvas = null; //vanvas结点</li> 
      <li>var ctx = null; //getContext对象</li> 
      <li>var i = 0;</li> 
      <li>var j = 0;</li> 
      <li>var t = null; //定时器</li> 
      <li>var keyLock = false; //键盘锁定，防止左右键同时按下</li> 
      <li>var left = 287; //初始时绿色大方快距canvas左边距离</li> 
      <li>var targets = new Array(); //存放打击目标的数组（横纵坐标）</li> 
      <li>var bullets = new Array(); //存放子弹的数组（横纵坐标）</li> 
      <li> </li> 
      <li>function init(){//初始化</li> 
      <li>canvas = document.getElementById('myCanvas');</li> 
      <li>if (canvas &amp;&amp; canvas.getContext) { </li> 
      <li>ctx = canvas.getContext('2d');</li> 
      <li>/*初始化targets数组*/</li> 
      <li>for (i = 0; i &lt; 25; i++) { </li> 
      <li>targets.push(new Array(3+i*23,3));</li> 
      <li>targets.push(new Array(3+i*23,26));</li> 
      <li>targets.push(new Array(3+i*23,49));</li> 
      <li>targets.push(new Array(3+i*23,72));</li> 
      <li>}</li> 
      <li> </li> 
      <li>/*在canvas中画出目标*/</li> 
      <li>ctx.fillStyle = '#ddd';</li> 
      <li>for(i = 0; i &lt; targets.length; i++){ </li> 
      <li>ctx.fillRect(targets[i][0], targets[i][1], 20, 20);</li> 
      <li>}</li> 
      <li> </li> 
      <li>/*在canvas中画出两个绿色方块*/</li> 
      <li>ctx.fillStyle = '#0f0';</li> 
      <li>ctx.fillRect(left, 400, 15, 10);</li> 
      <li>ctx.fillRect(left+7, 370, 1, 40);</li> 
      <li> </li> 
      <li>/*添加键盘监听事件*/</li> 
      <li>document.addEventListener('keydown', keydown, false);</li> 
      <li>document.addEventListener('keyup', keyup, false);</li> 
      <li>/*开始执行draw操作*/</li> 
      <li>setInterval(draw,50);</li> 
      <li>} else { </li> 
      <li>return false;</li> 
      <li>}</li> 
      <li>}</li> 
      <li> </li> 
      <li>function draw(){ </li> 
      <li>/*刷新子弹位置*/</li> 
      <li>for(i = 0; i &lt; bullets.length; i++){ </li> 
      <li>ctx.fillStyle = '#f00';</li> 
      <li>ctx.clearRect(bullets[i][0], bullets[i][1], 1, 5);</li> 
      <li>bullets[i][1] -= 5;</li> 
      <li>ctx.fillRect(bullets[i][0], bullets[i][1], 1, 5);</li> 
      <li> </li> 
      <li>/*如果子弹超出边界，则删除，节省内存资源*/</li> 
      <li>if (bullets[i][1] &lt; 0) { </li> 
      <li>ctx.clearRect(bullets[i][0], bullets[i][1], 1, 5);</li> 
      <li>bullets.splice(i, 1);</li> 
      <li>continue;</li> 
      <li>}</li> 
      <li> </li> 
      <li>/*如果击中目标，则子弹和目标一起删除*/</li> 
      <li>for (j = 0; j &lt; targets.length; j++) { </li> 
      <li>if ((bullets[i][0]+1) &gt;= targets[j][0] &amp;&amp; bullets[i][0] &lt;= (targets[j][0]+20) &amp;&amp; bullets[i][1] &gt;= targets[j][1] &amp;&amp; bullets[i][1] &lt;= (targets[j][1]+20)) { </li> 
      <li>ctx.clearRect(targets[j][0], targets[j][1], 20, 20);</li> 
      <li>ctx.clearRect(bullets[i][0], bullets[i][1], 1, 5);</li> 
      <li>targets.splice(j, 1);</li> 
      <li>bullets.splice(i, 1); </li> 
      <li>break;</li> 
      <li>}</li> 
      <li>}</li> 
      <li>}</li> 
      <li>}</li> 
      <li> </li> 
      <li>/*空格键发射子弹，不涉及键盘锁；左右方向键控制左右滑动，按下时加锁，弹起时解锁，防止左右键同时按下情况*/</li> 
      <li>function keydown(event){ </li> 
      <li>if (32 == event.keyCode) { </li> 
      <li>shoot();</li> 
      <li>return false;</li> 
      <li>}</li> 
      <li> </li> 
      <li>if (keyLock) { </li> 
      <li>return false;</li> 
      <li>}</li> 
      <li>keyLock = true;</li> 
      <li>if (37 == event.keyCode) { </li> 
      <li>move('left');</li> 
      <li>} else if(39 == event.keyCode) { </li> 
      <li>move('right');</li> 
      <li>}</li> 
      <li>}</li> 
      <li> </li> 
      <li>/*左右方向键弹起事件：解锁，清除定时器*/</li> 
      <li>function keyup(event){ </li> 
      <li>if (37 == event.keyCode || 39 == event.keyCode) { </li> 
      <li>keyLock = false;</li> 
      <li>clearInterval(t);</li> 
      <li>}</li> 
      <li>}</li> 
      <li> </li> 
      <li>/*射击，就是向bullets中压入新坐标*/</li> 
      <li>function shoot() { </li> 
      <li>bullets.push(new Array(left+7,360));</li> 
      <li>}</li> 
      <li> </li> 
      <li>/*控制左移和右移*/</li> 
      <li>function move(dir){ </li> 
      <li>t = setInterval(function(){ </li> 
      <li>if ('left' == dir &amp;&amp; left &gt; 0) { </li> 
      <li>ctx.clearRect(left, 400, 15, 10);</li> 
      <li>ctx.clearRect(left+7, 370, 1, 40);</li> 
      <li>left -= 3;</li> 
      <li>ctx.fillStyle = '#0f0';</li> 
      <li>ctx.fillRect(left, 400, 15, 10);</li> 
      <li>ctx.fillRect(left+7, 370, 1, 40);</li> 
      <li>} else if ('right' == dir &amp;&amp; (left+15) &lt; 580) { </li> 
      <li>ctx.clearRect(left, 400, 15, 10);</li> 
      <li>ctx.clearRect(left+7, 370, 1, 40);</li> 
      <li>left += 3;</li> 
      <li>ctx.fillStyle = '#0f0';</li> 
      <li>ctx.fillRect(left, 400, 15, 10);</li> 
      <li>ctx.fillRect(left+7, 370, 1, 40);</li> 
      <li>}</li> 
      <li>}, 30);</li> 
      <li>}</li> 
      <li>&lt;/script&gt;</li> 
      <li>&lt;/head&gt;</li> 
      <li>&lt;body οnlοad="init()"&gt;</li> 
      <li>&lt;div style="width:580px;margin:auto;padding:0px;background:#333;"&gt;&lt;canvas id="myCanvas" width="580px" height="450px"&gt;</li> 
      <li>your browser dose not support the canvas tag</li> 
      <li>&lt;/canvas&gt;&lt;/div&gt;</li> 
      <li>&lt;/body&gt;</li> 
      <li>&lt;/html&gt;</li> 
     </ol> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

原文地址：[http://bbs.lampbrother.net/read-htm-tid-100938.html][http_bbs.lampbrother.net_read-htm-tid-100938.html]

[.zip]: http://bbs.lampbrother.net/job.php?action=download&aid=18832
[http_bbs.lampbrother.net_read-htm-tid-100938.html]: http://bbs.lampbrother.net/read-htm-tid-100938.html