最强大脑雷达探点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>
posted on 2017-04-09 23:58 余之乐阅读(1845) 评论(0) 收藏举报
刷新页面返回顶部
余之乐

最强大脑雷达探点HTML5版本

导航

公告
