最强大脑雷达探点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;}
canvas {background: #000; cursor: default;}
div {margin: auto; width: 1100px;}
select {margin-right: 20px;}
button {margin: 10px 10px 10px 0; padding: 3px 5px; color: #000; cursor: pointer;}
button[disabled=disabled] {color: #999; cursor: default;}
</style>
</head>

<body>
<div>
    <h1>雷达探点</h1>
    <canvas id=‘canvas‘ width=‘1050‘ height=‘520‘></canvas>
</div>
<div>
    点数量：<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=‘pointColor‘>
    <!-- 雷达线：<input type=‘checkbox‘ id=‘line‘> -->
    <br />
    <button id=‘btInit‘>生成点</button>
    <button id=‘btFind‘ disabled=‘disabled‘>开始找</button>
    <button id=‘btMarker‘ disabled=‘disabled‘>找到了</button>
    <p>(x,y)</p>
</div>

<script type="text/javascript">
var canvas, ctx;
var lineData, pointData1, pointData2;
var point = [];
var pointSize = 3;
var pointNum = 10;
var hide = 0;
var pointColor = 1, color = [‘white‘, ‘green‘, ‘blue‘, ‘red‘, ‘purple‘];
var speed = 1, angle = 35, ang = 0;
var btInit, btFind, btMarker;
var raf, find = false;
var ts, te;
window.onload = function(){
    canvas = document.querySelector(‘#canvas‘);
    ctx = canvas.getContext(‘2d‘);
    btInit = document.querySelector(‘#btInit‘);
    btFind = document.querySelector(‘#btFind‘);
    btMarker = document.querySelector(‘#btMarker‘);
    btInit.addEventListener(‘click‘, function(){
        btInit.setAttribute(‘disabled‘, ‘disabled‘);
        canvas.style.cursor = ‘default‘;
        init();
    });
    btFind.addEventListener(‘click‘, function(){
        btInit.setAttribute(‘disabled‘, ‘disabled‘);
        btFind.setAttribute(‘disabled‘, ‘disabled‘);
        btMarker.removeAttribute(‘disabled‘);
        canvas.style.cursor = ‘default‘;
        cancelAnimationFrame(raf);
        angle = document.querySelector(‘#angle‘).value * 1;
        speed = document.querySelector(‘#speed‘).value * 1;
        ts = new Date().getTime();
        raids();
    });
    btMarker.addEventListener(‘click‘, function(){
        btFind.removeAttribute(‘disabled‘);
        canvas.style.cursor = ‘crosshair‘;
        cancelAnimationFrame(raf);
        te = new Date().getTime();
        marker();
    });
    canvas.addEventListener(‘mousemove‘, function(event){
        var x = Math.floor(event.clientX - this.getBoundingClientRect().left) - 260;
        var y = Math.floor(event.clientY - this.getBoundingClientRect().top) - 260;
        x = x>260 ? x-520 : x;
        document.querySelector(‘p‘).textContent = ‘(‘ + x + ‘,‘ + -y + ‘)‘;
    })
    canvas.addEventListener(‘click‘, function(event){
        if (!find) return;
        btInit.removeAttribute(‘disabled‘);
        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);
        point.push([x,y,0]);
        console.log(x + ‘,‘ + y)
        ctx.lineWidth = 3;
        ctx.strokeStyle = ‘orange‘;
        ctx.strokeRect(x-10,y-10, 20,20);
        find = false;
        check();
    });
}
function init(){
    pointNum = document.querySelector(‘#pointNum‘).value * 1;
    if (document.querySelector(‘#pointColor‘).checked) pointColor = color.length;
    else pointColor = 1;
    ctx.clearRect(0, 0, 1050, 520);
    ctx.lineWidth = 1;
    ctx.strokeStyle=‘#ccc‘;
    lineData = ctx.createImageData(520, 520);
    pointData1 = ctx.createImageData(520, 520);
    pointData2 = ctx.createImageData(520, 520);

    var p = 250, 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() * 500 - 250);
                y = Math.floor(Math.random() * 500 - 250);
            } while (x*x + y*y > p*p)
            var c = Math.floor(Math.random() * pointColor);
            if (drawPoint(x,y,c)){
                k++;
                point.push([x,y,c])
            }
            if (k>=pointNum) {
                clearInterval(draw);
                pointData1 = ctx.getImageData(0,0, 520,520);
                pointData2 = ctx.getImageData(520,0, 520,520);
                btInit.removeAttribute(‘disabled‘);
                btFind.removeAttribute(‘disabled‘);
                // drawLine();
                break;
            }
        };
    }, 30);
}
function drawLine(){
    ctx.lineWidth = 1;
    ctx.save();
    ctx.translate(260,260);
    for (var i = 0; i < 6; i++) {
        ctx.rotate(Math.PI*30/180);
        ctx.moveTo(-260,0);
        ctx.lineTo(260,0);
        ctx.stroke();
    };
    ctx.restore();
    ctx.save();
    ctx.translate(260+520,260);
    for (var i = 0; i < 3; i++) {
        ctx.beginPath();
        ctx.arc(0,0, 60+i*100, 0,2*Math.PI);
        ctx.stroke();
    };
    for (var i = 0; i < 6; i++) {
        ctx.rotate(Math.PI*30/180);
        ctx.moveTo(-260,0);
        ctx.lineTo(260,0);
        ctx.stroke();
    };
    ctx.restore();
}
function drawPoint(x,y,c){
    var p = ctx.getImageData(260+x,260+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;
        }
    };
    ctx.fillStyle = color[c];
    ctx.fillRect(260+x,260+y, pointSize,pointSize);
    if (hide != point.length)
        ctx.fillRect(260+x+520,260+y, pointSize,pointSize);
    return true;
}
function raids(){
    ctx.clearRect(0, 0, 1050, 520);

    ctx.putImageData(pointData1, 0,0);
    ctx.fillStyle = ‘#000‘;
    ctx.beginPath();
    ctx.moveTo(260,260);
    ctx.arc(260,260, 255, Math.PI * ang/180, Math.PI * (360-angle + ang)/180);
    ctx.fill();

    ctx.putImageData(pointData2, 520,0);
    ctx.fillStyle = ‘#000‘;
    ctx.beginPath();
    ctx.moveTo(260+520,260);
    ctx.arc(260+520,260, 255, Math.PI * ang/180, Math.PI * (360-angle + ang)/180);
    ctx.fill();

    ang += speed;
    raf = window.requestAnimationFrame(raids);
}
function marker(){
    ctx.clearRect(0, 0, 1050, 520);
    ctx.putImageData(pointData1, 0,0);
    find = true;
}
function check(){
    ctx.putImageData(pointData2, 520,0);
    ctx.strokeStyle = ‘red‘;
    ctx.lineWidth = 3;
    ctx.strokeRect(point[hide][0]-10+260,point[hide][1]-10+260, 20,20);
    ctx.strokeRect(point[hide][0]-10+260+520,point[hide][1]-10+260, 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>