java血条怎么画_JavaScript实现点击画面震动血条掉血的简易游戏效果

game

*{

margin: 0;

padding: 0;

list-style: none;

}

html,body{

height: 100%;

}

body{

position: relative;

}

img{

width: 300px;

height: 300px;

}

.guai{

position: absolute;

left: 50%;

top: 50%;

margin: -150px 0 0 -150px;

}

.line{

width: 400px;

height: 20px;

border: 4px solid black;

position: absolute;

left: 50%;

top: 20px;

margin:0 0 0 -204px;

}

.xie{

width: 400px;

height: 100%;

transition:.3s;

background-color: red;

}

var num = 0,timer = null,max = 400,

xieNode = document.querySelector('.xie');

if(localStorage.x){ 　　　　　//从localStorage中取出上次血量

max = localStorage.x;

xieNode.style.width = max + 'px';

};

onclick = function(){

var r = Math.random() * 5 + 5;

max -= r;

localStorage.setItem('x',max); //将血量存到localStorage中

console.log(localStorage)

xieNode.style.width = max + 'px';

clearInterval(timer); //实现画面震动效果

timer = setInterval(function(){

num++; //num控制画面震动时间，点击一下后，每隔30ms震动一次，震动10次

if(num == 10){

clearInterval(timer);

num = 0;

document.body.style.left = 0;

document.body.style.top = 0;

return;

};

document.body.style.left = Math.random() * -20 + 10 + 'px';

document.body.style.top = Math.random() * -20 + 10 + 'px';

},30)

}