天哪！几行js代码就可以实现拳皇小游戏
前端历劫之路
共 3298字，需浏览 7分钟
·
2021-02-22 00:07
前言
今天，我们用原生JS实现一个拳皇人物位置控制的小效果。话不多说，我们赶紧来看下如何实现吧！
效果
（非静止八神）
分别按W、S、A、D键可实现位置移动，并且效果真实。
源码
html与css很简单，主要是js中有几点需要注意的。
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.onkeydown=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高级程序设计》（第四版）电子书。我创建了一个技术交流、文章分享群，群里有很多大厂的前端大佬，关注公众号后，点击下方菜单了解更多即可加我微信，期待你的加入。
评论