1.先来看页面首页效果图

整个首页由一个大的div包裹，背景图也是在外层div设置的，然后就一个开始游戏的按钮，还有进度条图片，也包括进度条结束后出现的蒙版页面

2.点击开始页面，动画开始加载，会随机出现小灰灰和灰太狼

3.敲打灰太狼加分，小灰灰减分

4.进度条走完，游戏结束，出现结束页面

5.点击重新开始按钮即可再玩一次游戏

6.来看一下html结构和css样式

 <div class="container"><h1 class="score">0</h1><div class="progress"></div><div class="start">开始游戏</div><div class="game_over"><p>游戏结束</p><button class="restart">重新开始</button></div></div>

<style>* {margin: 0;padding: 0;}.container {width: 320px;height: 480px;background: url(./img/game_bg.jpg) 0 0 no-repeat;position: relative;margin: 50px auto;}.container>.score {color: white;margin-left: 60px;}.container>.progress {width: 180px;height: 30px;position: absolute;top: 66px;left: 63px;background: url(./img/progress.png) 0 0 no-repeat;}.container>.start {position: absolute;top: 300px;left: 50%;margin-left: -50px;width: 100px;height: 40px;border-radius: 40px;color: white;background-color: #d41f12;text-align: center;line-height: 40px;cursor: pointer;}.container>.game_over {width: 320px;height: 480px;background-color: rgba(0, 0, 0, 0.8);position: absolute;top: 0;text-align: center;display: none;}.game_over>p {color: red;font-size: 30px;margin: 200px 0 50px;}.game_over>button {width: 100px;height: 40px;border-radius: 40px;color: white;background-color: #d41f12;text-align: center;line-height: 40px;cursor: pointer;border: none;}</style>

7.JS代码

<script>var start = document.querySelector('.start');var container = document.querySelector('.container');var progress = document.querySelector('.progress');var restart = document.querySelector('.restart');var game_over = document.querySelector('.game_over');var score = document.querySelector('.score');var scores = 0;var timer;var timers;//监听 开始游戏 的事件start.addEventListener('click', function () {//alert('2222')start.style.display = 'none';//点击开始游戏后 进度条 会逐渐消失pro()//循环出现灰太狼htlAnimation()});//监听 重新开始 按钮的事件restart.addEventListener('click', function () {scores = 0;score.innerHTML = 0;game_over.style.display = 'none'pro()htlAnimation()});//灰太狼动画函数function htlAnimation() {// 创建一个随机位置 数组var arrPos = [{ left: "15px", top: "160px" },{ left: "95px", top: "115px" },{ left: "185px", top: "140px" },{ left: "15px", top: "220px" },{ left: "100px", top: "192px" },{ left: "195px", top: "210px" },{ left: "205px", top: "295px" },{ left: "26px", top: "294px" },{ left: "118px", top: "274px" },];//创建一个 随机生成 灰太狼 和 小灰灰 的数组var arrHX = ["h", "x"];//创建一个随机数 0-8var ranNum = Math.floor(Math.random() * 9);//创建一个随机数 0-1var ranNum1 = Math.floor(Math.random() * 2);//创建一个图片对象var img = new Image();img.setAttribute('class', 'imgs');//图片定位img.style.position = 'absolute';img.style.top = arrPos[ranNum].topimg.style.left = arrPos[ranNum].leftwindow.num1 = 0;var num2 = 5;window.num3 = 5;// 开启定时器 依次播放每张图片timer = setInterval(function () {if (num1 <= num3) {img.src = `./img/${arrHX[ranNum1]}${num1}.png`;num1++;} else if (num2 >= 0 && num1 <= 9) {img.src = `./img/${arrHX[ranNum1]}${num2}.png`;num2--;} else if (num2 < 0 || num1 > 9) {img.remove()clearInterval(timer)htlAnimation()}}, 200)//追加图片到父级container.appendChild(img)//调用一个点击图片加分的函数scoreAdd(img)}//创建一个进度条消失函数function pro() {progress.style.width = "180px"//console.log(progress)var timer1 = setInterval(function () {var jdt = progress.offsetWidthjdt -= 6progress.style.width = jdt + 'px'if (jdt <= 0) {game_over.style.display = 'block'// 进度条走完 清除定时器clearInterval(timer1)clearInterval(timer)//进度条走完  获取 img 然后 删除var imgs = document.querySelectorAll('.imgs');imgs[0].remove()}}, 500)}//创建一个 点击图片加分的函数function scoreAdd(img) {var imgArr = document.querySelectorAll('img')// console.log(imgArr.src)var clicks = true;for (var i = 0; i < imgArr.length; i++) {imgArr[i].onclick = function () {if (clicks) {//点击图片后 改变全局变量 num1 和 num3  使htlAnimation() 里面的 if 判断条件变为 6 < 9window.num1 = 6window.num3 = 9// console.log(imgArr[0].src)//获取 创建好的 所有 img的 src 属性值 var imgSrc = imgArr[0].attributes.src.value // ./img/x2.png// 用indexOf 来检查 imgSrc 里面 是否包含 字符串 "h" 有则 返回0 truevar bol = imgSrc.indexOf("h") >= 0;if (bol) {scores += 10;score.innerHTML = scores} else {scores -= 10;score.innerHTML = scores}}clicks = false//console.log(bol)}}}</script>

我是使用了三个方法，来控制灰太狼和小灰灰动画的完成、进度条的消失、还有点击图片加分减分功能，然后通过事件监听来执行这三个方法

8.结束语

上面就是大概效果了，如果有哪里写的不好的，希望各位大佬能指点一二，期望收到你们的留言

感谢！！！！

JS 原生锅打灰太狼小游戏相关推荐

打砖块小游戏php程序,利用原生js实现html5打砖块小游戏（代码示例）
本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言 PS:本次项目中使用了大量 es6 语法,故对于 ...
php跳一跳小游戏,原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成 ...
html实现跳跳棋游戏,原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成 ...
每个人都能制作的简易版狂拍灰太狼小游戏（HTML+CSS+JavaScript）
自制系列一完善版来了. 如果在制作过程中有任何问题你都可以私信我,我会一一答复你们的. 由于上一次发的进度条不是很完善,显得不美观,这次改进了进度条问题,使增强了游戏的体验感.制作过程很简单,每个人都 ...
网页版打地鼠小游戏源代码，网页版打灰太狼小游戏源码
网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码完整代码下载地址:网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码核心代码 <!DOCTYPE html> <html> ...
C语言编一个金山打字通小游戏,js实现金山打字通小游戏
本文实例为大家分享了js实现金山打字通小游戏的具体代码,供大家参考,具体内容如下字母匀速随机下落,键盘按下对应字母按键,字母消失重新生成新字母,新字母可帮助回调一部分初始高度效果 1.页面内容列 ...
单机版斗地主游戏源代码，纯JS编写的斗地主单机版小游戏源代码
单机版斗地主游戏源代码,纯JS编写的斗地主单机版小游戏源代码,下载游戏后,直接运行index.html即可. 完整代码下载地址:单机版斗地主游戏源代码 index.html <!DOCTYPE ...
使用CocosCreator+JS 完成Flappybrid(像素鸟)小游戏
使用CocosCreator+JS 完成Flappybrid(像素鸟)小游戏前言这是我在刚开始学Cocos做游戏时做的第一个小游戏.当时做了两个版本数学版和碰撞组件版. 环境开发工具: Coco ...
js实现简单的俄罗斯方块小游戏
js实现简单的俄罗斯方块小游戏开始 1. 创建一个宽为 `200px`,高为 `360px` 的背景容器 2. 在该容器上创建一个 `20 * 20` 的块元素 3. 控制该元素的移动,每次移动 ` ...
css3情侣游戏,11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画【情人节主题征文】...
情人节表白可爱小游戏.小动画我要悄悄学习,做一个浪漫的程序员 1.小鹿亲嘴 2.变成小猫 3.爱心表白 4.爱心溢出 5.思念如马 6.霓虹灯爱心 7.3D旋转相册 8.用不同的语言说"爱 ...

JS 原生锅打灰太狼小游戏

8.结束语

上面就是大概效果了，如果有哪里写的不好的，希望各位大佬能指点一二，期望收到你们的留言

感谢！！！！

JS 原生锅打灰太狼小游戏相关推荐

最新文章

热门文章

JS 原生 锅打灰太狼小游戏

8.结束语

上面就是大概效果了，如果有哪里写的不好的，希望各位大佬能指点一二，期望收到你们的留言

感谢！！！！

JS 原生 锅打灰太狼小游戏相关推荐

最新文章

热门文章

JS 原生锅打灰太狼小游戏

JS 原生锅打灰太狼小游戏相关推荐