<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
body{
background-color: black;
}
</style>
<body>
<button onclick="start1()">
游戏开始
</button>
<button id="nn" >
</button>
<button id="grade">
</button>
</body>
<script type="text/javascript">
var n=0;//代表随即方块的数量
var grade=0;//分数
var on=document.querySelector('#nn');
on.innerHTML=n;
var ograde=document.querySelector('#grade');
ograde.innerHTML=grade;
function start1(){
alert('欢迎来带联盟');
var x=0;
var n=prompt('请选择难度(普通/困难/魔鬼)')
if(n=='普通'){
start(1000);
}
if(n=='困难'){
start(500);
}
if(n=='魔鬼'){
start(300);
}
}
function start(x){
var timer=null;
timer=setInterval(function(){
var odiv=document.createElement('div');
document.body.appendChild(odiv);
odiv.style.width='30px';
odiv.style.height='30px';
odiv.style.backgroundColor=setColor();
var xx=parseInt(Math.random()*(document.documentElement.clientWidth-odiv.offsetWidth));
var yy=parseInt(Math.random()*(document.documentElement.clientHeight-odiv.offsetHeight));
odiv.style.position="absolute";
odiv.style.left=xx+'px';
odiv.style.top=yy+'px';
n++;
odiv.onclick=function(){
document.body.removeChild(odiv);
n--;
grade++;
}
on.innerHTML=n;
ograde.innerHTML=grade;
if(n>10){
alert('gameover');
clearInterval(timer);
}
},x)
}
function setColor(){
var col='#'+parseInt(Math.random()*(0xffffff+1)).toString(16);
return col;
}
</script>
</html>
效果图: