<!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;//障碍个数
var grades = 0;//成绩
var startArry = [];//开始位置数组
var speed = 5000;//游戏速度
var count = 100;//障碍个数
var myCon = [];//玩家控制的坐标
getMyCon(0, 0);//配置玩家控制的坐标
var flag = 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]);
}
}
}
//配置开始位置数组
for (var i = 0; i <= 400; i++) {
startArry.push([-2, i]);
startArry.push([402, i]);
startArry.push([i, -2]);
startArry.push([i, 402]);
}
//鼠标控制移动
$(".div-container").mousemove(function (e) {
e = event || e;
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++;
}
})
}

//慢慢增加游戏障碍数量
setInterval("Start()", 1000);
function Start() {
clearInterval(s);
if (count > 10) {
count = count - 5;
}
s = setInterval("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>

撑100s小游戏的更多相关文章

  1. “倔驴”一个h5小游戏的实现和思考（码易直播）——总结与整理

    3月23日晚上8点半(中国队火拼韩国的时候),做了一期直播分享.15年做的一个小游戏,把核心代码拿出来,现场讲写了一遍,结果后面翻车了,写错了两个地方,导致运行效果有点问题,直播边说话边写代码还真不一 ...

  2. 近期微信上非常火的小游戏【壹秒】android版——开发分享

    近期在朋友圈,朋友转了一个html小游戏[壹秒],游戏的规则是:用户按住button然后释放,看谁能精准地保持一秒的时间.^_^刚好刚才在linuxserver上调试程序的时候server挂了,腾出点 ...

  3. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  4. 拼图小游戏之计算后样式与CSS动画的冲突

    先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲 ...

  5. 推荐10款超级有趣的HTML5小游戏

    HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...

  6. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  7. JavaScript版拼图小游戏

    慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...

  8. C语言-纸牌计算24点小游戏

    C语言实现纸牌计算24点小游戏 利用系统时间设定随机种子生成4个随机数,并对4个数字之间的运算次序以及运算符号进行枚举,从而计算判断是否能得出24,以达到程序目的.程序主要功能已完成,目前还有部分细节 ...

  9. Cocos2d-x 版本小游戏 《是男人就下100层》 项目开源

    这个是很久就开始动手写的一个小游戏了,直到最近才把它收尾了,拖拖拉拉的毛病总是很难改啊. 项目是基于 cocos2d-x v2.2 版本 ,目前只编译到了 Win8 平台上,并且已经上传到了商店,支持 ...

随机推荐

  1. Android高手速成--第三部分 优秀项目

    主要介绍那些Android还不错的完整项目,目前包含的项目主要依据是项目有意思或项目分层规范比较好.Linux项目地址:https://github.com/torvalds/linuxAndroid ...

  2. PHP之static静态变量详解（二）

    在看别人项目过程中,看到函数里面很多static修饰的变量,关于static修饰的变量,作用域,用法越看越困惑,所以查了下资料. static用法如下: 1.static 放在函数内部修饰变量 2.s ...

  3. Shell入门教程：流程控制（7）break和continue

    第一节:breank命令 4种循环 for.while.until.select,如果想要提早结束循环,可在循环中使用break命令.执行break时,会跳出一层的循环,如果想跳出多层循环,可在bre ...

  4. Shell脚本中，如何判断Linux系统是32位还是64位？

    一行就能搞定,输出32或者64 可以用“和. 参考代码如下: ldconfig if [ $(getconf WORD_BIT) = '32' ] && [ $(getconf LON ...

  5. SqlServer数据库大型应用解决方案总结

    随着互联网应用的广泛普及,海量数据的存储和访问成为了系统设计的瓶颈问题.对于一个大型的互联网应用,每天百万级甚至上亿的PV无疑对数据库造成了相当高的负载.对于系统的稳定性和扩展性造成了极大的问题. 一 ...

  6. DAY5 DVWA之SQL注入演练(low)

    1.设置 把安全等级先调整为low,让自己获得点信心,免得一来就被打脸. 2.测试和分析页面的功能       这里有一个输入框 根据上面的提示,输入用户的id.然后我们输入之后,发现它返回了关于这个 ...

  7. git 教程（13）--创建与合并分支

    在版本回退里,你已经知道,每次提交,Git都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条时间线,在Git里,这个分支叫主分支,即master分支.HEAD严格来说不是指向提交,而 ...

  8. python用二进制读取文件

    python二进制读取文件 很多时候,都需要用到二进制读取文件.毕竟很多信息不是以文本的形式存储.例如:图片,音乐等等.这些东西都是有规则的二进制文件. 在python中,二进制读取采用rb的方式. ...

  9. html5 form表单常用标签

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 动态页面 servlet

    1.常见软件架构. C/S: 客户端 服务器  安全性较好,但是升级需要升级两端   B/S: 浏览器 服务器  安全性较差, 但是升级时 只需要升级服务器端(我们今后就是开发这个架构的) 2.资源分 ...