JS实现点星星消除小游戏

本文实例为大家分享了JS实现点星星消除游戏的具体代码，供大家参考，具体内容如下

步骤及游戏功能分析：

1.网页上的随机出现小星星；

2.点击小星星，小星星消失；

绑定一个onclick事件：
    对象.事件 = 事件处理函数；
    注意：要想删除某个节点，必须找到它的父节点
    注意：在绑定事件中this可以直接使用

3.添加功能开始游戏

4.添加功能暂停游戏

5.游戏进度条功能

<style type="text/css">
 #d2{
 width: 100px;
 height: 20px;
 border: 1px solid red;
 display: inline-block;
 }
 #d3{
 display: inline-block;
 background: yellow;
 height: 20px;
 }
</style>
<script type="text/javascript">
 //window.onload = init;

 var countstar = 0;//控制星星个数变量
 var timerStar;//生成星星定时器
 var timerGameTime
 var t = 0;//记录时间变量
 //开始游戏的函数
 function startGame(){
 window.clearInterval(timerStar);
 window.clearInterval(timerGameTime);
 timerStar = window.setInterval("star()",500);
 timerGameTime = window.setInterval("time()",1000); //记录游戏时间
 }

 //创建星星的函数
 function star(){
 var obj = document.createElement("img");
 obj.src = "images/star.png";
 obj.width = Math.floor(Math.random()*60+20);
 obj.style.position = "absolute";
 obj.style.left = Math.floor(Math.random()*1700+100)+"px";
 obj.style.top = Math.floor(Math.random()*500+30)+"px";
 document.body.appendChild(obj);
 countstar++;
 var sp = document.getElementById("d3");
 sp.style.width = countstar*10+"px";

 if (countstar > 10) {
  alert("游戏结束");
  window.clearInterval(timerStar);
  location.reload();
 }
 obj.onclick = removeStar;
 }

 //点击删除星星的函数
 function removeStar(){
 this.parentNode.removeChild(this);
 countstar --;
 var sp = document.getElementById("d3");
 sp.style.width = countstar*10+"px";
 }

 //点击暂停游戏的函数
 function pauseGame(){
 alert("游戏已暂停，点击确定继续游戏。");
 }

 //记录游戏时间的函数
 function time(){
 t++
 var obj = document.getElementById("d1");
 obj.innerHTML= "游戏进行了"+t+"秒";
 }
</script>

<body>
  <input type="button" value="开始游戏" οnclick="startGame()" name="">
  <input type="button" value="暂停游戏" οnclick="pauseGame()" name="">
  <span id="d1">游戏进行了0秒</span>
  <span id="d2"><span id="d3"></span></span>
</body>

游戏效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript实现点击星星小游戏

    本文实例为大家分享了JavaScript实现点击星星的具体代码,供大家参考,具体内容如下 <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #d2{ width:100px; height:20px; border:1px solid red; display:inline-block; } #d3{

  • js实现消灭星星(web简易版)

    昨天看视频之后,整理思路,自己完成了简易版消灭星星 思路: 模块1:初始化 初始化总分数.当前分数.背景图.选择的星星分数 初始化星星(生成二维数组,对二维数组的每一个对象设置样式(长.宽.背景图),生成二维数组个div元素节点插入到游戏面板中) 模块2:预判 判断:  鼠标移动到某一个方块,判断上下左右是否有连接着的小方块(采用递归方法),然后将其存储到数组choose[],移到其他方块时,choose置为空 闪烁:  将已选中的小方块设置样式(缩放) 显示选择分数:  设置初始分数和递增分数

  • javascript实现消灭星星小游戏简单版

    javascript实现消灭星星小游戏简单版

    来看看实现的效果图 游戏规则:双击颜色一样的星星,双击相同的部分就消失了 实例代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" content="target-densitydpi=320,width=640,user-scalable=no" /> <noscript><meta http-equiv="refresh"

  • JS实现点星星消除小游戏

    本文实例为大家分享了JS实现点星星消除游戏的具体代码,供大家参考,具体内容如下 步骤及游戏功能分析: 1.网页上的随机出现小星星: 2.点击小星星,小星星消失: 绑定一个onclick事件:     对象.事件 = 事件处理函数:     注意:要想删除某个节点,必须找到它的父节点     注意:在绑定事件中this可以直接使用 3.添加功能开始游戏 4.添加功能暂停游戏 5.游戏进度条功能 <style type="text/css"> #d2{ width: 100px

  • js实现金山打字通小游戏

    本文实例为大家分享了js实现金山打字通小游戏的具体代码,供大家参考,具体内容如下 字母匀速随机下落,键盘按下对应字母按键,字母消失重新生成新字母,新字母可帮助回调一部分初始高度 效果 1.页面内容 列表内放字母 <ul id="box"> <li></li> <li>A</li> </ul> ** 2.页面样式 ** 1)清除li园标 2)确定列表位置,为字母随机位置下降准备 *{ padding: 0; marg

  • JS+Canvas实现贪吃蛇小游戏

    JS+Canvas实现贪吃蛇小游戏

    今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不到有用的资料(不是代码!),所以说呢,只能自力更生 -_- 首先是大致要考虑的东西: 1.要有蛇(没蛇怎么叫贪吃蛇). 2.然后要有地图(蛇是不能上天的). 3.不能水平\垂直掉头(如果想掉头,需要至少变换方位并且至少移动一格才可). 4.食物(不然怎么贪吃). 5.吃了食物要变长(这才是精髓).

  • JS实现的走迷宫小游戏完整实例

    JS实现的走迷宫小游戏完整实例

    本文实例讲述了JS实现的走迷宫小游戏.分享给大家供大家参考,具体如下: 先来看看运行效果截图: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • 原生JS实现的跳一跳小游戏完整实例

    原生JS实现的跳一跳小游戏完整实例

    本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成动作并进行判断: 首先po一下代码: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie

  • 原生js实现的金山打字小游戏（实例代码详解）

    首先先来看一下效果图 如果感兴趣的就来看一下Js源码吧 //计分板 var board = { dom: document.getElementById("score"), maxLost: 3, //最大丢失量 lost: 0, //当前丢失了多少个 score: 0, //当前分数 render: function() { //显示 this.dom.innerHTML = "<p>得分:" + this.score + "</p&g

  • 利用原生JS实现欢乐水果机小游戏

    简介: 玩家点击某个押注物品则在该物品上下注.点击开始则游戏开始,如果没有下注则不能开始游戏. 游戏中的物品有八中,分别为:苹果.西瓜.柠檬.橙子.铃铛.77.双星.BAR. 在放行游戏区左右方为押注区,每种物品下方有加减号按钮,每次点 击加号增加一个筹码注金,反之减号就减少一个筹码注金 开始: 开始键 奖励:GOOD LUCK 由于这个时低配版的,我就没有按照原版的写进去,就是中了GOOD LUCK直接获得15分. 出于好耍,本人想起了小时候玩过的水果机,js也学了一会儿了,就想用它写一个简单

  • html+css+js实现别踩白板小游戏

    html+css+js实现别踩白板小游戏

    目录 背景简介 一.思路分析 二.页面搭建 2.1 HTML层 2.2 CSS层 2.3 JS层 2.3.1获取元素 2.3.2创建每一行div元素 2.3.3点击事件函数封装 2.3.4 方块移动函数封装 2.3.5 游戏开始 三.总结 背景简介 别踩白板这个游戏相信大家都玩过,这个是基于HTML5打造的简单小游戏,在PC端和移动端都能够运行,适应多种平台,今天我们使用原生JS搭配JQuery构建这个小游戏--别踩白板. 一.思路分析 整体页面是一个大的矩形,长宽比例大概是3:2,然后游戏开始

  • JS实战面向对象贪吃蛇小游戏示例

    JS实战面向对象贪吃蛇小游戏示例

    目录 思考 一.贪吃蛇效果图 二.贪吃蛇分析 2.1 开始游戏功能 2.2 运动功能 2.2.1 蛇的不同方向的运动 2.2.2 键盘控制方向运动功能 2.3 吃食物功能 2.3.1 食物的产生 2.3.2 吃食物的过程 2.4 死亡判定功能 2.4.1 触边死亡判断(撞墙了) 2.4.2 自己撞到自己 2.5 暂停/继续游戏功能 总结 思考 第一步思考蛇分为几个部分,蛇头和蛇身体是怎么形成的. 第二步思考蛇是怎么运动的:如何通过键盘控制蛇的走向. 第三步思考游戏在什么情况下会结束. 第四步思考

  • 利用Vue.js制作一个拼图华容道小游戏

    利用Vue.js制作一个拼图华容道小游戏

    目录 游戏介绍 核心思路 核心代码 html games 类 生成随机图片数量 移动图片 键盘事件 拼图完成 结语 游戏介绍 先看看界面 这是一个拼图游戏,可以自选难度和自选闯关图片 游戏开始后根据不同难度,生成与所选主图 对应的 不同张数的 随机顺序的小图,然后只要把乱序的小图片还原成完整的图片就闯关成功 游戏区域有一个空白位置,可以用鼠标点击空白位相邻的图片完成替换,也就是移动,也可以用键盘上下左右操作 游戏好玩,可不要贪杯哦,学习也不能落下,不管什么游戏都一样 这个虽然用到的技术很一般很简

随机推荐