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

前言

今天，我们用原生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.οnkeydοwn=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高级程序设计》（第四版）电子书。
        我创建了一个技术交流、文章分享群，群里有很多大厂的前端大佬，关注公众号后，点击下方菜单了解更多即可加我微信，期待你的加入。
 

 

 

作者：Vam的金豆之路

主要领域：前端开发

我的微信：maomin9761

微信公众号：前端历劫之路