天哪！几行js代码就可以实现拳皇小游戏

最新推荐文章于 2024-08-09 08:14:24 发布

Vam的金豆之路

最新推荐文章于 2024-08-09 08:14:24 发布

阅读量3.1k

点赞数 1

分类专栏： JaveScript

本文链接：https://blog.csdn.net/qq_39045645/article/details/113926471

版权

JaveScript 专栏收录该内容

73 篇文章 9 订阅

订阅专栏

前言

今天，我们用原生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"
			}

		}
	}
	//键位表
	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高级程序设计》（第四版）电子书。
我创建了一个技术交流、文章分享群，群里有很多大厂的前端大佬，关注公众号后，点击下方菜单了解更多即可加我微信，期待你的加入。