<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.div-container {
position: relative;
height: 400px;
width: 400px;
left: 200px;
top: 0px;
border: 1px solid gray;
box-sizing: border-box;
overflow: hidden;
z-index: 100;
}
.span-dian {
position: absolute;
background: black;
height: 2px;
width: 2px;
overflow: hidden;
}
.mydiv {
position: absolute;
height: 10px;
width: 10px;
background-color: black;
top: 0px;
left: 0px;
}
.div-die{
color:red;
font-size:2em;
font-weight:bold;
}
</style>
</head>
<body>
<div class="div-container"><div class="mydiv"></div></div>
<div>你的分数:<span id="span-grade"></span></div>
<div class="div-die">撑100s</div>
<button onclick="refresh()">重新开始</button>
</body>
</html>
<script type="text/javascript">
var n = 1;// number of obstacles var speed = 5000; // game speedvar startArry = []; // start position in the array
var grades = 0; // score
var count = 100; // number of obstacles
var myCon = []; // coordinate of the player-controlled
getMyCon (0, 0); // arranged player-controlled coordinate
var = In Flag to false;
function getMyCon (myLeft, mytop) {
myCon = [];
myLeft = myLeft *. 1;
mytop = mytop *. 1;
for (var MYI = myLeft; MYI <myLeft + 10; MYI ++) {
for (var MYJ = mytop; MYJ <mytop + 10; MYJ ++) {
myCon. Push ([MYI, MYJ]);
}
}
}
// starting position of the array
for (var I = 0; I <= 400; I ++) {
startArry.push ([- 2, I]);
startArry.push ([ 402, I]);
startArry.push ([I, -2]);
startArry.push ([I, 402]);
}
// mouse control movement
$ ( "div-container." ) mousemove (function (e. ) {
E = || E Event;
var mouseX = e.clientX * 1 - parseInt($(this).css("left")) - 5;
var mouseY = e.clientY * 1 - parseInt($(this).css("top")) - 5;
getMyCon(mouseX, mouseY);
$(".mydiv").css({ left: mouseX, top: mouseY });
})
//添加障碍数量
var s = setInterval("add()", count);
function add() {
var startIndex = Math.floor(Math.random() * 1600);
var endIndex = Math.floor(Math.random() * 1600);
$(".div-container").append("<span class='span-dian' title='" + n + "' style='top:" + startArry[startIndex][0] + "px;left:" + startArry[startIndex][1] + "px'></span>");
$(".span-dian").each(function () {
if ($(this).attr("title") == n) {
$(this).animate({ top: startArry[endIndex][0], left: startArry[endIndex][1] }, speed, function () { $(this).remove() });
n++;
}
})
}
// slowly increase the number of game disorders
the setInterval ( "the Start ()", 1000);
function the Start () {
the clearInterval (S);
IF (COUNT> 10) {
COUNT = COUNT -. 5;
}
S = the setInterval ( "the Add ( ) ", COUNT);
}
//判断是否死亡
setInterval("fnDie()", 1);
function fnDie() {
if (flag) {
return false;
}
$(".span-dian").each(function () {
var x = parseInt($(this).css("left"));
var y = parseInt($(this).css("top"));
for (var sss = 0; sss < myCon.length; sss++) {
if (myCon[sss][0] == x && myCon[sss][1] == y) {
flag = true;
console.log(myCon[sss][0] + "," + myCon[sss][1])
console.log(x+ "," + y)
break;
}
}
})
if (flag) {
$(".div-die").html("you are die!");
clearInterval(g);
}
}
//计算成绩
var g = setInterval(function () { grades = grades * 1 + 0.01; $("#span-grade").html(grades.toFixed(2)) }, 10);
function refresh() {
history.go(0);
}
</script>
Reproduced in: https: //www.cnblogs.com/-maomao/p/5029233.html