javascript贪吃蛇

最新推荐文章于 2025-12-15 15:15:21 发布

原创最新推荐文章于 2025-12-15 15:15:21 发布 · 793 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #贪吃蛇

javascript小游戏专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了使用JavaScript编写贪吃蛇游戏的基本框架和核心代码，包括全局变量的定义、蛇类和苹果类的创建、蛇的运动控制以及界面交互功能。通过实例演示了如何利用HTML、CSS和JavaScript实现游戏逻辑，旨在帮助开发者理解和实践基于Web的小游戏开发。

看别人用js写小游戏，自己也忍不住写了一个贪吃蛇！下面是最初的程序框架！最终版还没整理出啦！

Qsnake，apple	全局变量
	dir	Qsnake[0]拥有的方向
Snake (x,y,num)	xNow	目前对应的x位置坐标
	yNow	目前对应的y位置坐标
	Num	身体个数，从0
	createSnake	创建snake
	position	创建之后定位


Apple	xpos	Apple对应的坐标位置
	ypos
	createApple	创建一个apple
	position	随意给予苹果位置，赋予xpos与ypos值
Point(x,y)	将传入的左边转换成决定定位的像素，返回一个对象，包含对应像素的字符串。
snakeBegin	snake创建以及开始运动
moveControler	控制整个流程,负责循环
direction	方向控制

下面是代码部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="useful.js"></script>
<script type="text/javascript" src="Square.js"></script>

<style>
button{height:30px; width:80px;}
body{background-color:#0FF;}
#snakeMap{ height:600px; background-color:#CCC; width:600px; position:absolute; left:50%; margin-left:-300px;}
/*tiaoshi*/
#tiaoshi{width:200px;}
#tiaoshi p{ margin:0; font-size:14px; float:left; padding-right:5px;}
</style>
</head>

<body>
<div id="snakeMap"> </div>
<button id="begin" type="button">开始</button>
<button id="zanting" type="button">暂停</button>
<button id="restart" type="button">重新开始</button><br/>
<SELECT id="idState" style="width:150" name="state" selectedIndex="$!{state}"> 
<OPTION value="500">我是菜鸟</OPTION> 
<OPTION value="300">初入门墙</OPTION> 
<OPTION value="200">小有成就</OPTION> 
<OPTION value="180">大师人物</OPTION> 
<OPTION value="150">一代宗师</OPTION> 
<OPTION value="120">天下无敌</OPTION>
<OPTION value="50">你敢试不！</OPTION>  
</SELECT> 
<div id="tiaoshi"></div>
</body>
</html>

// 常用功能的封装useful.js
//调试
function tiaoshi(a){
	var tiaoshi=document.getElementById("tiaoshi");
	var p1=document.createElement("p");
	var text=document.createTextNode(a+"");
	tiaoshi.appendChild(p1);
	p1.appendChild(text);
}
function ClassName(f){
	if(document.getElementsByClassName){
		return document.getElementsByClassName(f);
	}else{
		var a=document.getElementsByTagName("*");
		var b=new Array();
		var j=0;
		for(var i=0;i<a.length;i++){
				if(a[i].className==f){
						b[j]=a[i];
						j++;
					}
			}
	}
	return b;
	}
var EventUtil={
	addHandler:function(element,type,handler){
		if(element.addEventListener){
			element.addEventListener(type,handler,false);
		}else if(element.attachEvent){
			element.attachEvent("on"+type,handler);
		}else{
			element["on"+type]=handler;
		}
	},
	removeHandler:function(element,type,handler){
		if(element.removeEventListener){
			element.removeEventListener(type,handler,false);
		}else if(element.detachEvent){
			element.detachEvent("on"+type,handler);
		}else{
			element["on"+type]=null;
		}
	},
	getKeyCode:function(event){
			return event.keyCode;
	},
	getEvent:function(event){
		return event?event:window.event;
	}
}

// Square.js

//私有全局的变量
var Qsnake=new Array(),apple;//snake的身体数组
var changeAll={
	heightNum:30,
	widthNum:30,
	height:20,
	width:20,
	path:20,
	speed:200,
	getAll:function(){
			return this.heightNum*widthNum;
		}
}
function Point(x,y){//将坐标转换为具体的位置，x是横坐标，y是纵坐标
	var a=new Object();
	a.x=x*changeAll.width+"px";
	a.y=y*changeAll.height+"px";
	return a;
}
//苹果类
function Apple(){
	this.xpos;
	this.ypos;
}
Apple.prototype.createApple=function(){
	var snakeMap=document.getElementById("snakeMap");
	var apple=document.createElement("div");
	apple.id="apple";
	apple.style.height=changeAll.height+"px";;
	apple.style.width=changeAll.width+"px";
	apple.style.backgroundColor="#F00";
	apple.style.position="absolute";
	var a=snakeMap.appendChild(apple);
}
Apple.prototype.position=function(){
	var apple=document.getElementById("apple");
	this.ypos=Math.floor(Math.random()*changeAll.heightNum);
	this.xpos=Math.floor(Math.random()*changeAll.widthNum);
	for(var i=0;i<Qsnake.length;i++){
			if(this.ypos==Qsnake[i].yNow&&this.xpos==Qsnake[i].xNow){
				apple.position();
				return;
			}
		}
	var pos=Point(this.xpos,this.ypos);
	apple.style.left=pos.x;
	apple.style.top=pos.y;	
}
//snake类
function Snake(x,y,num){
	this.xNow=x;
	this.yNow=y;
	this.num=num;
}
Snake.prototype.createSnake=function(){//创建snake
	var snakeMap=document.getElementById("snakeMap");
	var snakeBody=document.createElement("div");
	snakeBody.className="snakebody";
	snakeBody.style.position="absolute";
	snakeBody.style.height=changeAll.height+"px";;
	snakeBody.style.width=changeAll.width+"px";
	snakeBody.style.backgroundColor="#0F0";
	snakeMap.appendChild(snakeBody);
}
Snake.prototype.position=function(){//snake的定位
	var pos=Point(this.xNow,this.yNow);
	var snakeBody=ClassName("snakebody");
	snakeBody[this.num].style.left=pos.x;
	snakeBody[this.num].style.top=pos.y;
}
function Controler(){//循环部分
	if(Qsnake[0].yNow>changeAll.heightNum-1||Qsnake[0].xNow>changeAll.widthNum-1||Qsnake[0].yNow<0||Qsnake[0].xNow<0){
		alert("你输拉");
		return;
	}
	if(Qsnake[0].xNow==apple.xpos&&Qsnake[0].yNow==apple.ypos)
	{
		apple.position();
		var oldBodyNum=Qsnake.length;
		Qsnake[oldBodyNum]=new Snake(0,0,oldBodyNum);
		Qsnake[0].createSnake();
		Qsnake[0].position();
	}
	if(Qsnake.length>1){
		for(var i=Qsnake.length-1;i>0;i--){
			Qsnake[i].xNow=Qsnake[i-1].xNow;
			Qsnake[i].yNow=Qsnake[i-1].yNow;
			Qsnake[i].position();
		}
	}
	switch(Qsnake[0].dir){		
		case 37:(function(){
				Qsnake[0].xNow--;
			})();
			break;
		case 38:(function(){
				Qsnake[0].yNow--;
			})();
			break;
		case 39:(function(){
				Qsnake[0].xNow++;
			})();
			break;
			case 40:(function(){
				Qsnake[0].yNow++;
			})();
			break;
		
	}
	Qsnake[0].position();
	for(var i=Qsnake.length-1;i>3;i--){
	if(Qsnake.length>4&&Qsnake[i].xNow==Qsnake[0].xNow&&Qsnake[i].yNow==Qsnake[0].yNow){
				alert('你输拉1');
				return;
			}
	}
	changeAll.loo=setTimeout(Controler,changeAll.speed);
}
function snakeBegin(){//snake开始部分
	Qsnake[0]=new Snake(2,2,0);//创建头
	Qsnake[0].createSnake();
	Qsnake[0].position();
	Qsnake[0].dir=39;
	Controler();	
}
function direction(event){//键盘控制方向
	var keycode=EventUtil.getKeyCode(event);
	if(Qsnake[0].dir!=keycode-2&&Qsnake[0].dir!=keycode+2){
		Qsnake[0].dir=keycode;
		clearTimeout(changeAll.loo);Controler();
	}
}
function speed(){
	var objSelect=document.getElementById("idState"); 
	for(i=0;i<objSelect.options.length;i++){
		if(objSelect[i].selected == true){ 
       		changeAll.speed=objSelect[i].value;
		 }
 }

	}
function controlb(){//界面按钮的添加
	var snakeMap=document.getElementsByTagName("body");
	var zanting=document.getElementById("zanting");
	var kaishi=document.getElementById("begin");
	var restart=document.getElementById("restart");
	EventUtil.addHandler(snakeMap[0],"keyup",function(event){var event=EventUtil.getEvent(event);direction(event);});
	EventUtil.addHandler(zanting,"click",function(){clearTimeout(changeAll.loo)});
	EventUtil.addHandler(begin,"click",function(){clearTimeout(changeAll.loo);Controler();});
	EventUtil.addHandler(restart,"click",function(){
		clearTimeout(changeAll.loo);
		speed();
			Qsnake=null;
			var snakeMap=document.getElementById("snakeMap");
			var newChile=document.createElement("div");
			newChile.id="snakeMap";
			snakeMap.parentNode.replaceChild(newChile,snakeMap);
			Qsnake=new Array();	
			apple=new Apple();		
			snakeBegin();
			apple.createApple();
			apple.position();
			
		});
}
window.onload=function(){
	speed();
	apple=new Apple();	
	snakeBegin();
	apple.createApple();
	apple.position();
	controlb();
}