天哪！幾行js代碼就可以實現(xiàn)拳皇小游戲
前言
今天，我們用原生JS實現(xiàn)一個拳皇人物位置控制的小效果。話不多說，我們趕緊來看下如何實現(xiàn)吧！
效果
（非靜止八神）
分別按W、S、A、D鍵可實現(xiàn)位置移動，并且效果真實。
源碼
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]]();
}
}
// 創(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.onkeydown=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)建了一個技術交流、文章分享群，群里有很多大廠的前端大佬，關注公眾號后，點擊下方菜單了解更多即可加我微信，期待你的加入。
評論
圖片
表情