这篇我们要讲的是用原生JS实现游戏动画-锅打灰太狼。
请先打开此网站http://pan.baidu.com/s/1kVFmmZd下载素材。
依然是源码加注释讲解。
有兴趣的朋友可以对照着把这个改成使用jQuery完成。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
/*游戏背板*/
#waper{
position: relative;
width: 320px;
height: 480px;
margin: 0 auto;
background-image: url('./images/game_bg.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
/*得分*/
#score_box{
position: absolute;
left: 60px;
top:11px;
font-size: 20px;
font-weight: bold;
color: white;
}
/*计时器样式*/
#progress_box{
position: absolute;
left: 63px;
top: 66px;
width: 180px;
height: 18px;
background-image: url('./images/progress.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#wolf_box img{
position: absolute;
}
/*开始菜单*/
#menu{
position: absolute;
left: 0;
top: 200px;
width: 320px;
text-align: center;
}
#star,#handle,#gameOver{
font-size: 30px;
line-height: 50px;
font-weight: bold;
color: #f60;
cursor: pointer;
}
/*结束菜单*/
#gameOver{
position: absolute;
left: 0;
top: 200px;
width: 320px;
height: 200px;
text-align: center;
display: none;
}
</style>
</head>
<body>
<!-- 游戏界面 -->
<!-- 游戏背板 -->
<div id="waper">
<!-- 游戏积分器 -->
<div id="score_box">0</div>
<!-- 游戏计时器 -->
<div id="progress_box"></div>
<!-- 狼容器 -->
<div id="wolf_box"></div>
<!-- 游戏开始菜单 -->
<div id="menu">
<div id="star">开始</div>
<div id="handle">游戏介绍</div>
</div>
<!-- 游戏结束菜单 -->
<div id="gameOver">游戏结束</div>
</div>
</body>
<script type="text/javascript">
// 获取到页面中所有的节点
// 分数
var scoreBox = document.querySelector('#score_box');
//计时器进度条
var progressBox = document.querySelector('#progress_box');
//存放狼图片的容器
var wolfBox = document.querySelector('#wolf_box');
//游戏开始菜单
var menu = document.querySelector('#menu');
//开始游戏按钮
var star = document.querySelector('#star');
//结束游戏按钮
var gameOver = document.querySelector('#gameOver')
//下面的console.log是为了测试下我们的获取有没有出现问题
// console.log(scoreBox);
// console.log(progressBox);
// console.log(wolfBox);
// console.log(menu);
// console.log(star);
// console.log(gameOver);
// 保存创建狼的定时器
var createWolfTimer = null;
// 狼诞生的坐标 就是在哪个洞里钻出来
var arrPos = [
{left:"98px",top:"115px"},
{left:"17px",top:"160px"},
{left:"15px",top:"220px"},
{left:"30px",top:"293px"},
{left:"122px",top:"273px"},
{left:"207px",top:"295px"},
{left:"200px",top:"211px"},
{left:"187px",top:"141px"},
{left:"100px",top:"185px"}
]
// 开始游戏按钮的触发游戏开始
star.onclick = function(){
//调用开始游戏的函数
gameStarFn()
}
//定义开始游戏的函数
function gameStarFn() {
//1、隐藏开始菜单
menu.style.display='none'
// 2、开启定时器
progressFn()
// 3、控制灰太狼的出现和消失 频率：0.8秒出现一次
createWolfTimer = setInterval(function(){
// 3、1 创建灰太狼并保存下来
var wolf = createWolf();
// 3、2让狼站起来、蹲下去
wolf.appearTimer = setInterval(function(){
// 让保存狼图片的下标的属性增加1
wolf.index++;
// 如果下标超过5，则需要让狼下蹲操作
if(wolf.index>=5){
// 执行蹲下去的操作
clearInterval(wolf.appearTimer);
// 调用让狼蹲下去的操作
wolf.disapper()
}else{
// 把下一张狼的图片配置进去
wolf.src = './images/'+wolf.type+wolf.index+'.png';
}
},150)
// 定义让狼蹲下去的方法
wolf.disapper = function(){
wolf.disapperTimer = setInterval(function(){
wolf.index--;
// 判断下标是否为0；
if(wolf.index<=0){
// 清理下蹲定时器
clearInterval(wolf.disapperTimer);
//清理img标签
// 如果盛放狼图案的标签中有子元素，则清除子元素
wolfBox.children.length > 0 && wolfBox.removeChild(wolf);
}else{
wolf.src='./images/'+wolf.type+wolf.index+'.png';
}
},150)
}
//给狼添加打击事件
beatWolf(wolf);
},800)
}
// 定义开启定时器函数
function progressFn(){
// 获取到进度条的总长
var progressLength = progressBox.offsetWidth;
// console.log(progressLength);
// 开启定时器，每隔0.1秒钟，修改一次进度条
var progressTimer = setInterval(function(){
//判断总长度是否为零，为零则清掉定时器
if(progressLength<=0){
clearInterval(progressTimer)
// 结束游戏
gameOverFn();
}else{
progressLength -= 1
}
progressBox.style.width = progressLength+'px';
},100)
}
// 定义创建狼的函数
function createWolf(){
// 创建img标签。配置参数，拼进文档流
var wolf = document.createElement('img')
// 控制灰太狼和小灰灰出现的比例：8:2
wolf.type = rand(0,100)<80? 'h' : 'x';
// 用来保存当前灰太狼图片标号
wolf.index = 0;
// 给img标签设置属性
wolf.src = './images/'+ wolf.type + wolf.index+'.png';
// 获取狼诞生的坐标点
var point = rand(0,9)
wolf.style.left = arrPos[point].left;
wolf.style.top = arrPos[point].top;
// 把狼图标拼接进文档流
wolfBox.appendChild(wolf);
return wolf;
}
// 定义打击狼的函数
function beatWolf(wolf){
// 标识符 标示狼是否已经被打击
wolf.beat = false;
//给狼添加点击事件函数
wolf.onclick = function(){
// 判断是否已经打击过该狼
if(wolf.beat){
return;
}
// 如果上面的分支未执行，则标示狼未被打击，执行打击逻辑
// 把狼的标签为已打击状态
wolf.beat = true;
// 计算分数
scroing(wolf);
// 执行被打击时的动画效果
// 把狼站起来和蹲下去的代码清理掉
clearInterval(wolf.appearTimer);
clearInterval(wolf.disapperTimer);
wolf.index = 5;
wolf.beatInter = setInterval(function(){
wolf.index++;
// 判断图片下标是否到9
if(wolf.index>=9){
// 清理当前定时器
clearInterval(wolf.beatInter);
// 移除标签
wolfBox.removeChild(wolf);
return
}
// 修改狼被打击的效果
wolf.src = './images/'+wolf.type+wolf.index+'.png'
},150)
}
}
//定义点击结束按钮时，让他从新来一局
gameOver.onclick =function () {
// 还原进度条和计分器 隐藏“游戏结束”四个字
progressBox.style.width='180px';
scoreBox.innerHTML=0;
gameOver.style.display = 'none'
// 调用开始函数
gameStarFn()
}
// 定义积分器函数
function scroing(wolf){
// 获取到当前的得分
var score = parseInt(scoreBox.innerHTML)
// 根据用户打击的狼类型，计算得分
if(wolf.type=='h'){
scoreBox.innerHTML=score+10;
}else {
scoreBox.innerHTML = score - 10;
}
}
//定义游戏结束函数
function gameOverFn(){
//弹出游戏结束菜单
gameOver.style.display = 'block'
// 清理创建狼的定时器
clearInterval(createWolfTimer);
}
// 定义指定范围的随机函数
function rand(min,max){
return parseInt(Math.random()*(max-min)+min);
}
</script>
</html>
