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

前言

创新互联是一家专业提供工农企业网站建设,专注与成都做网站、成都网站建设、H5技术、小程序制作等业务。10年已为工农众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

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

效果

(非静止八神)

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

源码

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

 
 
 
 
  
  
  
     
  
  
     
  
  
     
  
  
      
  
  
   游戏动作控制(设计模式)

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();

}

源码地址

源码如下，大家可以按照这个思路丰富下效果，实现一个完整的拳皇游戏。

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

结语

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

分享题目：天哪！几行js代码就可以实现拳皇小游戏
本文路径：http://www.shufengxianlan.com/qtweb/news18/272668.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联