js實現貪吃蛇小遊戲
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.bo{
height: 20px;
width: 20px;
background-color: blue;
opacity: 0.5;
}
#box{
height: 500px;
width: 500px;
background-color:black;
position: relative;
}
#box1{
position: absolute;
top: 0px;
left: 0px;
}
#box2{
position: absolute;
top: 0px;
left: 30px;
}
#box3{
position: absolute;
top: 0px;
left: 60px;
}
</style>
</head>
<!-- box 地圖 -->
<div id="box">
<!-- bo蛇 -->
<div class="bo" id="box1"></div>
<div class="bo" id="box2"></div>
<div class="bo" id="box3"></div>
</div>
<body>
<script type="text/javascript">
var oBox=document.getElementById('box');
var arr=document.getElementsByClassName('bo');
oBox.innerHTML= oBox.innerHTML+'<div class="bo"></div>';
//定義蛇的初始位置
arr[0].style.left=0+"px";
arr[0].style.top=0+"px";
arr[1].style.left=20+"px";
arr[1].style.top=0+"px";
arr[2].style.left=40+"px";
arr[2].style.top=0+"px";
//第一個隨機食物
arr[3].style.position='absolute';
var x1=parseInt(25*Math.random());
var y1=parseInt(25*Math.random());
arr[3].style.backgroundColor='red';
arr[3].style.left=x1*20+"px";
arr[3].style.top=y1*20+"px";
var x=40;
var flag=0;
var y=0;
//吃的過程
function chi(){
if (x==x1*20&&y==y1*20) {
arr[arr.length-1].style.backgroundColor='blue';
oBox.innerHTML= oBox.innerHTML+'<div class="bo"></div>';
arr[arr.length-1].style.position='absolute';
x1=parseInt(25*Math.random());
y1=parseInt(25*Math.random());
arr[arr.length-1].style.left=x1*20+"px";
arr[arr.length-1].style.backgroundColor='red';
arr[arr.length-1].style.top=y1*20+"px";
}
}
var timer=setInterval(function(){
//flag=0；執行向右
if(flag==0){
x=x+20;
if(x==500){
x=0;
}
for (var i = 0; i < arr.length-2; i++) {
arr[i].style.top=arr[i+1].style.top;
arr[i].style.left=arr[i+1].style.left;
}
arr[arr.length-2].style.left=x+"px";
}
//flag=1；執行向下
if(flag==1){
y=y+20;
if(y==500){
y=0;
}
for (var i = 0; i < arr.length-2; i++) {
arr[i].style.left=arr[i+1].style.left;
arr[i].style.top=arr[i+1].style.top;
}
arr[arr.length-2].style.top=y+"px";
}
//flag=2；執行向左
if(flag==2){
x=x-20;
if(x==-20){
x=480;
}
for (var i = 0; i < arr.length-2; i++) {
arr[i].style.left=arr[i+1].style.left;
arr[i].style.top=arr[i+1].style.top;
}
arr[arr.length-2].style.left=x+"px";
}
//falg=3;執行向上
if(flag==4){
y=y-20;
if(y==-20){
y=480;
}
for (var i = 0; i < arr.length-2; i++) {
arr[i].style.left=arr[i+1].style.left;
arr[i].style.top=arr[i+1].style.top;
}
arr[arr.length-2].style.top=y+"px";
}
for (var i = 0; i < arr.length-2; i++) {
if(arr[i].style.left==arr[arr.length-2].style.left&&arr[i].style.top==arr[arr.length-2].style.top){
clearInterval(timer);
alert("遊戲結束，刷新網頁重新開始");
}
}
chi();
//按上下左右鍵改變flag值 js裏面的鍵40代表下鍵，37左鍵，39右鍵，38，上
document.onkeydown=function(){
if(40== event.keyCode){
if(flag==4){
flag=4;
}
else{
flag=1;}
}
if(37== event.keyCode){
if(flag==0){
flag=0;
}
else{
flag=2;}
}
if(39== event.keyCode){
if(flag==2){
flag=2;
}
else{
flag=0;}
}
if(38== event.keyCode){
if(flag==1){
flag=1;
}
else{
flag=4;}
}
}
},500);
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.