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

前言

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

（非靜止八神）

分別按W、S、A、D鍵實現(xiàn)不同的效果。
源碼

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]]();
        }
    }
 
  // 創(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.οnkeydοwn=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

 

結語

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

        歡迎關注我的公眾號前端歷劫之路
        回復關鍵詞電子書，即可獲取12本前端熱門電子書。
        回復關鍵詞紅寶書第4版，即可獲取最新《JavaScript高級程序設計》（第四版）電子書。
        我創(chuàng)建了一個技術交流、文章分享群，群里有很多大廠的前端大佬，關注公眾號后，點擊下方菜單了解更多即可加我微信，期待你的加入。
 

 

 

作者：Vam的金豆之路

主要領域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路