JavaScript锅打灰太狼游戏

利用原生js实现锅打灰太狼

下面是页面效果图

页面html代码如下

<!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,user-scalable=0"/><title>Document</title><link rel="stylesheet" href="css/index.css"></head><body><div class="container"><!-- 积分 --><div class="score">0</div><!-- 进度条 --><div class="bar"></div><!-- 狼的容器 --><div class="content"></div><!-- 开始页面 --><div class="start"><button class="gameStart">开始</button></div><!-- 结束页面 --><div class="end">GAME OVER<button class="gameEnd">重新开始</button></div></div></body><script src="js/index.js"></script>
</html>

主要功能

实现灰太狼与小灰灰的随机出现和上下移动，以及拍打灰太狼时计分器加分，当拍打小灰灰时计分器减分，进度条结束时游戏结束

主要难点

实现图片上下移动时画面的流畅度，以及拍打灰太狼时的变化

图片上下移动js代码如下

利用两个定时器来解决图片上下时的卡顿问题，提高画面的流畅度

setInterval(function () {var wolf = createWolf();// 狼上升的方法wolf.up = setInterval(function () {wolf.index++;if (wolf.index > 4) {clearInterval(wolf.up);downTimer();}wolf.setAttribute("src", `img/${wolf.type}${wolf.index}.png`);}, 120);// 狼下降的时间function downTimer() {wolf.down = setInterval(function () {wolf.index--;if (wolf.index <= 0) {wolfs.removeChild(wolf);clearInterval(wolf.down);}wolf.setAttribute("src", `img/${wolf.type}${wolf.index}.png`);}, 120);}wolfClick(wolf);}, 1200);

拍打灰太狼代码如下


function wolfClick(wolf) {wolf.onclick = function () {// 解决多次点击问题wolf.onclick = null;var sc = parseInt(score.innerHTML);if (wolf.type == "h") {score.innerHTML = sc + 10;}if (wolf.type == "x") {score.innerHTML = sc - 10;}wolf.index = 9;// 清除上升下降定时器clearInterval(wolf.up);clearInterval(wolf.down);wolf.clickTimer = setInterval(function () {wolf.index--;if (wolf.index <= 0) {wolfs.removeChild(wolf);clearInterval(wolf.clickTimer);}wolf.setAttribute("src", `img/${wolf.type}${wolf.index}.png`);}, 100);};
}

下面是运用的主要的两个函数方法

获取随机数的函数方法


function GetRandomInt(min, max) {return parseInt(Math.random() * (max - min + 1) + min);
}

获取所有定时器的函数方法


function timer() {var timer = setInterval(function () {}, 10);//循环清除定时器for (var i = 0; i < timer; i++) {clearInterval(i);}
}

还有许多不足继续完善，继续加油努力

JavaScript锅打灰太狼游戏相关推荐

jQuery写经典游戏：锅打灰太狼
没看源代码,可能思路有些不一样,还做了如下优化: 1.增加了音效增加了狼儿钻回洞里的动画. 2.计分规则 3.设置了combo系统, 连续5个combo 时间+10S 4.打小灰灰会减分减时间 5 ...
一步步教你做“锅打灰太狼”
今天给大家分享做一个小游戏"锅打灰太狼". 首先,我们先来完成一个开始游戏的界面上代码 //HTML代码 <div class="boss">&l ...
从零开发一个灰太狼游戏是什么样的体验？（建议收藏）
极客江南: 一个对开发技术特别执着的程序员,对移动开发有着独到的见解和深入的研究,有着多年的iOS.Android.HTML5开发经验,对NativeApp.HybridApp.WebApp开发有着独 ...
Javascript开发的HTML5游戏的知识产权保护
Javascript开发的HTML5游戏的知识产权保护,其实这里面保护了两个部分,一个是及时注册相关商标和专利,一个是程序的核心算法,核心数据和用户数据的保护. 本文主要讨论第二个方面,在当前这个时间 ...
应用zip压缩的javascript以及Egret H5游戏实战
代码地址如下: http://www.demodashi.com/demo/11039.html 主要起因是策划对最快进入登录界面有硬性要求(3秒),那么最开始加载的文件越小越好.对H5的游戏程序进行 ...
视频教程-JavaScript打飞机小游戏视频教程-JavaScript
JavaScript打飞机小游戏视频教程拥有6年web前端和后端开发经验,4年授课经验,还曾在百度专业培训过网络营销课程,曾就职于联想集团和当当网,不仅有丰富的项目实战经验还有营销经验,综合实力较强 ...
JavaScript:实现Sudoku数独游戏算法（附完整源码）
JavaScript:实现Sudoku数独游戏算法 class Sudoku {constructor (board) {this.board = board}findEmptyCell () {// ...
用javascript编写的小游戏-打砖块
用javascript编写的小游戏-打砖块前言启发下载链接游戏功能说明代码效果演示代码后记前言这是我在CSDN发表的第一篇文章.是我在初学javascript后, 忽然来了兴致, 编 ...
JavaScript实现2048小游戏，我终于赢了一把
JavaScript实现2048小游戏作者简介作者名: 简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢 ...
JavaScript网页特效-“扫雷”游戏随机布雷功能
"扫雷"游戏是一款经典益智小游戏.游戏目标是在最短的时间内找出所有非雷格子,同时避免踩雷,踩到一个雷即全盘皆输.本节介绍"扫雷"游戏随机布雷功能的设计与实现. ...

JavaScript锅打灰太狼游戏

JavaScript锅打灰太狼游戏相关推荐

最新文章

热门文章