第一次打完血量，再刷新就打不了了

根据这个链接https://class.imooc.com/course/qadetail/202371

的提示修改了老师的源码测试了还是不行。

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
body{position: relative;height: 100%;}
html{height: 100%;}
 
.guai{position: absolute;left: 50%;top: 50%;margin: -75px 0 0 -100px;}
.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%;background: red;transition: .3s;}
 
    </style>
</head>
<body>
    <div class='line'>
        <div class='xie'></div>
    </div>
    <img src="1.jpeg" class='guai'>
    <script type="text/javascript">
        var num = 0,timer = null,max = 400,
        xieNode = document.querySelector('.xie');
 
        if(localStorage.x){
            max = parseInt(localStorage.x);
            xieNode.style.width = max + 'px';
        };
 
 
        onclick = function(){
            var r = Math.random() * 5 + 5;
            max -= r;
 
            localStorage.setItem('x',max);
            console.log(localStorage)
            xieNode.style.width = max + 'px';
 
 
            clearInterval(timer);
            timer = setInterval(function(){
                num++;
                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)
        }
 
 
 
    </script>
</body>
</html>