天哪！几行js代码就可以实现拳皇小游戏

╰半夏微凉° 2021-09-07 06:12 476阅读 0赞

## 前言 ##

今天，我们用原生JS实现一个拳皇人物位置控制的小效果。话不多说，我们赶紧来看下如何实现吧！

## 效果 ##

![dd2c9d72ecacb3eca2115232044723de.png][]

（非静止八神）

分别按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

## 结语 ##

谢谢阅读，希望没有浪费您的时间。这篇文章篇幅较短，主要是给大家实现一个小效果。

>  *  欢迎关注我的公众号`前端历劫之路`
>  *  回复关键词`电子书`，即可获取12本前端热门电子书。
>  *  回复关键词`红宝书第4版`，即可获取最新《JavaScript高级程序设计》（第四版）电子书。
>  *  我创建了一个技术交流、文章分享群，群里有很多大厂的前端大佬，关注公众号后，点击下方菜单了解更多即可加我微信，期待你的加入。

[dd2c9d72ecacb3eca2115232044723de.png]: /images/20210813/18e5e1791fa141089d8b187fd7aacdcd.png