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 相关文章推荐
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
JS 参数传递的实际应用代码分析
Sep 13 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 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中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
php 缓存函数代码
2008/08/27 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
django反向解析和正向解析的方式
2018/06/05 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
如何通过Python实现标签云算法
2019/07/02 Python
django 单表操作实例详解
2019/07/30 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
行政部总经理岗位职责
2014/01/04 职场文书
护理专业毕业生自荐信范文
2014/01/05 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
社会工作专业自荐信
2014/09/26 职场文书
文化大革命观后感
2015/06/17 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL