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

前言

今天，我们用原生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

结语

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