灰太狼个人版

最新推荐文章于 2023-12-21 14:38:58 发布

H佛山

最新推荐文章于 2023-12-21 14:38:58 发布

阅读量342

点赞数

本文链接：https://blog.csdn.net/h13803761292/article/details/81749892

版权

<!DOCTYPE html>

<html>

<head>

<title>01锅打灰太狼</title>

</head>

<body>

</div>

</div>

</body>

</html>

margin: 0;

padding: 0;

}

img{

vertical-align: top;

}

/*游戏界面*/

.gameFace{

width: 320px;

margin: 50px auto 0;

position: relative;

}

/*分数*/

#score{

position: absolute;

left: 60px;

top: 10px;

font-size: 20px;

color: white;

}

/*时间进度条*/

#progress {

width: 180px;

height: 16px;

position: absolute;

left: 63px;

top: 66px;

}

/*开始菜单/结束菜单*/

.begin,

.over

{

position: absolute;

left: 0;

right: 0;

top: 200px;

text-align:center ;

}

.begin a,

.over a,

.over span {

display: block;

text-decoration: none;

font-size: 40px;

color: red;

}

.over{

display: none;

}

/*将来用于给 JS生成狼(img) 设置 class*/

.wolf {

width: 80px;

position: absolute;

}

// 获取 gameFace

var gameFace = document.getElementsByClassName("gameFace")[0];

// 获取分数

var scoreDiv = document.getElementById("score");

// 获取时间进度条

var progressDiv = document.getElementById("progress");

// 获取开始菜单

var beginDiv = document.getElementsByClassName("begin")[0];

// 获取开始按钮

var startBtn = document.getElementById("start");

// 获取结束菜单

var overDiv = document.getElementsByClassName("over")[0];

// 获取再来一局按钮

var againBtn = document.getElementById("again");

// 开始按钮点击事件

startBtn.onclick = function() {

// 1, 隐藏开始菜单

beginDiv.style.display = "none";

// 2, 出狼(游戏开始)

wolfOut();

// 3, 时间变化

changeTime();

}

// 再来一局按钮点击事件

againBtn.onclick = function() {

// 1, 隐藏结束菜单

overDiv.style.display = "none";

// 2, 分数清零

scoreDiv.innerHTML = 0;

// 3, 出狼(游戏开始)

wolfOut();

// 3, 时间变化

changeTime();

}

* 出狼(游戏开始)

var wolfTimer;

function wolfOut () {

// 控制出狼的频率

wolfTimer = setInterval(function() {

// 一, 创建 img

var img = creatWolf();

// 1, 随机狼的名字

var name = randomNum(0, 100) > 20 ? "h" : "x";

// 2, 切换 img 的素材

var imgIndex = 0;

var flagImg = true;// 判断狼是否反向

var timer2 = setInterval(function() {

img.src = "img/" + name + imgIndex + ".png";

if (imgIndex >= 5) {

flagImg = false

}

if (flagImg) {

imgIndex++

} else{

imgIndex--

}

// 如果反向播放完毕

if (imgIndex < 0) {

// 删除 img

gameFace.removeChild(img);

// 清除计时器

clearInterval(timer2);

}

}, 100);

// 二, 给 img 关联点击事件

var isClick = true;

img.onclick = function () {

if (isClick) {

isClick = false;

//1,分数变化

if (name == "x") {

scoreDiv.innerHTML -=10;

} else{

scoreDiv.innerHTML = parseInt(scoreDiv.innerHTML) +10

}

//2,图片变化

var hitImg = 6;

//清除没有被打时的计时器

clearInterval(timer2);

var timer3 = setInterval(function() {

img.src = "img/" + name + hitImg + ".png";

hitImg++;

if (hitImg > 9) {

//删除 img

gameFace.removeChild(img);

//清除计时器:

clearInterval(timer3);

}

},200);

}

}, 1000);

}

// 定义二维数组, 存储洞口的位置

var points = [

[110, 137],

[30, 182],

[30, 245],

[195, 166],

[114, 216],

[210, 236],

[41, 318],

[130, 298],

[219, 319]

];

// 定义函数生成随机数

function randomNum (x, y) {

return Math.floor(Math.random() * (y - x + 1) + x);

}

// 定义函数完成狼的创建

function creatWolf () {

// 创建

var img = document.createElement("img");

// 配置 img

img.className = "wolf";

// 随机下标

var ran = randomNum(0, 8);

// 从 points 中取出随机的洞口(点)

var point = points[ran];

img.style.left = point[0] + "px";

img.style.top = point[1] + "px";

gameFace.appendChild(img);

return img;

}

* 时间变化

function changeTime () {

var width = 180;

var timer1 = setInterval(function(){

width--;

progressDiv.style.width = width + "px"

if (width <= 0) {

// 清除计时器

clearInterval(timer1);

//停止出狼

clearInterval(wolfTimer);

// 显示结束菜单

overDiv.style.display = "block";

}

}, 100)

}

H佛山

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
灰太狼个人版

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8" /&gt;&lt;title&gt;01锅打灰太狼&lt;/title&gt;&lt;link rel="stylesheet" type="text/
复制链接

扫一扫