0. 前言
现在网上的小游戏太多了，4399啊，7k7k啊什么的，就有这锅打灰太狼的游戏，觉得挺有意思，就做一个看看，哈哈！！！
timg.jpg
1. 简介
锅打灰太狼是一款老少通吃，男女皆宜的益智游戏，哈哈！
2. 思路
- 把静态页面做出来
- 找到每个洞穴
- 随机出现灰太狼和小灰灰让它们随机从洞穴出现
- 点击事件：打灰太狼加分，打小灰灰减分
- 添加时间，时间到了停止游戏
- 最终结果
3. 代码实现
3.1 静态页面
HTML结构
灰太狼
CSS样式
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
#outer{
background:url(game_bg.jpg) 0 0 no-repeat;
position: relative;
width: 320px;
height: 480px;
margin: 0 auto;
}
#fraction{
position: absolute;
left: 65px;
top: 13px;
color: white;
}
#time{
position: absolute;
width: 180px;
height: 16px;
left: 63px;
top: 66px;
background: url(progress.png) 0 0 no-repeat;
}
#wolfs{
position: absolute;
}
#wolfs img{
position:absolute;
}
#startMenu{
position: absolute;
width: 320px;
text-align: center;
left: 0;
top: 200px;
}
#start,#endMenu,#reload{
line-height:50px;
font-size:30px;
font-weight:bold;
color:#F00;
display:block;
text-decoration:none;
}
#endMenu{
position: absolute;
width: 320px;
text-align: center;
top: 200px;
left: 0;
display: none;
}
#reload{
position: absolute;
bottom: 0px;
left: 0px;
display: none;
}
图片.png
3.2 找到洞穴
//洞穴坐标
arrPos = [["98px","115px"],["17px","160px"],["15px","221px"],["30px","294px"],["122px","274px"],["207px","296px"],["200px","212px"],["187px","142px"],["100px","192px"]];
3.3 随机出现灰太狼和小灰灰让它们随机从洞穴出现
function creatWolf() {
wolfHouse.onclick = null;
//创建img显示狼
var wolfImg = document.createElement("img");
//设置狼的种类
var wolfType = randomNum(0, 10) > 3 ? "h" : "x";
//随机获取狼窝的位置
var a = randomNum(0, 9);
var position = arrPos[a];
//设置初始图片编号
wolfHouse.index = 0;
//设置未被点击
wolfHouse.clicked = false;
//设置img的src属性
wolfImg.src = wolfType + wolfHouse.index + ".png";
//将狼添加到页面
wolfHouse.appendChild(wolfImg);
//设置位置
wolfHouse.style.left = position[0];
wolfHouse.style.top = position[1];
// 让狼动起来
var tmp = -1;
var showTime = setInterval(function(){
tmp++;
if(tmp < liftCircle.length){
wolfHouse.index = liftCircle[tmp];
wolfImg.src = wolfType + wolfHouse.index + ".png";
}else{
clearInterval(showTime);
wolfHouse.removeChild(wolfImg);
}
},80);
3.4 点击事件：打灰太狼加分，打小灰灰减分
wolfHouse.onclick = function() {
clearInterval(timer);
//如果执行了点击就不要在点击了
if (this.clicked) {
return;
}
//分数
if (wolfType == "h") {
fraction.innerHTML = parseInt(fraction.innerHTML) + 10;
} else {
fraction.innerHTML = parseInt(fraction.innerHTML) - 10;
}
//关掉动画
wolfHouse.index = 5;
clearInterval(showTime);
var hitWolf = setInterval(function(){
if(wolfHouse.index < 10){
console.log(wolfHouse.index);
wolfImg.src = wolfType + wolfHouse.index + ".png";
wolfHouse.index++;
}else{
clearInterval(hitWolf);
wolfHouse.removeChild(wolfImg);
timer = setInterval(func, 1000)
}
}, 100);
this.clicked = true;
}
}
GIF.gif
3.5 添加时间
function timeLineRun(){
var timeLineTimer = setInterval(function(){
if(timeLine.offsetWidth > 0) {
timeLine.style.width = timeLine.offsetWidth - 1 + "px";
} else {
//清除计时器
clearInterval(timeLineTimer);
clearInterval(timer);
//关闭背景音乐
jsMusic.pause();
//出现结束语
endMenu.innerHTML = "game over!
你的得分是:" + fraction.innerHTML
endMenu.style.display = "block";
//出现重新开始
reloadBtn.style.display = "block";
}
}, 200);
}
3.6 最终结果
//进度条
var timeLine = document.getElementById("time");
//开始按钮
var startBtn = document.getElementById("start");
//开始菜单
var startMenu = document.getElementById("startMenu");
//结束菜单
var endMenu = document.getElementById("endMenu");
//分数
var fraction = document.getElementById("fraction");
//重新开始按钮
var reloadBtn = document.getElementById("reload");
//狼窝
var wolfHouse = document.getElementById("wolfs");
//背景音乐
var jsMusic = document.getElementById("music");
//动画周期
var liftCircle = [0,1,2,3,4,5,4,3,2,1,0],
//洞穴坐标
arrPos = [["98px","115px"],["17px","160px"],["15px","221px"],["30px","294px"],["122px","274px"],["207px","296px"],["200px","212px"],["187px","142px"],["100px","192px"]];
var timer = 0;
//点击开始
startBtn.onclick = function() {
startMenu.style.display = "none";
//进度条开始读条
timeLineRun();
//背景音乐
// jsMusic.play();
timer = setInterval(func, 1000);
};
function func() {
if (timeLine.offsetWidth > 0) {
//创建灰太狼
creatWolf();
} else {
clearInterval(timer);
}
}
function timeLineRun(){
var timeLineTimer = setInterval(function(){
if(timeLine.offsetWidth > 0) {
timeLine.style.width = timeLine.offsetWidth - 1 + "px";
} else {
//清除计时器
clearInterval(timeLineTimer);
clearInterval(timer);
//关闭背景音乐
jsMusic.pause();
//出现结束语
endMenu.innerHTML = "game over!
你的得分是:" + fraction.innerHTML
endMenu.style.display = "block";
//出现重新开始
reloadBtn.style.display = "block";
}
}, 200);
}
//重新开始
reloadBtn.onclick = function() {
window.location.reload();
}
function creatWolf() {
wolfHouse.onclick = null;
//创建img显示狼
var wolfImg = document.createElement("img");
//设置狼的种类
var wolfType = randomNum(0, 10) > 3 ? "h" : "x";
//随机获取狼窝的位置
var a = randomNum(0, 9);
var position = arrPos[a];
//设置初始图片编号
wolfHouse.index = 0;
//设置未被点击
wolfHouse.clicked = false;
//设置img的src属性
wolfImg.src = wolfType + wolfHouse.index + ".png";
//将狼添加到页面
wolfHouse.appendChild(wolfImg);
//设置位置
wolfHouse.style.left = position[0];
wolfHouse.style.top = position[1];
// 让狼动起来
var tmp = -1;
var showTime = setInterval(function(){
tmp++;
if(tmp < liftCircle.length){
wolfHouse.index = liftCircle[tmp];
wolfImg.src = wolfType + wolfHouse.index + ".png";
}else{
clearInterval(showTime);
wolfHouse.removeChild(wolfImg);
}
},80);
//给狼设置点击事件
wolfHouse.onclick = function() {
clearInterval(timer);
//如果执行了点击就不要在点击了
if (this.clicked) {
return;
}
//分数
if (wolfType == "h") {
fraction.innerHTML = parseInt(fraction.innerHTML) + 10;
} else {
fraction.innerHTML = parseInt(fraction.innerHTML) - 10;
}
//关掉动画
wolfHouse.index = 5;
clearInterval(showTime);
var hitWolf = setInterval(function(){
if(wolfHouse.index < 10){
wolfImg.src = wolfType + wolfHouse.index + ".png";
wolfHouse.index++;
}else{
clearInterval(hitWolf);
wolfHouse.removeChild(wolfImg);
timer = setInterval(func, 1000)
}
}, 100);
this.clicked = true;
}
}
GIF.gif
4. 结束语
最后的效果也就是这样了，如果你觉得哪里写的不够好，有什么好的建议，可以给我留言告诉我，谢谢，三克油！！！