您的位置：首页 > 编程语言 > Java开发

小白记录~学习JAVA一个多月使用js写出简易版贪吃蛇

2017-03-13 21:00 597 查看

没有百度哦

其实有哈哈不过是百度一些js事件

最自豪的就是1小时多想出了蛇移动的方法

虽然我也不知道是快是慢

自我感觉挺快的所以认为这脑子不能浪费好好敲代码

允许我自己对自己装一下哈哈

蛇移动的核心就是把最后一张图片变为第一张

代码比较简陋但注释都有见谅

jsp代码 (图片是一张10*10像素的 name="1.png"

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
div{
width:800px; height:600px;border:2px solid red;background-color:black;
}
body{
overflow:hidden;
}
</style>
</head>
<body  onkeydown="remove(event)">
<div id="a" >
<img id="1" src="1.png" style="position:absolute;top:280;left:380px">
<img id="cba" src="1.png" style="position:absolute;top:280;left:300px">

</div>
</body>
<script language="javascript">
//初始化随机出现的坐标
var L;
var T;
//初始化头出现的坐标
var Left = 380;
var Top = 280;
//标记第二个的id
var index=1;
//标记最后一个的id
var i=2;
//初始化自动移动的方向的ID,以便于下一次按键后,上一次的自动可以清除
var ID=null;
//初始化相反的移动方向
var key=null;
//随机添加食物
function removecba(){
//取俩个随机数并设置坐标
L=Math.ceil(Math.random()*80)*10;
T=Math.ceil(Math.random()*60)*10;
var cba=document.getElementById("cba");
cba.style.left=L;
cba.style.top=T;
}
removecba();
//吃到食物后增加图片的方法
function addimg(){
var img=document.createElement("img");
fff=document.getElementById("a");
img.setAttribute("src","1.png");
img.style.position="absolute";
img.style.left=Left;
img.style.top=Top;
fff.appendChild(img);
var test=document.getElementById("1");
index=index+1;
test.id=index;
img.setAttribute("id","1");
}
//移动的方向
function removeL(){
if(Left!=10){
if(Left==L&&Top==T){
removecba();
addimg();
}
var test=document.getElementById("1");
Left-=10;
test.style.left=Left+"px";
}else{
clearInterval(ID);
window.alert("游戏结束");
}
}
function removeT(){
if(Top!=10){
if(Left==L&&Top==T){
removecba();
addimg();
}
var test=document.getElementById("1");
Top -= 10;
test.style.top=Top+"px";
}else{
clearInterval(ID);
window.alert("游戏结束");
}
}
function removeR(){
if(Left!=800){
if(Left==L&&Top==T){
removecba();
addimg();
}
var test=document.getElementById("1");
Left+=10;
test.style.left=Left+"px";
}else{
clearInterval(ID);
window.alert("游戏结束");
}
}
function removeD(){

if(Top!=600){
if(Left==L&&Top==T){
removecba();
addimg();
}
var test=document.getElementById("1");
Top += 10;
test.style.top=Top+"px";
}else{
window.alert("游戏结束");
clearInterval(ID);
}
}
function removeLL(){
//判断是否撞上墙壁
if(Left!=10){
//当蛇头的坐标与食物的坐标完全重合时,重新出现一个食物
if(Left==L&&Top==T){
//调用出现食物的方法
removecba();
//调用增加长度的方法
addimg();
}
//取得蛇头与最后一个
var test=document.getElementById("1");
var testT=document.getElementById(i++);
//对下一次蛇头所在位置进行计算
Left-=10;
//将最后一个的坐标设置为计算好的蛇头所在位置
testT.style.left=Left+"px";
testT.style.top=Top+"px";
//将新的蛇头id设置为1
testT.id="1";
index++;
//将原来的蛇头id设置为index
test.id=index;
//每次移动完调用此方法判断是否撞上自身
myself();
}else{
clearInterval(ID);
window.alert("游戏结束");
}
}
function
4000
removeTT(){
if(Top!=10){
if(Left==L&&Top==T){
removecba();
addimg();
}
var test=document.getElementById("1");
var testT=document.getElementById(i++);
Top -= 10;
testT.style.top=Top+"px";
testT.style.left=Left+"px";
testT.id="1";
index++;
test.id=index;
myself();
}else{
clearInterval(ID);
window.alert("游戏结束");
}
}
function removeRR(){
if(Left!=800){
if(Left==L&&Top==T){
removecba();
addimg();
}
var test=document.getElementById("1");
var testT=document.getElementById(i++);
Left+=10;
testT.style.left=Left+"px";
testT.style.top=Top+"px";
testT.id="1";
index++;
test.id=index;
myself();
}else{
clearInterval(ID);
window.alert("游戏结束");
}
}
function removeDD(){

if(Top!=600){
if(Left==L&&Top==T){
removecba();
addimg();
}
var test=document.getElementById("1");
var testT=document.getElementById(i++);
Top += 10;
testT.style.top=Top+"px";
testT.style.left=Left+"px";
testT.id="1";
index++;
test.id=index;
myself();
}else{
window.alert("游戏结束");
clearInterval(ID);
}
}
//接收键盘指令并开始自动移动
function remove(event){
var sum=event.keyCode;
if(index==1){
//判断是否为上一次的相反方向,如果是,此次返回false,按键不响应
if(sum==key){
return false;
}
else if(sum==37){
//每次按键根据ID清除上一次的自动移动
clearInterval(ID);
//每次设置为相反方向
key=39;
removeL()
//设置自动移动
ID=setInterval("removeL()",500);
}else if(sum==38){
clearInterval(ID);
key=40;
removeT();
ID=setInterval("removeT()",500);
}else if(sum==39){
clearInterval(ID);
key=37;
removeR();
ID=setInterval("removeR()",500);
}else if(sum==40){
clearInterval(ID);
key=38;
removeD();
ID=setInterval("removeD()",500);
//如果不是上下左右四个键,弹出对话框,游戏暂停
}else{
window.alert("游戏暂停,点击确认恢复");
}
}else{

if(sum==key){
return false;
}

else if(sum==37){
clearInterval(ID);
key=39;
removeLL();
ID=setInterval("removeLL()",150);
}else if(sum==38){
clearInterval(ID);
key=40;
removeTT();
ID=setInterval("removeTT()",150);
}else if(sum==39){
clearInterval(ID);
key=37;
removeRR();
ID=setInterval("removeRR()",150);
}else if(sum==40){
clearInterval(ID);
key=38;
removeDD();
ID=setInterval("removeDD()",150);
}else{
window.alert("游戏暂停,点击确认恢复");
}
}
}
//碰到自己
function myself(){
//根据蛇身长度用for循环依次判断蛇头与蛇身任意一张图片是否重合
for(var k=i;k<index;k++){
var t1=document.getElementById("1");
var t2=document.getElementById(k);
if(t1.style.top==t2.style.top&&t1.style.left==t2.style.left){
window.alert("游戏结束");
}
}
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

小白记录~学习JAVA一个多月 使用js写出简易版贪吃蛇

小白记录~学习JAVA一个多月使用js写出简易版贪吃蛇