最强大脑节目里有些项目设置得比较有意思，比较喜欢看。在贴吧看到有人用.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>
时间： 2024-10-06 08:28:31