原始js做的贪吃蛇,如何用JavaScript做一个贪吃蛇游戏,贪吃蛇系列——01初级贪吃蛇_键盘的方向键,吃食物,撞墙死亡

示意图:



代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
	
	*{
		margin:0px;
		padding:0px;
	}
	
	ul{
		list-style:none;
		position:relative;
		width:600px;
		height:400px;
		background-color:green;
	}
	
	li{
		position:absolute;
		top:0px;
		width:20px;
		height:20px;
		border-radius:50%;
		background-color:red;
		text-align:center;
	}
	
	</style>
	<body >	
		<ul id="box">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
		</ul>
		<input id="btnGo" type="button" value="走起" />
	</body>
</html>

<script type="text/javascript" src="js/move1704.js"></script>
<script type="text/javascript">

function $(id){
	return document.getElementById(id);
}

function initUI(){
	var lis = $("box").children;
	for(var i=0;i<lis.length;i++){		
		lis[i].style.left = (i*20)+"px";
		lis[i].style.top = "40px";
	}
}

var foodLeft;
var foodTop;

function genGood(){
	//2、创建食物
	var food = document.createElement("div");
	food.style.cssText = "position:absolute;width:20px;height:20px;border-radius:50%;background-color:black";
	food.style.left = foodLeft+"px";
	food.style.top = foodTop+"px";
	food.id = "foodDiv";
	document.body.appendChild(food);
}

//显示食物
function showFood(){
	//1、随机食物位置
	foodLeft = parseInt(Math.random()*600/20)*20;
	foodTop = parseInt(Math.random()*400/20)*20;
	
	genGood();
}

function eat(){
	//1、随机食物位置
	foodLeft = parseInt(Math.random()*600/20)*20;
	foodTop = parseInt(Math.random()*400/20)*20;
	
	$("foodDiv").style.left = foodLeft+"px";
	$("foodDiv").style.top = foodTop+"px";
	
	//2、增加一节;
	var li = document.createElement("li");
	$("box").appendChild(li);
	
}

var direction = "下";
var myTimer = null;

function startMove(){
	myTimer = setInterval(goStep,200);
}

function goStep(){
	//一、计算出一个合法的数据
	var lis = $("box").children;
	var left=parseFloat(lis[0].style.left);
	var top= parseFloat(lis[0].style.top);
	//计算头该出现位置
	switch(direction){
		case "左":left = left-20;break;
		case "上":top = top-20;break;
		case "右":left = left+20;break;
		case "下":top = top+20;break;
		default:;
	}
	
	if(left<0 || left>600-20 || top<0 || top>400-20){
		window.clearInterval(myTimer);
		alert("亲,您game over");
		return;
	}
	
	if(left==foodLeft && top == foodTop){
		eat();
	}
	
	//二、改变外观
	 
	//1、把除了第一个外的其它节移动
	for(var i=lis.length-1;i>0;i--){		
		lis[i].style.left = lis[i-1].style.left;
		lis[i].style.top = lis[i-1].style.top;
	}
	
	//2、改变第一节(根据方向)
	lis[0].style.left  = left+"px";
	lis[0].style.top  = top+"px";
	
}

window.onload = function(){
	initUI();
	
	$("btnGo").onclick = function(){
		startMove();
		showFood();
	}
	
	document.body.onkeydown = function(event){
		var evt = event || window.event;
		switch(evt.keyCode){
			case 37:direction="左";break;
			case 38:direction="上";break;
			case 39:direction="右";break;
			case 40:direction="下";break;
			default:;
		}
	}
}

</script>




                
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值