js锅打灰太狼小游戏

相关图片资源以及源码：
https://download.csdn.net/download/whtis666/85669157

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>锅打灰太狼</title><style>.game {width: 320px;height: 480px;position: relative;background-image: url(./img/game_bg.jpg);/* background-size: cover; */margin: 0 auto;border: 1px solid black;}.score {position: absolute;left: 60px;top: 8px;width: 30px;height: 30px;line-height: 30px;text-align: center;color: #7da9e6;font-size: 25px;}.progress {width: 180px;height: 16px;position: absolute;left: 63px;top: 66px;border-radius: 10px;background-image: url(./img/progress.png);}/* .progress::after {content: '58';position: absolute;left: 180px;top: -2px;width: 20px;height: 20px;background-color: pink;} */</style>
</head><body></body>
<script>// 游戏时间let time = 60// 获取 body节点let body = document.querySelector('body')// 构造函数 game  创建元素 设置背景function Game() {this.ele = document.createElement('div')this.ele.className = 'game'// 分数this.scoreEle = document.createElement('div')this.scoreEle.className = 'score'this.scoreEle.innerHTML = scorethis.ele.append(this.scoreEle)// 进度条this.progress = document.createElement('div')this.progress.className = 'progress'this.ele.append(this.progress)this.timer = setInterval(function () {time--this.progress.style.width = 180 * (time / 60) + 'px'if (time < 0) {alert('时间到！游戏结束！')time = 61}}.bind(this), 1000);}// 灰太狼 小灰灰可以出现的位置坐标  就是背景图中坑洞的坐标let pos_arr = [{ x: 96, y: 191 },{ x: 90, y: 114 },{ x: 109, y: 273 },{ x: 21, y: 293 },{ x: 198, y: 295 },{ x: 191, y: 211 },{ x: 8, y: 220 },{ x: 10, y: 159 },{ x: 180, y: 140 }]// 分数let score = 0// 构造函数 Wolf function Wolf(pos, type) {this.ele = document.createElement('div')// 狼的位置this.x = pos.xthis.y = pos.y// 宽高this.w = 108this.h = 101// 样式this.ele.style.position = 'absolute'this.ele.style.width = this.w + 'px'this.ele.style.height = this.h + 'px'// this.ele.style.border = "1px solid red"this.ele.style.left = this.x + 'px'this.ele.style.top = this.y + 'px'// 给狼添加 状态：生长 拍打 下落 死亡   类型: 小灰灰 灰太狼   还有背景图的索引this.type = typethis.state = 0 // 0生长  1下落  2拍打  3死亡this.imgIndex = 0this.ele.style.backgroundImage = "url(./img/" + this.type + this.imgIndex + ".png)"// 给狼对象的元素增添点击事件this.ele.onclick = function () {this.state = 2 // 拍打状态this.imgIndex = 6// 计算分数if (this.type == 'h') {score += 10} else {score -= 10}// 计算好的分数展示到页面game.scoreEle.innerHTML = score}.bind(this)// 狼移动的方法this.move = function () {if (this.state == 0) {// 生长this.ele.style.backgroundImage = "url(./img/" + this.type + this.imgIndex + ".png)"this.imgIndex++if (this.imgIndex > 5) {this.state = 1}// console.log(this.imgIndex);} else if (this.state == 1) {// 下落this.imgIndex--this.ele.style.backgroundImage = "url(./img/" + this.type + this.imgIndex + ".png)"if (this.imgIndex <= 0) {// 让状态转化为死亡this.state = 3}} else if (this.state == 2) {// 拍打状态this.ele.style.backgroundImage = "url(./img/" + this.type + this.imgIndex + ".png)"this.imgIndex++if (this.imgIndex >= 10) {this.state = 3}}}}// 控制造狼的速度 以及狼移动速度let gameNum = 1let moveSpeed = 4let generSpeed = 60let langWo = [] // 狼窝，生成的狼对象都 push进去langWo// 控制造狼速度 控制狼的移动速度function gameFn() {gameNum++// 造狼的速度if (gameNum % generSpeed == 0) {let zuoBiao = pos_arr[my_random(0, pos_arr.length)]let type = my_random(1, 100) > 20 ? 'h' : 'x'let w = new Wolf(zuoBiao, type)// 展示到页面game.ele.append(w.ele)// 生成的加入到狼窝中langWo.push(w)}// 狼移动的速度if (gameNum % moveSpeed == 0) {// 遍历狼窝中的狼for (let i = 0; i < langWo.length; i++) {langWo[i].move()if (langWo[i].state == 3) {// 狼成为死亡的状态langWo[i].ele.remove() // 从页面上删除langWo.splice(i, 1) // 从langWo数组中删除}}}if (gameNum >= 100000) {gameNum = 1}// 动画帧 相当于重复执行 gameFnrequestAnimationFrame(gameFn)}// 加载所有的图片资源// 所有图片资源的地址let imgStrArr = ["./img/h0.png","./img/h1.png","./img/h2.png","./img/h3.png","./img/h4.png","./img/h5.png","./img/h6.png","./img/h7.png","./img/h8.png","./img/h8.png","./img/x0.png","./img/x1.png","./img/x2.png","./img/x3.png","./img/x4.png","./img/x5.png","./img/x6.png","./img/x7.png","./img/x8.png","./img/x9.png","./img/game_bg.jpg"]let imgObjArr = []function loadAll() {for (let i = 0; i < imgStrArr.length; i++) {let image = new Image()image.src = imgStrArr[i]image.onload = function () {imgObjArr.push(this)let persent = parseInt(imgObjArr.length / imgStrArr.length * 100)console.log("加载中。。。。" + persent + "%");if (persent == 100) {console.log('加载成功！');// 启动游戏startGame()}}}}// 启动游戏let game = nullfunction startGame() {// 创建game对象 将背景图设置好放在页面上game = new Game()body.append(game.ele)gameFn()}// 调用加载所有资源的函数loadAll()// 先加载图片资源 不至于图片在变换时出现频闪现象// 随机值函数function my_random(min, max) {return parseInt(Math.random() * (max - min) + min)}
</script></html>

js锅打灰太狼小游戏相关推荐

每个人都能制作的简易版狂拍灰太狼小游戏（HTML+CSS+JavaScript）
自制系列一完善版来了. 如果在制作过程中有任何问题你都可以私信我,我会一一答复你们的. 由于上一次发的进度条不是很完善,显得不美观,这次改进了进度条问题,使增强了游戏的体验感.制作过程很简单,每个人都 ...
网页版打地鼠小游戏源代码，网页版打灰太狼小游戏源码
网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码完整代码下载地址:网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码核心代码 <!DOCTYPE html> <html> ...
php 设计五子棋游戏,基于js+canvas实现五子棋小游戏
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下效果展示: 源码展示: 五子棋 * { margin: 0; padding: 0; } body { ma ...
利用js写的见缝插针小游戏
利用js写的见缝插针小游戏今天给大家带来的就是一款叫做<见缝插针>的游戏.有空你就往里插,直到你无处可插!看你能过多少关! 游戏截图失败时代码如下 js代码 index.js 测试游 ...
JS实现简单农场小游戏
JS实现简单农场小游戏简介效果展示代码实现在线预览简介最近抽空写了一个简单的农场小游戏,比较简陋,目的只是为了练习js开发能力. 游戏界面顶部包含昵称.经验值.等级和金币信息展示.经验的获 ...
JS实现植物大战僵尸小游戏，代码记录及效果展示
前几天看到了一个很有趣的demo,用js制作植物大战僵尸小游戏,本着学习的心态,对照着做了一下,发现这里面的一些代码设计的确很精妙,这里分享下源码和效果,如果有需要,可以看下. 效果如下: 下载地址
HTML+js实现猜字小游戏
HTML+js实现猜字小游戏代码实现: <!DOCTYPE html> <html><head><meta charset="utf-8" ...
JS青蛙吃害虫小游戏
下载地址 JS青蛙吃害虫小游戏是一款简单的HTML5喂青蛙小游戏源码,可以当做微信小程序. dd:
html5小游戏主要用的js,用js+HTML5实现的小游戏-- 捕鱼达人游戏
大家基本上都玩过捕鱼达人这款游戏吧,下面我就来一个用js+HTML5实现的小游戏 2.[代码] body, p, canvas { image-rendering: optimizeSpeed; -w ...
使用Pixi.js编写JavaScript网页小游戏
Pixi.js中文网https://pixijs.huashengweilai.com/PixiJSOfficial site for PixiJS, The HTML Creation Engine ...

js锅打灰太狼小游戏

js锅打灰太狼小游戏

js锅打灰太狼小游戏相关推荐

最新文章

热门文章