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 效率组装字符串 StringBuffer
Dec 23 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
vue子路由跳转实现tab选项卡
Jul 24 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获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
PHP中使用curl入门教程
2015/07/02 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
python实现备份目录的方法
2015/08/03 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
使用django自带的user做外键的方法
2020/11/30 Python
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
出纳岗位职责模板
2013/11/27 职场文书
物业管理专业自荐信
2014/07/01 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js