脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js小星星游戏

js实现小星星游戏

 更新时间：2020年03月23日 17:12:18   作者：0菜鸡小白0  
这篇文章主要为大家详细介绍了js实现小星星游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

功能简介

如图：实现一个点击游戏

准备

准备一个星星的图片（这里我重命名为xxx.png）

开搞

新建一个html文件，并将其与准备好的图片放在同一目录下（东西多了不建议这样搞，但这个就俩）

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>小星星游戏</title>
</head>
<style>
 body{
 background-color: black;
 }
 meter{
 width:100%;
 }

 #title{
 width:100%;
 position: relative;
 text-align: center;
 color: #ffffff;
 }
 #score{
 position: absolute;
 top:0;
 left:90%;
 width:10%;
 color: #ffffff;
 }
 #jindu{
 padding:0 33%;
 }
 span{
 display: block;
 text-align: center;
 }
 span > button{
 width:20%;
 }
</style>
<body>
<div><h1 id="title">小星星游戏</h1></div>
<div><h1 id="score">得分:</h1></div>
<div id="jindu">
 <span>
 <meter id="meter" min="0" max="100"></meter>
 </span>
 <span>
 <button onclick="start()">开始</button>
 <button onclick="restart()">重玩</button>
 </span>
</div>
<script>
 var c = 0;
 function start(){
 //console.log("调用");
 //周期的调用函数，0.2s
  t1 = window.setInterval(show,200)
 }
 var meter = document.getElementById("meter");
 meter.value=0;
 var j =0;
 function show(){
 meter.value+=5;
 // console.log(meter.value)
 if(j<=meter.value){
  j=meter.value;
 }else{
  window.clearInterval(t1)
 }
 if(j==100){
  j=101;
  alert("游戏结束,共消除了"+c+"个小星星");
  window.clearInterval(t1)
 }
 var img = document.createElement('img');
 img.src='xxx.png';
 img.style.position="absolute";
 //math.floor向下取整
 var w = Math.floor(Math.random()*(100-20+1)+20);
 var l = Math.floor(Math.random()*(1500-20+1)+20);
 var t = Math.floor(Math.random()*(600-150+1)+150);
 img.width = w;
 img.style.top = t+"px";
 img.style.left = l+"px";
 document.body.appendChild(img);
 img.onclick =rem;
 }
 function rem() {
 //通过父元素删除子节点
 this.parentNode.removeChild(this);
 var score= document.getElementById("score")
 if(meter.value!=100){
  meter.value-=8;
  j-=8;
  c++;
  score.innerText="得分:"+c;
 }
 }
 function restart(){
 //重新载入当前文档
 location.reload();
 }

</script>
</body>
</html>

结束

可以将css部分和js部分写成单独的文件,但是需要引入

<link href = "css文件路径" rel = "stylesheet">
<script src="js文件路径" type="text/javascript"></script>

更多关于Js游戏的精彩文章，请查看专题： 《JavaScript经典游戏 玩不停》

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

您可能感兴趣的文章:

相关文章

  • eval与window.eval的差别分析

    eval与window.eval的差别分析

    eval与window.eval的差别分析，学习js的朋友可以了解下。
    2011-03-03
  • uniapp自定义下拉刷新组件项目实践总结分析

    uniapp自定义下拉刷新组件项目实践总结分析

    在日常的开发过程中,我们经常遇到下拉刷新的场景,很方便的刷新游览的内容,在此实现了一个下拉刷新的自定义组件,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步
    2023-09-09
  • 如何给JS中的数组开头添加元素

    如何给JS中的数组开头添加元素

    这篇文章主要介绍了如何给JS中的数组开头添加元素，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • JavaScript中函数声明与函数表达式的区别详解

    JavaScript中函数声明与函数表达式的区别详解

    可能很多朋友只知道两种声明方式一个是函数声明一个是函数表达式，具体有什么不同没能说得很好。事实上，JavaScript的解析器对函数声明与函数表达式并不是一视同仁地对待的。下面看看这两者到底有什么不同。
    2016-08-08
  • JavaScript设计模式之抽象工厂模式介绍

    JavaScript设计模式之抽象工厂模式介绍

    这篇文章主要介绍了JavaScript设计模式之抽象工厂模式介绍,抽象工厂模式就是对功能类单独创建工厂类,这样就不必修改之前的代码,又扩展了功能,需要的朋友可以参考下
    2014-12-12
  • JavaScript函数返回值的具体使用

    JavaScript函数返回值的具体使用

    本文主要介绍了JavaScript函数返回值,包括基本返回值、多返回值、异步函数的返回值等,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • javascript-简单的日历实现及Date对象语法介绍(附图)

    javascript-简单的日历实现及Date对象语法介绍(附图)

    主要是对Date对象的使用，首先回忆一下Date对象的参数及方法，代码如下，感兴趣的朋友可以参考下哈
    2013-05-05
  • 原生js结合html5制作小飞龙的简易跳球

    原生js结合html5制作小飞龙的简易跳球

    这篇文章主要介绍了原生js结合html5制作小飞龙的简易跳球的方法和代码分享，推荐给大家，有需要的小伙伴可以参考下。
    2015-03-03
  • JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】

    JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】

    这篇文章主要介绍了JS实现放大、缩小及拖拽图片的方法,可兼容IE及火狐等浏览器,通过javascript自定义函数实现针对图片的放大、缩小及拖拽等功能,涉及javascript动态操作页面元素的相关技巧,需要的朋友可以参考下
    2016-08-08
  • 基于vue实现可搜索下拉框定制组件

    基于vue实现可搜索下拉框定制组件

    这篇文章主要为大家详细介绍了基于vue实现可搜索下拉框定制组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-06-06

最新评论