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经典游戏 玩不停》

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

赞 (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实现小星星游戏

    本文实例为大家分享了js实现小星星游戏的具体代码,供大家参考,具体内容如下 功能简介 如图:实现一个点击游戏 准备 准备一个星星的图片(这里我重命名为xxx.png) 开搞 新建一个html文件,并将其与准备好的图片放在同一目录下(东西多了不建议这样搞,但这个就俩) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小

  • js贪吃蛇游戏实现思路和源码

    js贪吃蛇游戏实现思路和源码

    本文实例为大家分享了js贪吃蛇游戏的相关代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇小游戏</title> <style> *{margin:0; padding:0;} header { display: block; margin: 0 auto;

  • JS实现网页游戏中滑块响应鼠标点击移动效果

    本文实例讲述了JS实现网页游戏中滑块响应鼠标点击移动效果.分享给大家供大家参考,具体如下: 这是网页游戏中的一个有趣效果,可以完成以下几个动作:滚动.scroll 8个方向.鼠标坐标获娶对象上下左右位置获取,大家可以自己添加.MoveReady和ScrollReady两个注释掉了 取消注释后防止鼠标连续点击效果叠加. 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-game-click-move-demo/ 具体代码如下: <!DOCTYPE html

  • JS数字抽奖游戏实现方法

    本文实例讲述了JS数字抽奖游戏实现方法.分享给大家供大家参考.具体实现方法如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>新年网页抽奖程序</title> <style type="text/css"> * {margin:0; padding:0;} ul,li {list-style-type:non

  • 使用非html5实现js板连连看游戏示例代码

    向大家分享一款如何实现js版连连看游戏,如下图所示: 首先看一下html的布局方式在index.html文件中: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http

  • H5+C3+JS实现五子棋游戏（AI篇）

    H5+C3+JS实现五子棋游戏（AI篇）

    本文实例为大家分享了H5+C3+JS实现五子棋游戏的具体代码,供大家参考,具体内容如下 新增全局变量 <script> //所有赢法总和 var count = 0; //容纳所有赢法的三维数组 var allWin = []; for(var i =0; i <15; i++){ allWin[i] = []; for(var j=0; j <15; j++){ allWin[i][j] = []; } } //横线赢法 for(var i =0; i <15; i++){

  • JS实现打字游戏

    本文实例为大家分享了JS实现打字游戏的具体代码,供大家参考,具体内容如下 第一步:页面的排版和布局 1.1实现开始游戏的界面 1.1.1开始游戏 1.1.2游戏说明 <!--游戏开始的界面--> <div id="gameStart"> <div id="start">开始</div> <div id="describe">说明</div> <div id="

  • JS实现小星星特效

    JS实现小星星特效

    本文实例为大家分享了JS实现小星星特效的具体代码,供大家参考,具体内容如下 鼠标点击窗口实现如图效果: 看起来是不是很像小星星呀 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body style="background-color: #000000;"&g

  • 纯JS实现五子棋游戏

    本文实例为大家分享了JS实现五子棋游戏的具体代码,供大家参考,具体内容如下 基本实现方式是表格,当时想用黑白圆棋代替的,但是尺寸没调好,就先上黑白底色了 说一下实现思路,刚开始是想每次落子的时候都把整个棋盘上的子遍历一遍,然后判断四个方向(横,竖,左斜,右斜)上的点数是不是想加等于5,做到一半的时候感觉这种效率太低了,也没必要,,然后就在每次落子之后判断它四个方向相加是不是等于5(不算落子本身),这是各个方向的最终效果 横向: 竖向: 左斜: 右斜: 横向和竖向的图是我修改过后的,加了一个定时器

  • 原生js实现五子棋游戏

    本文实例为大家分享了js实现五子棋游戏的具体代码,供大家参考,具体内容如下 html: <body> <h2>五子棋游戏</h2> <div id="box"> <div id="box01"></div> <div id="box02">haha</div> </div> </body> css: <style type

随机推荐