js实现小星星游戏


Posted in Javascript onMarch 23, 2020

本文实例为大家分享了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经典游戏 玩不停》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 #Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 #Javascript
小程序使用分包的示例代码
Mar 23 #Javascript
用JS实现选项卡
Mar 23 #Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 #Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 #Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 #Javascript
You might like
PHP连接Access数据库的方法小结
2013/06/20 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
python 实现return返回多个值
2019/11/19 Python
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
国培远程培训感言
2014/03/08 职场文书
本科毕业生自荐信
2014/06/02 职场文书
2014年度个人工作总结
2014/11/07 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server