原生JS网页版贪吃蛇--双龙戏珠_加眼睛
面对对象的JavaScript实现
<!-- 2021年 loong -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>贪吃蛇-双龙戏珠</title>
</head>
<body>
<script type="text/javascript">
//创建地图Map
var map_div;
var timer;
var snake_eye_left;
var snake_eye_right;
var snake_eye_left1;
var snake_eye_right1;
function Map(){
this.width=800;
this.height=600;
this.color='cyan';
this.margin='80'+'px'+' auto';
//创建显示地图的方法
this.display=function(){
//用div创建一个元素的节点
map_div=document.createElement('div');
map_div.style.width=this.width+'px';
map_div.style.height=this.height+'px';
map_div.style.backgroundColor=this.color;
map_div.style.margin=this.margin;
//给地图父元素添加相对定位
map_div.style.position='relative';
document.getElementsByTagName('body')[0].appendChild(map_div);
}
}
//创建食物 Food
function Food(){
this.width=20;
this.height=20;
this.color='orange',
//创建x 和y 轴
this.x=0;
this.y=0;
//创建显示食物的方法
this.display=function(){
if(this.food_div==null){
this.food_div=document.createElement('div');
this.food_div.style.width=this.width+'px';
this.food_div.style.height=this.height+'px';
this.food_div.style.backgroundColor=this.color;
this.food_div.style.position='absolute';
map_div.appendChild(this.food_div);
}
//随机食物到地图中
for(var i=1;i<4;i++){
this.x=Math.round(Math.random()*39);
this.y=Math.round(Math.random()*29);
this.food_div.style.left=this.x*this.width+'px';
this.food_div.style.top=this.y*this.height+'px';
}
}
}
function Food1(){
this.width=20;
this.height=20;
this.color='purple',
//创建x 和y 轴
this.x=0;
this.y=0;
//创建显示食物的方法
this.display=function(){
if(this.food_div1==null){
this.food_div1=document.createElement('div');
this.food_div1.style.width=this.width+'px';
this.food_div1.style.height=this.height+'px';
this.food_div1.style.backgroundColor=this.color;
this.food_div1.style.position='absolute';
map_div.appendChild(this.food_div1);
}
//随机食物到地图中
this.x=Math.round(Math.random()*39);
this.y=Math.round(Math.random()*29);
this.food_div1.style.left=this.x*this.width+'px';
this.food_div1.style.top=this.y*this.height+'px';
}
}
//创建蛇Snake
function Snake(){
this.width=20;
this.height=20;
this.direct=null;
//利用二维数组创建蛇
snake_arr=[
[15,6,null,'red'],
[14,6,null,'green'],
[13,6,null,'green']
];
//创建一个造蛇的方法
this.display=function(){
for(var i=0;i<snake_arr.length;i++){
if(snake_arr[i][2]==null){
snake_arr[i][2]=document.createElement('div');
snake_arr[i][2].style.width=this.width+'px';
snake_arr[i][2].style.height=this.height+'px';
snake_arr[i][2].style.position='absolute';
snake_arr[i][2].style.borderRadius='50%';
snake_arr[i][2].style.backgroundColor=snake_arr[i][3];
//给蛇添加两个眼睛
if(i==0){
snake_arr[0][2].setAttribute('class','snake_eye');
}
map_div.appendChild(snake_arr[i][2]);
}
snake_arr[i][2].style.left=snake_arr[i][0]*this.width+'px';
snake_arr[i][2].style.top=snake_arr[i][1]*this.height+'px';
}
if(snake_eye_left==null&&snake_eye_right==null){
snake_eye_left=document.createElement('div');
snake_eye_right=document.createElement('div');
snake_eye_left.style.position='absolute';
snake_eye_right.style.position='absolute';
snake_eye_left.style.width=5+'px';
snake_eye_left.style.height=5+'px';
snake_eye_left.style.borderRadius='50%';
snake_eye_right.style.borderRadius='50%';
snake_eye_right.style.height=5+'px';
snake_eye_right.style.width=5+'px';
snake_eye_right.style.backgroundColor='black';
snake_eye_left.style.backgroundColor='black';
snake_eye_left.style.left=10+'px';
snake_eye_left.style.top=12+'px';
snake_eye_right.style.left=10+'px';
snake_eye_right.style.top=2+'px';
snake_arr[0][2].appendChild(snake_eye_left);
snake_arr[0][2].appendChild(snake_eye_right);
}
}
//创建一个蛇头和蛇身一起移动
this.move=function(){
if(this.direct!=null){
for(var i=snake_arr.length-1;i>0;i--){
snake_arr[i][0]=snake_arr[i-1][0];
snake_arr[i][1]=snake_arr[i-1][1];
}
switch (this.direct){
case 'left':
snake_arr[0][0]-=1;
snake_eye_left.style.left=10+'px';
snake_eye_left.style.top=12+'px';
snake_eye_right.style.left=10+'px';
snake_eye_right.style.top=2+'px';
this.direct!='right';
break;
case 'up':
snake_arr[0][1]-=1;
snake_eye_left.style.left=2+'px';
snake_eye_left.style.top=3+'px';
snake_eye_right.style.top=3+'px';
snake_eye_right.style.left=12+'px';
this.direct!='down';
break;
case 'right':
snake_arr[0][0]+=1;
snake_eye_left.style.left=10+'px';
snake_eye_left.style.top=12+'px';
snake_eye_right.style.left=10+'px';
snake_eye_right.style.top=2+'px';
this.direct!='left';
break;
case 'down':
snake_arr[0][1]+=1;
snake_eye_left.style.left=2+'px';
snake_eye_left.style.top=3+'px';
snake_eye_right.style.top=3+'px';
snake_eye_right.style.left=12+'px';
this.direct!='up';
break;
default:
break;
}
snakes.display();
}
//判断蛇吃到食物
if((snake_arr[0][0]==foods.x&&snake_arr[0][1]==foods.y)||(snake_arr[0][0]==food_one.x&&snake_arr[0][1]==food_one.y)){
//alert('碰到了');
//创建一个div添加到蛇的后面
var length=snake_arr.length-1;
var x=snake_arr.length[0];
var y=snake_arr.length[1];
//创建一个数组元素 添加到数组后面 push
snake_arr.push([x,y,null,'yellow']);
//吃到食物就添加分数
sortNumber+=10;
foods.display();
//记录分数
food_one.display();
}
//判断蛇撞到墙上
if(snake_arr[0][0]<0||snake_arr[0][0]>39||snake_arr[0][1]<0||snake_arr[0][1]>29){
clearTimeout('snakes.move()',200);
alert('Game over!游戏结束');
//让音乐暂停
aduio.pause();
sortNumber=0;
return false;
}
//判断撞到自己死掉
for(var i=1;i<snake_arr.length;i++){
if(snake_arr[0][0]==snake_arr[i][0]&&snake_arr[0][1]==snake_arr[i][1]){
//clearTimeout('snakes.move()',200);
alert('撞到自己，GameOver!');
sortNumber=0;
aduio.pause();
return false;
}
snakes.display();
}
timer=setTimeout('snakes.move()',200);
}
//首先给定蛇头移动方向
this.setDirection=function(direct){
switch (direct){
case 37:
this.direct='left';
//snake_arr[0][0]-=1;
break;
case 38:
this.direct='up';
//snake_arr[0][1]-=1;
break;
case 39:
this.direct='right'
//snake_arr[0][0]+=1;
break;
case 40:
this.direct='down';
//snake_arr[0][1]+=1;
break;
default:
break;
}
//snakes.display();
}
}
//创建两条蛇
function Snake_01(){
this.width=20;
this.height=20;
this.direct1=null;
//利用二维数组创建蛇
snake_arr_01=[
[10,9,null,'gold'],
[9,9,null,'pink'],
[8,9,null,'pink']
];
//创建另一条蛇的方法
this.display=function(){
for(var i=0;i<snake_arr_01.length;i++){
if(snake_arr_01[i][2]==null){
snake_arr_01[i][2]=document.createElement('div');
snake_arr_01[i][2].style.width=this.width+'px';
snake_arr_01[i][2].style.height=this.height+'px';
snake_arr_01[i][2].style.position='absolute';
snake_arr_01[i][2].style.borderRadius='50%';
snake_arr_01[i][2].style.backgroundColor=snake_arr_01[i][3];
if(i==0){
snake_arr_01[0][2].setAttribute('class','snake_eye1');
}
map_div.appendChild(snake_arr_01[i][2]);
}
snake_arr_01[i][2].style.left=snake_arr_01[i][0]*this.width+'px';
snake_arr_01[i][2].style.top=snake_arr_01[i][1]*this.height+'px';
}
if(snake_eye_left1==null&&snake_eye_right1==null){
snake_eye_left1=document.createElement('div');
snake_eye_right1=document.createElement('div');
snake_eye_left1.style.position='absolute';
snake_eye_right1.style.position='absolute';
snake_eye_left1.style.width=5+'px';
snake_eye_left1.style.height=5+'px';
snake_eye_left1.style.borderRadius='50%';
snake_eye_right1.style.borderRadius='50%';
snake_eye_right1.style.height=5+'px';
snake_eye_right1.style.width=5+'px';
snake_eye_right1.style.backgroundColor='darkgreen';
snake_eye_left1.style.backgroundColor='darkgreen';
snake_eye_left1.style.left=10+'px';
snake_eye_left1.style.top=12+'px';
snake_eye_right1.style.left=10+'px';
snake_eye_right1.style.top=2+'px';
snake_arr_01[0][2].appendChild(snake_eye_left1);
snake_arr_01[0][2].appendChild(snake_eye_right1);
}
}
//蛇动起来
this.snakeMove=function(){
if(this.direct1!=null){
for(var i=snake_arr_01.length-1;i>0;i--){
snake_arr_01[i][0]=snake_arr_01[i-1][0];
snake_arr_01[i][1]=snake_arr_01[i-1][1];
}
switch (this.direct1){
case 'left1':
snake_arr_01[0][0]-=1;
snake_eye_left1.style.left=10+'px';
snake_eye_left1.style.top=12+'px';
snake_eye_right1.style.left=10+'px';
snake_eye_right1.style.top=2+'px';
break;
case 'up1':
snake_arr_01[0][1]-=1;
snake_eye_left1.style.left=2+'px';
snake_eye_left1.style.top=3+'px';
snake_eye_right1.style.top=3+'px';
snake_eye_right1.style.left=12+'px';
break;
case 'right1':
snake_arr_01[0][0]+=1;
snake_eye_left1.style.left=10+'px';
snake_eye_left1.style.top=12+'px';
snake_eye_right1.style.left=10+'px';
snake_eye_right1.style.top=2+'px';
break;
case 'down1':
snake_arr_01[0][1]+=1;
snake_eye_left1.style.left=2+'px';
snake_eye_left1.style.top=3+'px';
snake_eye_right1.style.top=3+'px';
snake_eye_right1.style.left=12+'px';
break;
default:
break;
}
}
snake1.display();
//判断蛇吃到食物
if((snake_arr_01[0][0]==foods.x&&snake_arr_01[0][1]==foods.y)||(snake_arr_01[0][0]==food_one.x&&snake_arr_01[0][1]==food_one.y)){
//alert('碰到了');
//创建一个div添加到蛇的后面
var length=snake_arr_01.length-1;
var x=snake_arr_01.length[0];
var y=snake_arr_01.length[1];
//创建一个数组元素 添加到数组后面 push
snake_arr_01.push([x,y,null,'blue']);
//吃到食物就添加分数
sortNumber+=10;
foods.display();
food_one.display();
}
//判断撞到墙会死亡
if(snake_arr_01[0][0]<0||snake_arr_01[0][0]>39||snake_arr_01[0][1]<0||snake_arr_01[0][1]>29){
clearTimeout('snake1.snakeMove()',200);
alert('Game over!游戏结束');
//让音乐暂停
aduio.pause();
sortNumber=0;
return false;
}
//判断碰到自身就会死亡
for(var i=1;i<snake_arr_01.length;i++){
if(snake_arr_01[0][0]==snake_arr_01[i][0]&&snake_arr_01[0][1]==snake_arr_01[i][1]){
alert('撞到自己，GameOver!');
sortNumber=0;
return false;
}
snake1.display();
}
setTimeout('snake1.snakeMove()',200);
}
//控制移动
this.setdirect=function(direct1){
switch (direct1){
case 65:
this.direct1='left1';
break;
case 87:
this.direct1='up1';
break;
case 68:
this.direct1='right1';
break;
case 83:
this.direct1='down1';
break;
default:
break;
}
}
}
//开始按钮
function Start(){
this.showStartBtn=function(){
var btn_start=document.createElement('button');
btn_start.innerHTML='开始';
btn_start.style.width=50+'px';
btn_start.style.height=30+'px';
btn_start.style.backgroundColor='green';
document.body.appendChild(btn_start);
btn_start.onclick=function(){
//添加默认的向右移动
/*for(var i=snake_arr.length-1;i>0;i--){
snake_arr[i][0]=snake_arr[i-1][0];
snake_arr[i][1]=snake_arr[i-1][1];
}
this.direct='right';
snake_arr[0][0]+=1;*/
clearTimeout(timer);
aduio.play();
jianPan.onkeydown=function(event){
snakes.setDirection(event.keyCode);
snake1.setdirect(event.keyCode);
}
timer=setTimeout('snakes.move()',200);
}
}
}
//暂停按钮
function Stop(){
this.showStopBtn=function(){
var btn_stop=document.createElement('button');
btn_stop.innerHTML='暂停';
btn_stop.style.width=50+'px';
btn_stop.style.height=30+'px';
btn_stop.style.backgroundColor='red';
document.body.appendChild(btn_stop);
btn_stop.onclick=function(){
clearTimeout(timer);
aduio.pause();
}
}
}
var maps;
var foods;
var snakes;
var startBtn;
var jianPan;
var aduio;
var food_one;
var snake1;
//记录分数
var sortNumber=0;
window.onload=function(){
//把构造函数的对象实例化出来
maps=new Map();
maps.display();
foods=new Food();
foods.display();
food_one=new Food1();
food_one.display();
snakes=new Snake();
snakes.display();
snakes.move();
snake1=new Snake_01();
snake1.display();
snake1.snakeMove();
//开始按钮
startBtn=new Start();
startBtn.showStartBtn();
//结束按钮
stopBtn=new Stop();
stopBtn.showStopBtn();
jianPan=document.getElementsByTagName('body')[0];
//键盘事件控制蛇的移动
/*jianPan.onkeydown=function(event){
//确定键盘事件添加进来
//W--87 A-65 S--83 D--68
//alert(event.keyCode);
//snakes.setDirection(event.keyCode);
//键盘事件时候清除另一个计时器
snake1.setdirect(event.keyCode);
}*/
//得分板
var sortBank = document.createElement('div');
sortBank.style.Position='absolute';
sortBank.innerHTML = '得分:';
//给个类名设置样式
sortBank.className = 'sortBank';
document.body.appendChild(sortBank);
//分数
var sort = document.createElement('div');
sort.innerHTML = sortNumber;
sortBank.appendChild(sort);
//更新分数
setInterval(function(){
sort.innerHTML = sortNumber;
}, 1000);
//添加背景音乐
aduio=document.createElement('audio');
aduio.src='img/bg.mp3';
aduio.autoplay='autoplay';
//document.getElementsByClassName('body')[0].appendChild(aduio);
document.body.appendChild(aduio);
}
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
