前言
今天，我们用原生JS实现一个拳皇人物位置控制的小效果。话不多说，我们赶紧来看下如何实现吧！
效果
非静止八神）
分别按W、S、A、D键实现不同的效果。
源码
html与css很简单，主要是js中有几点需要需要注意的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>游戏动作控制(设计模式)</title> <style> *{ margin: 0; padding: 0; } html{ height:100%; background: url('images/bg.jpg') no-repeat; background-size:100% 100%; } #site{ height: 100%; } img{ position: absolute; bottom: 50px; width: 200px; height: 350px; } </style> </head> <body> <div id="site"> <img src="images/YAGAMI/stand.gif" alt="" id="MC" data-name="n1"> </div> </body> <script type="text/javascript"> var pl=document.getElementById("MC"); var i=1; // 行为表 var skill={ "n1":{ "d1":function(){ console.log("前进"); play.getImg().src="images/YAGAMI/advance.gif" play.getImg().style.left=i+"px" }, "d2":function(){ console.log("后退"); play.getImg().src="images/YAGAMI/retreat.gif" }, "d3":function(){ console.log("站立"); play.getImg().src="images/YAGAMI/stand.gif" }, "d4":function(){ console.log("暴起"); play.getImg().src="images/YAGAMI/bq.gif" } } } //键位表 var active={ "68":"d1", "65":"d2", "83":"d3", "87":"d4" } // 操作 function set(obj,key){ if(!active[key])return; return function(){ var name=obj.getName(); skill[name][active[key]](); } } // 创建一个Play类 function Play(pl){ var imgNade =pl; var name=pl.getAttribute("data-name"); this.getImg=function(){ return imgNade; } this.getName=function(){ return name; } } var play=new Play(pl); // 按下 document.onkeydown=function(e){ i+=10; var key=e.keyCode; var fu=set(play,key); if(fu){ fu(); } } </script> </html>
源码地址
源码如下，大家可以按照这个思路丰富下效果，实现一个完整的拳皇游戏。
https://github.com/maomincoding/game_kz.git
结语
谢谢阅读，希望没有浪费您的时间。这篇文章篇幅较短，主要是给大家实现一个小效果。
