天哪！幾行js代碼就可以實現(xiàn)拳皇小游戲

作者：maomin9761 2021-02-23 07:01:24

開發(fā) 前端

今天，我們用原生JS實現(xiàn)一個拳皇人物位置控制的小效果。話不多說，我們趕緊來看下如何實現(xiàn)吧!

前言

今天，我們用原生JS實現(xiàn)一個拳皇人物位置控制的小效果。話不多說，我們趕緊來看下如何實現(xiàn)吧!

效果

[[383071]]

(非靜止八神)

分別按W、S、A、D鍵可實現(xiàn)位置移動，并且效果真實。

源碼

html與css很簡單，主要是js中有幾點需要注意的。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>游戲動作控制(設(shè)計模式)</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]](); 
  } 
 } 
   
  // 創(chuàng)建一個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>

源碼地址

源碼如下，大家可以按照這個思路豐富下效果，實現(xiàn)一個完整的拳皇游戲。

https://github.com/maomincoding/game_kz.git

結(jié)語

謝謝閱讀，希望沒有浪費您的時間。這篇文章篇幅較短，主要是給大家實現(xiàn)一個小效果。

責(zé)任編輯：姜華來源：前端歷劫之路

js 小游戲技術(shù)