一步步教你做“锅打灰太狼”

今天给大家分享做一个小游戏“锅打灰太狼”。

首先，我们先来完成一个开始游戏的界面

上代码

//HTML代码
<div class="boss"><div class="box1"><p>锅打灰太狼</p><button class="btn">开始游戏</button><div class="box_img"><img src="img/x5.png" /><img src="img/h5.png" /></div></div>
<div>

//CSS代码
<style type="text/css">* {margin: 0;padding: 0;}a {text-decoration: none;}.clearfix::after {content: '';clear: both;display: block;}.clearfix {zoom: 1;}.boss {width: 320px;height: 480px;text-align: center;margin: 0 auto;position: relative;}.box1 {width: 100%;height: 100%;border-radius: 10px;background-color: #6495ed;overflow: hidden;}.box1 p {color: goldenrod;font-weight: bolder;font-size: 40px;margin-top: 100px;margin-bottom: 80px;}.box1 button {width: 110px;height: 50px;background: linear-gradient(red, #f2f2f2);}.box_img {margin-top: 70px;}.box2 {position: relative;display: none;}.jdt {position: absolute;top: 66px;left: 63px;}
</style>

通过点击开始游戏进入游戏，这里暂时只有进度条和灰太狼出来

先看效果

下面看js部分代码

<script type="text/javascript">window.onload = function() {var btn = document.querySelector('.btn');var box1 = document.querySelector(".box1");var box2 = document.querySelector('.box2');var img = document.createElement('img');var jdt = document.querySelector('.jdt');var inxHtl = 0;var bar = 180;btn.onclick = function() {box1.style.display = 'none';box2.style.display = 'block';//box3.style.display = 'block';img.style.position = 'absolute';img.style.top = '160px';img.style.left = '18px';box2.appendChild(img);var htl = setInterval(function() {img.setAttribute('src', 'img/h' + inxHtl + '.png');inxHtl++;          if(inxHtl >5) {clearInterval(htl);}}, 60)var time = setInterval(function() {if(bar > 0) {bar--;jdt.style.width = bar + "px";} else {clearInterval(time);}}, 100);}}</script>

以上就是“锅打灰太狼”小游戏的前面一部分，下期更新打灰太狼

今天的分享就到这，如有错误之处，敬请指正！

一步步教你做“锅打灰太狼”相关推荐

linux限速软件,一步步教你用linux做路由器限速
linux的开源和免费使得越来越多的厂家用它来做防火墙和路由器,如海蜘蛛,飞鱼星等,其实我们也可以用linux来打造一台高性能的路由器.下面就以red hat为例(其他版本大同小异)教大家做一台能限速 ...
linux 限速命令,一步步教你用linux做能限速的路由器
得益于linux的开源和免费,越来越多的厂家用它来做防火墙和路由器,如海蜘蛛,飞鱼星等,其实我们也可以用linux来打造一台高性能的路由器.下面就以red hat为例(其他版本大同少异)教大家做一台能 ...
一步步教你轻松学朴素贝叶斯模型算法理论篇1
一步步教你轻松学朴素贝叶斯模型理论篇1 (白宁超2018年9月3日17:51:32) 导读:朴素贝叶斯模型是机器学习常用的模型算法之一,其在文本分类方面简单易行,且取得不错的分类效果.所以很受欢迎,对 ...
[翻译]一步步教你配置SQL SERVER合并复制（五）配置Publisher（上）
上一篇:一步步教你配置 SQL SERVER合并复制(四)设置Distributor的安全 (译者注:本篇内容较多也是合并复制最重要的一个环节之一,因此配置Publisher将分成两个章节来翻译) ...
机器学习：一步步教你理解反向传播方法
机器学习:一步步教你理解反向传播方法时间 2016-09-13 00:35:59 Yong Yuan's blog 原文 http://yongyuan.name/blog/back-propa ...
[翻译]一步步教你配置SQL SERVER合并复制（四）提高Distributor的安全性
上一篇:一步步教你配置SQL SERVER合并复制(三)配置Distributor 为了让已订阅数据库的设备能够更好地去联系Distributor,你必须在数据库中添加一个域用户,让设备能够通过这个用 ...
一步步教你Hadoop多节点集群安装配置
一步步教你Hadoop多节点集群安装配置 1.集群部署介绍 1.1 Hadoop简介 Hadoop是Apache软件基金会旗下的一个开源分布式计算平台.以Hadoop分布式文件系统HDFS(Hado ...
一步步教你轻松学K-means聚类算法
一步步教你轻松学K-means聚类算法 (白宁超 2018年9月13日09:10:33) 导读:k-均值算法(英文:k-means clustering),属于比较常用的算法之一,文本首先介绍聚类 ...
订阅号微信公众号历史文章爬虫php,一步步教你怎么打造微信公众号历史文章爬虫...
原标题:一步步教你怎么打造微信公众号历史文章爬虫开篇语: 邓爷爷曾说过:不管黑猫白猫,逮到耗子就是好猫.不管我是凑的还是笨办法堆出来的,确实把批量导出微信公众号所有历史文章的这个功能给做出来了,而且 ...

一步步教你做“锅打灰太狼”

一步步教你做“锅打灰太狼”相关推荐

最新文章

热门文章