初学JS——实现基于计时器的小游戏。

　　这几天一直在看网易云课堂上免费的JS课程，正好今天看到讲了计时器setInterval,第一感觉就是像C#里的TIMER。然后课程里举得例子正好通过计时器改变新生成窗口的位置，

然后就突然有了灵感！可以写一个“抓住我”的小游戏。

　　因为刚学JS 懂的实在很少，所以就通过自己已经学过的内容实现了，

主要原理是建一个5X5的表格，每一个格子里放一个DIV，并通过数字命名ID 1-25。

然后就是通过网上找的一个获取随机数的方式，getelementbyid获取随机的一个DIV并且通过innerHTML动态生成一个BUTTON。

在执行之前先删除之前生成的一个，然后通过计时器设置不同的间隔来执行。于是一个简单的CATCH ME小游戏完成了，然后又用了PHP随便写了一个记录分数的功能。

不多说了大家自己看源代码吧

在线演示

PS:PHP也是这个星期刚接触。。所以只写了个最简单的通过GET传参数。。。于是可以随意刷分。。。莫吐槽。。。

初学JS——实现基于计时器的小游戏。,布布扣,bubuko.com

时间： 2024-07-31 14:34:59

初学JS——实现基于计时器的小游戏。的相关文章

js+jQuery实现贪吃蛇小游戏

这是我第一次这么认真的去写一个程序.今天老师布置的编程任务是实现一个贪吃蛇的小游戏,一开始感觉很茫然的,因为以前都没有这么系统的去做过一个编程任务.后来理清思路去做,感觉问题也并不是那么的难. 首先,第一步肯定是要编写出我们的的静态页面. 第二步,让我们的贪吃蛇先从一个开始动起来. 第三步,让我们通过键盘去控制他的运动方向. 第四步,让我们去判断我们的贪吃蛇有没有撞墙,有没有吃到自己,因为这已经犯规了. 第五步,给我们的贪吃蛇随机生成一个‘食物’. 第六步,实现每当我们的贪吃蛇吃了一个食物,他都

使用Html5+JS做的贪吃蛇小游戏

学习了Html5的Canvas的使用,和JS创建对象,做了一个贪吃蛇小游戏,来巩固JS面向对象编程和Canvas的用法. Node.js 1 /** 2 * 格子类,组成贪吃蛇和舞台 3 */ 4 function Node(x,y){ 5 this.x=x; 6 this.y=y; 7 /** 8 * 比较两个格子是否重合 9 */ 10 this.equals=function(x,y){ 11 return this.x==x&&this.y==y; 12 } 13 } Snake.

初学WPF，做一款小游戏练习一下

以前做项目的时候有用过Silverlight,最近了解了一下WPF,做了一款简单的小游戏来练手,希望能和大家多多交流. 想法:最强大脑牛人多多,对色彩的分辨更是让人目瞪口呆,于是我就想到做一个小游戏,简单一点,做网格状的色块,中间穿插一块不同颜色但是又非常相近的颜色块,点击该颜色块即为通关,进入下一关,下一关的色块数量+1,直到到达一个差不多的关卡后不再+1: 效果如图说做就做,新建工程,开始实现,首先准备好一组颜色相近的颜色代码,百度HTML颜色代码,随便选取,越相邻颜色色差越小. 1 p

js、jQuery实现2048小游戏

一.游戏简介: 2048是一款休闲益智类的数字叠加小游戏二. 游戏玩法: 在4*4的16宫格中,您可以选择上.下.左.右四个方向进行操作,数字会按方向移动,相邻的两个数字相同就会合并,组成更大的数字,每次移动或合并后会增加一个数字. 当16宫格中没有空格子,且四个方向都无法操作时,游戏结束. 三. 游戏目的: 目的是合并出2048这个数字,获得更高的分数. 四. 游戏截图: 五.先来玩一下: 开始游戏查看源码六.游戏实现原理: 使用js.jQuery实现了PC版及手机版,实现原理是一样

刚学玩原生JS,自己写了一个小游戏，希望在以后能不断地进步加以改善

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>冒险岛</title></head><style type="text/css"> body{ -moz-user-select: none; -khtml-user-select: none; user-select

js+Jquery 制作推箱子小游戏

<!DOCTYPE html> <html> <head> <title>Sokaban</title> <meta charset="utf-8"> <style type="text/css"> .roads { width: 50px; height: 50px; background: url(img/roods.png); background-size: 100% 100

js简单的贪吃蛇小游戏

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta nam

软件工程 Android小游戏猜拳大战

一.前言最近学校举办的大学生程序设计竞赛,自己利用课余时间写了一个小游戏,最近一直在忙这个写这个小游戏,参加比赛,最终是老师说自己写的简单,可以做的更复杂的点的.加油二.内容简介自己玩过Android系统下的节奏大师,自己也就考虑做一个类似的,然后自己写技术水平有限,还是在学习Android阶段,自己就想到可以写一个猜拳的比较小游戏. 这是一款基于Android平台小游戏—猜拳大战,简单,易操作,趣味强,训练反应速度,内存小,没有广告,安全. 最大的特点:训练人的反应速度. 游戏规则:在3

初学JS——利用JS制作的别踩白块儿（街机模式）小游戏

初学JS--利用JS制作的别踩白块儿(街机模式) 小游戏这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是可能普通模式的别踩白块儿因为他的"块儿"是滚动的向上这种,以我目前会的技术想不出怎么写, 但是如果是街机模式,通过你每按一次按键之后他像下跳一格这样的就非常好实现了. 通过我目前会的知识,实现的步骤大概是这样的: 建一个4X4的表格,制作2张150X100的图片,一张全白色,一张全黑色,命名为0.JPG,1.JPG 就是说当文件名为0的时候就是白色的