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

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

開(kāi)發(fā) 前端

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

前言

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

效果

[[383071]]

(非靜止八神)

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

源碼

html與css很簡(jiǎn)單，主要是js中有幾點(diǎn)需要注意的。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>游戲動(dòng)作控制(設(shè)計(jì)模式)</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("前進(jìn)"); 
   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)建一個(gè)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>

源碼地址

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

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

結(jié)語(yǔ)

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

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

js 小游戲技術(shù)

自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

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

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