前言
今天，我们用原生JS实现一个拳皇人物位置控制的小效果。话不多说，我们赶紧来看下如何实现吧！
效果
（非静止八神）
分别按W、S、A、D键可实现位置移动，并且效果真实。
源码
html与css很简单，主要是js中有几点需要注意的。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>游戏动作控制(设计模式)</title> 6 <style> *{ 7 margin: 0; 8 padding: 0; 9 } 10 html{ 11 height:100%; 12 background: url('images/bg.jpg') no-repeat; 13 background-size:100% 100%; 14 } 15 #site{ 16 height: 100%; 17 } 18 img{ 19 position: absolute; 20 bottom: 50px; 21 width: 200px; 22 height: 350px; 23 } </style> 24</head> 25<body> 26 <div id="site"> 27 <img src="images/YAGAMI/stand.gif" alt="" id="MC" data-name="n1"> 28 </div> 29</body> 30<script type="text/javascript"> var pl=document.getElementById("MC"); 31 var i=1; 32 33 // 行为表 34 var skill={ 35 "n1":{ 36 "d1":function(){ 37 console.log("前进"); 38 play.getImg().src="images/YAGAMI/advance.gif" 39 play.getImg().style.left=i+"px" 40 }, 41 "d2":function(){ 42 console.log("后退"); 43 play.getImg().src="images/YAGAMI/retreat.gif" 44 }, 45 "d3":function(){ 46 console.log("站立"); 47 play.getImg().src="images/YAGAMI/stand.gif" 48 }, 49 "d4":function(){ 50 console.log("暴起"); 51 play.getImg().src="images/YAGAMI/bq.gif" 52 } 53 54 } 55 } 56 //键位表 57 var active={ 58 "68":"d1", 59 "65":"d2", 60 "83":"d3", 61 "87":"d4" 62 } 63 64 // 操作 65 function set(obj,key){ 66 if(!active[key])return; 67 return function(){ 68 var name=obj.getName(); 69 skill[name][active[key]](); 70 } 71 } 72 73 // 创建一个Play类 74 function Play(pl){ 75 var imgNade =pl; 76 var name=pl.getAttribute("data-name"); 77 this.getImg=function(){ 78 return imgNade; 79 } 80 this.getName=function(){ 81 return name; 82 } 83 } 84 var play=new Play(pl); 85 86 // 按下 87 document.onkeydown=function(e){ 88 i+=10; 89 var key=e.keyCode; 90 var fu=set(play,key); 91 if(fu){ 92 fu(); 93 } 94 }</script> 95</html> 96
源码地址
源码如下，大家可以按照这个思路丰富下效果，实现一个完整的拳皇游戏。
1https://github.com/maomincoding/game_kz.git 2
结语
谢谢阅读，希望没有浪费您的时间。这篇文章篇幅较短，主要是给大家实现一个小效果。
欢迎关注我的公众号
前端历劫之路回复关键词
电子书，即可获取12本前端热门电子书。回复关键词
红宝书第4版，即可获取最新《JavaScript高级程序设计》（第四版）电子书。我创建了一个技术交流、文章分享群，群里有很多大厂的前端大佬，关注公众号后，点击下方菜单了解更多即可加我微信，期待你的加入。
本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/3RNSktJWBNL081bYlxvUOw，如有侵权，请联系删除。