首页 > 代码库 > 最强大脑雷达探点HTML5版本

最强大脑雷达探点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>

 

最强大脑雷达探点HTML5版本