npc随机移动，player控制键盘去“吃”npc,吃掉得分。

本文链接：https://blog.youkuaiyun.com/wangxue8203/article/details/82460115

这是一个简单的HTML5游戏，描述了如何在游戏区域内随机生成NPC并使其移动，玩家通过键盘控制角色与NPC碰撞，碰撞时NPC消失，玩家得分。目前游戏未设置角色边界限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能简述：在可视区域内随机生成一个npc,并随机移动，玩家通过键盘wasd或上下左右键控制player移动，触碰到npc时，npc消失，玩家得一分，并再次随机产生一个npc。

不足：没有给player加边界限制。

效果如下图：

实现代码如下：

<!DOCTYPE html >
<html >
<head>
<meta charset="UTF-8">
<title>hello</title>
<style type="text/css">
   *{
       padding: 0px;
       margin: 0px;
   }
   body{
       background: wheat;
   }
   .contain{
       position: relative;

   }
   .npc{
       height: 50px;
       width:50px;
       background-color: brown;
       position: absolute;

   }
   .move{
       height: 50px;
       width: 50px;
       background-color: red;
       position: absolute;

   }
</style>
</head>
<body>
<div class="contain">
   <h1>得分:</h1>
   <div class="npc" id="npc">npc</div>
   <div class="move" id="move">move</div>
</div>
<script type="text/javascript">
   var npc=document.getElementById('npc');
   var mymove=document.getElementById('move');
   var hyi=document.getElementsByTagName('h1')[0];
   var defen=0;
   var left=500;//npc初始位置
   var top1=200;
   var is_xiangyou=true;//npc是否向右移动
   var is_xiangxia=true;
   var mytime;

   mytime=setInterval("npcyidong()",5);
   function npcyidong() {
       //console.log(left)
       if (parseInt(npc.style.left)>=1300) {
           is_xiangyou=false;
       }
       else if(parseInt(npc.style.left)<0){
           is_xiangyou=true;
       }
       switch(is_xiangyou){
           case true :
           left++;
           break;
           case false:
           left--;
           break;
           default:
               console.log(is_xiangyou)
           break;
       }

       if (parseInt(npc.style.top)>=700) {
           is_xiangxia=false;
           console.log(is_xiangxia)
       }
       else if(parseInt(npc.style.top)<0){
           is_xiangxia=true;
           console.log(is_xiangxia)
       }
       switch(is_xiangxia){
           case true :
           top1++;
           break;
           case false:
           top1--;
           break;
           default:
               console.log(is_xiangxia)
           break
       }
       npc.style.left=left+"px";
       npc.style.top=top1+"px";

       //碰到了,停止运动。四种情况，左右上下
       if(myleft>npc.offsetLeft-move.offsetWidth&&myleft<npc.offsetLeft+npc.offsetWidth&&
           mytop>npc.offsetTop-move.offsetHeight&&
           mytop<npc.offsetTop+npc.offsetHeight
           ){
           //alert("碰到了")
           var ran=parseInt(Math.random()*1000);
           console.log(ran)
           defen=defen+1;
           left=ran;
           top1=ran/2;
           hyi.innerHTML="得分："+defen;
       }
   }

}
</script>
</body>
</html>