锅打灰太狼

最新推荐文章于 2022-01-10 16:31:49 发布

HL_S

最新推荐文章于 2022-01-10 16:31:49 发布

阅读量241

点赞数 1

分类专栏： JS 学习

本文链接：https://blog.csdn.net/A1336375772/article/details/79558858

版权

JS 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

学习

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>

<head>

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

margin: 0;

padding: 0;

list-style: none;

}

ul{

margin:0 auto;

width: 320px;

height: 480px;

background-image:url(img/game_bg.jpg) ;

position: relative;

}

li:nth-of-type(1){

position: absolute;

left: 60px;

top:2px;

color: white;

font-size: 30px;

}

li:nth-of-type(2){

position: absolute;

left: 20%;

top: 30%;

text-align: center;

color: red;

font-size:50px ;

text-shadow: 2px 0px 5px yellow;

cursor: pointer;

}

li:nth-of-type(3){

position: absolute;

left: 13%;

top: 30%;

text-align: center;

color: red;

font-size:40px ;

text-shadow: 2px 0px 5px yellow;

cursor: pointer;

display: none;

}

li:nth-of-type(4){

position: absolute;

left: 20%;

top: 13.5%;

cursor: pointer;

}

img{

cursor: pointer;

}

</style>

</head>

<body>

</ul>

</div>

//分数

var scores = document.getElementById("scores");

//进度条

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

//开始游戏模块

//结束游戏模块

//开始游戏按钮

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

//再来一局按钮

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

//游戏区域

var gameDiv = document.getElementById("gameDiv");

//位置数组

var locationArr = [

[110, 137],

[30, 182],

[30, 245],

[195, 166],

[114, 216],

[210, 236],

[41, 318],

[130, 298],

[219, 319]

];

//随机数

function randomNumber(x,y){

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

}

//游戏开始按钮点击事件

startBtn.onclick =function(){

//隐藏开始游戏区域

startBtn.style.display = "none";

//开始倒计时

countDown();

//开始游戏

startGame();

}

//封装开始游戏函数

var timer1;

var timer2;

var img;

var name;

//声明一个变量存储分数

var score = 0;

function startGame(){

timer1 = setInterval(function(){

//创建img标签

img = createWolf();

//添加点击事件

img.onclick = clickImg;

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

var index = 0;

//声明一个布尔值存储是否应该反向换图

var isReverse = false;

timer2 = setInterval(function(){

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

if(index == 5){

isReverse = true;

}

if(isReverse == false){

index++;

}else{

index--;

}

if(index == -1){

clearInterval(timer2);

gameDiv.removeChild(img);

}

},80)

},2000)

}

//创建图片的函数

function createWolf(){

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

//获取随机位置

var rA = locationArr[randomNumber(0,8)];

//设置元素绝对定位

img.style.position = "absolute";

//设置left值

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

//重置图片大小

img.style.width = "80px";

//设置top值

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

gameDiv.appendChild(img);

return img;

}

//图片点击事件函数

function clickImg(){

this.onclick = null;

//清除timer2

clearInterval(timer2);

//声明一个变量存储被打图片的张数

var hitIndex = 6;

var timer3= setInterval(function(){

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

hitIndex++;

if(hitIndex == 10){

clearInterval(timer3);

gameDiv.removeChild(img);

}

},80);

//根据图片名字更新分数

if(name=="h"){

score +=10;

}else{

score -=10;

}

scores.innerHTML = score;

}

progressA.style.height = "16px";

againBtn.onclick = function(){

progressA.style.width = b +"px";

againBtn.style.display = "none";

scores.innerHTML = "0";

score = 0;

countDown();

startGame();

}

var b;

function countDown(){

var t = 0;

b = progressA.offsetWidth;

var c = -b;

var d = 2000;

var timer4 =setInterval(function(){

t++;

if(t == d){

var n = setInterval(function(){},10);

for (var i =0; i<n;i++){

clearInterval(i);

}

againBtn.style.display = "block";

}

progressA.style.width = Tween.Linear(t,b,c,d) + "px" ;

},10)

}

</script>

</body>

</html>

HL_S

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录