天哪！几行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"
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354更多内容请见原文，原文转载自:http://www.mark-to-win.com/tutorial/50892.html
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读