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

前言

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

效果

（非静止八神）

分别按W、S、A、D键可实现位置移动，并且效果真实。

源码

html与css很简单，主要是js中有几点需要注意的。

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高级程序设计》（第四版）电子书。

我创建了一个技术交流、文章分享群，群里有很多大厂的前端大佬，关注公众号后，点击下方菜单了解更多即可加我微信，期待你的加入。