天哪！几行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"

 

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119946007

posted @ 2022-06-23 16:56  忘川信使  阅读(154)  评论(0)  编辑  收藏  举报