最强大脑雷达探点HTML5版本
最强大脑节目里有些项目设置得比较有意思，比较喜欢看。在贴吧看到有人用.NET写了个小程序模仿节目里的雷达探点项目，不会.NET，只会用HTML5也做了。
代码如下：
<!DOCTYPE html> <html lang='zh-cmn-Hans'> <head> <meta charset='utf-8' /> <title>雷达探点 by 余之乐</title> <style type="text/css"> body {background: #000; color: #f0f0f0;} div {margin: auto; padding: 0; width: 1200px; position: relative;} select {margin-right: 20px;} input {margin-right: 20px;} button {margin: 10px 10px 10px 0; padding: 3px 5px; color: #000; cursor: pointer;} button[disabled=disabled] {color: #999; cursor: default;} canvas {background: transparent; cursor: default; position: absolute; top: 0; width: 1200; height: 600;} </style> </head> <body> <div> <h1>雷达探点</h1> 点数量：<select id='pointNum'> <option value='1000'>1000</option> <option value='2000'>2000</option> <option value='3000'>3000</option> </select> 可视角：<select id='angle'> <option value='15'>15</option> <option value='25'>25</option> <option value='35'>35</option> </select> 速度：<select id='speed'> <option value='1'>慢</option> <option value='2'>中</option> <option value='3'>快</option> </select> 彩色点：<input type='checkbox' id='colorLength'> 雷达线：<input type='checkbox' id='raidLine'> <br /> <button id='btInit'>生成点</button> <button id='btFind' disabled='disabled'>开始找</button> <button id='btMarker' disabled='disabled'>找到了</button> <!-- <p>(x,y)</p> --> </div> <div> <canvas id='canvasL' width='1200' height='600'></canvas> <canvas id='canvasP' width='1200' height='600'></canvas> </div> <script type="text/javascript"> var canvasL, ctxL, canvasP, ctxP; var pointData1, pointData2; var point = []; var pointSize = 3; var pointNum = 10; var hide = 0; var colorLength = 1, color = ['white', 'green', 'blue', 'red', 'purple']; var speed = 1, angle = 35, ang = 0, radius = 280; var btInit, btFind, btMarker; var raf, find = false; var ts, te; window.onload = function(){ btInit = document.querySelector('#btInit'); btFind = document.querySelector('#btFind'); btMarker = document.querySelector('#btMarker'); canvasL = document.querySelector('#canvasL'); canvasP = document.querySelector('#canvasP'); ctxL = canvasL.getContext('2d'); ctxP = canvasP.getContext('2d'); btInit.addEventListener('click', function(){ btInit.setAttribute('disabled', 'disabled'); btFind.setAttribute('disabled', 'disabled'); btMarker.setAttribute('disabled', 'disabled'); canvasP.style.cursor = 'default'; find = false; main(); }); btFind.addEventListener('click', function(){ btInit.setAttribute('disabled', 'disabled'); btFind.setAttribute('disabled', 'disabled'); btMarker.removeAttribute('disabled'); canvasP.style.cursor = 'default'; cancelAnimationFrame(raf); angle = document.querySelector('#angle').value * 1; speed = document.querySelector('#speed').value * 1; ts = new Date().getTime(); find = false; animation(); }); btMarker.addEventListener('click', function(){ btInit.removeAttribute('disabled'); btFind.removeAttribute('disabled'); canvasP.style.cursor = 'crosshair'; cancelAnimationFrame(raf); te = new Date().getTime(); marker(); }); // canvasP.addEventListener('mousemove', function(event){ // var x = Math.floor(event.clientX - this.getBoundingClientRect().left) - 300; // var y = Math.floor(event.clientY - this.getBoundingClientRect().top) - 300; // x = x>300 ? x-600 : x; // document.querySelector('p').textContent = '(' + x + ',' + -y + ')'; // }) canvasP.addEventListener('click', function(event){ if (!find) return; btFind.setAttribute('disabled', 'disabled'); btMarker.setAttribute('disabled', 'disabled'); var x = Math.floor(event.clientX - this.getBoundingClientRect().left); var y = Math.floor(event.clientY - this.getBoundingClientRect().top); if (x>600) x-=600; point.push([x,y,0]); find = false; result(); }); } function main(){ if (document.querySelector('#raidLine').checked){ ctxL.strokeStyle = '#345'; ctxL.lineWidth = 1; drawLine(ctxL, 300,300); drawLine(ctxL, 900,300); } else { ctxL.clearRect(0,0, 1200,600); } pointNum = document.querySelector('#pointNum').value * 1; if (document.querySelector('#colorLength').checked) colorLength = color.length; else colorLength = 1; ctxP.clearRect(0, 0, 1200, 600); ctxP.lineWidth = 1; ctxP.strokeStyle='#ccc'; pointData1 = ctxP.createImageData(600, 600); pointData2 = ctxP.createImageData(600, 600); var k = 0; point = []; hide = Math.floor(Math.random() * pointNum); var draw = setInterval(function(){ var x,y; for (var i = 0; i < 30; i++) { do{ x = Math.floor(Math.random() * radius * 2 - radius); y = Math.floor(Math.random() * radius * 2 - radius); } while (x*x + y*y > radius*radius) var c = Math.floor(Math.random() * colorLength); if (checkPoint(x,y,c)){ k++; drawPoint(ctxP, x,y,c); point.push([x,y,c]); } if (k>=pointNum) { clearInterval(draw); pointData1 = ctxP.getImageData(0,0, 600,600); pointData2 = ctxP.getImageData(600,0, 600,600); btInit.removeAttribute('disabled'); btFind.removeAttribute('disabled'); break; } }; }, 30); } function drawLine(ctx, x,y){ ctx.save(); ctx.translate(x,y); for (var i = 0; i < 3; i++) { ctx.beginPath(); ctx.arc(0,0, 85+i*100, 0,2*Math.PI); ctx.stroke(); }; for (var i = 0; i < 6; i++) { ctx.rotate(Math.PI*30/180); ctx.moveTo(-285,0); ctx.lineTo(285,0); ctx.stroke(); }; ctx.restore(); } function drawPoint(ctx, x,y,c){ ctx.fillStyle = color[c]; ctx.fillRect(300+x,300+y, pointSize,pointSize); if (hide != point.length) ctx.fillRect(300+x+600,300+y, pointSize,pointSize); } function drawArc(ctx, x,y, ang){ ctx.fillStyle = '#000'; ctx.beginPath(); ctx.moveTo(x,y); ctx.arc(x,y, radius+10, Math.PI * ang/180, Math.PI * (360-angle + ang)/180); ctx.fill(); } function checkPoint(ctx, x,y){ var p = ctxP.getImageData(300+x,300+y, pointSize,pointSize); var pc = p.data; for (var i = 0; i < pc.length; i+=4) { if (pc[i]!=0 || pc[i+1]!=0 || pc[i+2]!=0) { return false; } }; return true; } function animation(){ // ctxP.clearRect(0, 0, 1200, 600); ctxP.putImageData(pointData1, 0,0); ctxP.putImageData(pointData2, 600,0); drawArc(ctxP, 300,300, ang); drawArc(ctxP, 900,300, ang); ang += speed; raf = window.requestAnimationFrame(animation); } function marker(){ ctxP.clearRect(600, 0, 600, 600); ctxP.putImageData(pointData1, 0,0); // ctxP.putImageData(pointData2, 600,0); find = true; } function result(){ ctxP.lineWidth = 3; ctxP.putImageData(pointData2, 600,0); ctxP.strokeStyle = 'orange'; ctxP.strokeRect(point[pointNum][0]-10,point[pointNum][1]-10, 20,20); ctxP.strokeRect(point[pointNum][0]-10+600,point[pointNum][1]-10, 20,20); ctxP.strokeStyle = 'red'; ctxP.strokeRect(point[hide][0]-10+300,point[hide][1]-10+300, 20,20); ctxP.strokeRect(point[hide][0]-10+300+600,point[hide][1]-10+300, 20,20); if ( Math.abs(point[hide][0]-point[pointNum][0])<10 && Math.abs(point[hide][1]-point[pointNum][1])<10 ) { alert('找到了！\n' + '用时：' + (te-ts) + ' 毫秒'); } else { alert('错误！\n' + '用时：' + (te-ts) + ' 毫秒'); } } </script> </body> </html>
