社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > 正文

js贪吃蛇网页版游戏特效代码分享（挑战十关）_javascript技巧

WBOY
发布： 2016-05-16 15:43:15
原创
1581 人浏览过

js贪吃蛇网页版游戏特效，经测试图片切换过程非常酷，相信大家一定都玩过这个经典小游戏吧，但是它是怎么实现的呐，感兴趣的朋友快来学习学习吧
运行效果图：----------------------查看效果-----------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的js贪吃蛇网页版游戏特效代码如下

<body><title>js贪吃蛇网页版游戏特效</title></body>
<script> 
 Star = {
 init:function(){
  var bigDiv = this.appendEle(this.addStyle(this.creatEle(),
  {w:'900',h:'600',p:'absolute',t:10,l:500}));
  for(var i = 0; i<600/30;i++){
  Star.data.arrayAll[i] = [];
  for(var j = 0; j<900/30; j++){
   div = this.addStyle(this.creatEle(),{w:(!+[1,] &#63; 30 :28),h:(!+[1,] &#63; 30 :28),f:'left',border:'1px solid #666'});
   div.setAttribute('number', i*30+j)
   this.appendEle(div,bigDiv)
   Star.data.arrayAll[i][j] = div;
  }
  }
  bigDiv = this.appendEle(this.addStyle(this.creatEle(),
  {w:'900',h:'600',p:'absolute',t:10,l:500}));


  this.pushEleInSelect(Star.data.arrayAll[9][15],Star.data.arrayAll[9][14],Star.data.arrayAll[9][13])
  this.keyBoard.apply(this,arguments);
  this.appearPoint();
  this.leftGo();
 },
 appearPoint:function(){
  var arrayIn = [];
  var number;
  for(var i = 0; i<600; i++){
  if(!this.hasInArray(Star.data.arrayAll[parseInt(i/30)][i%30].getAttribute('number'),Star.data.arraySelect)){
   arrayIn.push(Star.data.arrayAll[i])
  }
  }
  Star.data.foodNumber = number = parseInt(Math.random()*arrayIn.length);
  this.giveColor(number)
 },
 giveColor:function(number){
  var div = Star.data.arrayAll[parseInt(number/30)][number%30];
  Star.timeInterval.timeB = setInterval(function(){
  if(div.className == 'shanshuo'){
   div.className = ''
   div.style.backgroundColor = '#fff'
  }
  else{
   div.className = 'shanshuo';
   div.style.backgroundColor = '#f00'
  }
  },500)
 },
 disappearColor:function(){
  clearInterval(Star.timeInterval.timeB);
  Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30].style.backgroundColor = '#f00';
 },
 hasInArray:function(number,array){
  for(var i in array){
  if(array[i] instanceof Array){
   if(this.hasInArray(number,array[i])){
   return true;
   }
  }
  if(array[i].getAttribute && array[i].getAttribute('number') == number) return true;
  }
  return false;
 },
 keyBoard:function(){
  var self = this;
  document.onkeydown = function(e){
  e = e&#63; e : window.event;
  switch(e.keyCode){
   case 37: if(Star.keycode == 37 || Star.keycode == 39){return;}; self.leftGo(); break;
   case 38: if(Star.keycode == 38 || Star.keycode == 40){return;}; self.upGo();break;
   case 39: if(Star.keycode == 37 || Star.keycode == 39){return;}; self.rightGo();break;
   case 40: if(Star.keycode == 38 || Star.keycode == 40){return;}; self.downGo();break;
  }
  }
 },
 leftGo:function(){
  var div, number , self = this;
  Star.keycode = 37;
  clearInterval(Star.timeInterval.timeA)
  Star.timeInterval.timeA = setInterval(function(){
  number = Star.data.arraySelect[0].getAttribute('number');
  if(number%30<=0 || self.hasInArray(number-1,Star.data.arraySelect)){
   self.guanle();
  }
  else{
   if(Star.data.foodNumber == number-1){
   self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
   self.disappearColor();
   self.appearPoint();
   }
   else{
   div = Star.data.arraySelect.pop();
   div.style.background = '#fff';

   self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30-1]);
   }
  }
  },Star.timeInterval.speed)
 },
 upGo:function(){
  var div, number , self = this;
  Star.keycode = 38;
  clearInterval(Star.timeInterval.timeA)
  Star.timeInterval.timeA = setInterval(function(){
  number = parseInt(Star.data.arraySelect[0].getAttribute('number'));

  if(parseInt(number/30)<=0 || self.hasInArray(number-30,Star.data.arraySelect)){
   self.guanle();
  }
  else{
   if(Star.data.foodNumber == number-30){
   self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
   self.disappearColor();
   self.appearPoint();
   }
   else{
   div = Star.data.arraySelect.pop();
   div.style.background = '#fff';
   self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)-1][number%30]);
   }
  }
  },Star.timeInterval.speed)
 },
 rightGo:function(){
  var div, number , self = this;
  Star.keycode = 39;
  clearInterval(Star.timeInterval.timeA)
  Star.timeInterval.timeA = setInterval(function(){
  number = parseInt(Star.data.arraySelect[0].getAttribute('number'));
  if(parseInt(number%30)>=29 || self.hasInArray(number+1,Star.data.arraySelect)){
   self.guanle();
  }
  else{
   if(Star.data.foodNumber == number+1){
   self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
   self.disappearColor();
   self.appearPoint();
   }
   else{
   div = Star.data.arraySelect.pop();
   div.style.background = '#fff';
   self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30+1]);
   }
  }
  },Star.timeInterval.speed)
 },
 downGo:function(){
  var div, number , self = this;
  Star.keycode = 40;
  clearInterval(Star.timeInterval.timeA)
  Star.timeInterval.timeA = setInterval(function(){
  number = parseInt(Star.data.arraySelect[0].getAttribute('number'));
  if(parseInt(number/30)>=19 || self.hasInArray(number+30,Star.data.arraySelect)){
   self.guanle();
  }
  else{
   if(Star.data.foodNumber == number+30){
   self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
   self.disappearColor();
   self.appearPoint();
   }
   else{
   div = Star.data.arraySelect.pop();
   div.style.background = '#fff';
   self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)+1][number%30]);
   }
  }
  },Star.timeInterval.speed)
 },
 guanle:function(){
  alert('撞墙了,总分：' + (Star.data.arraySelect.length-3) * parseInt(1000 / Star.timeInterval.speed));
  location.reload();
 },
 creatEle:function(tag){
  var tagName = tag || 'DIV'
  return document.createElement(tagName)
 },
 appendEle:function(ele,father){
  var father = father || document.body || document.documentElement
  father.appendChild(ele)
  return ele;
 },
 addStyle:function(ele,css){
  for(var i in css){
  switch(i){
   case 'b' : ele.style.background = css[i];  break;
   case 'l' : ele.style.left  = css[i]+'px'; break;
   case 'r' : ele.style.right  = css[i]+'px'; break;
   case 't' : ele.style.top  = css[i]+'px'; break;
   case 'd' : ele.style.down  = css[i]+'px'; break;
   case 'p' : ele.style.position = css[i];  break;
   case 'w' : ele.style.width  = css[i]+'px'; break;
   case 'h' : ele.style.height  = css[i]+'px'; break;
   case 'f' : ele.style.cssFloat = css[i]; ele.style.styleFloat = css[i];  break;
   default : ele.style[i]   = css[i];  break;
  }
  }
  return ele;
 },
 pushEleInSelect:function(){
  for(var i = 0; i<arguments.length; i++){
  Star.data.arraySelect = [arguments[i]].concat(Star.data.arraySelect)
  this.addStyle(arguments[i],{b:'#f00'})
  }
 }
 }
 Star.data={
 arrayAll : [],
 arraySelect:[],
 newPoint:null,
 foodNumber:0
 }
 Star.timeInterval={
 timeA:null,
 timeB:null
 }
 Star.keycode = 0;


 window.onload = function(){
 var select = Star.creatEle('select');
 var optionDefault = Star.creatEle('option');
 optionDefault.innerHTML = '请选择关卡'
 Star.appendEle(optionDefault,select)
 Star.addStyle(select,{w:200,h:30,p:'absolute',left:'40%',top:'40%'})
 for(var i = 0 ; i <10 ; i++){
  var option = Star.creatEle('option');
  option.innerHTML = '第' + (i+1) + '关'
  Star.appendEle(option,select);
 }
 Star.appendEle(select)
 select.onchange = function(){
  selectValue = select.options[select.selectedIndex].value || select.options[select.selectedIndex].innerHTML
  var number = selectValue.match(/\d+/)[0]
  Star.timeInterval.speed = parseInt(200/number);
  Star.addStyle(select,{display:'none'});
  Star.init();
 }
 }

</script>
登录后复制


以上就是为大家分享的js贪吃蛇网页版游戏特效代码，希望大家可以喜欢。

相关标签：
贪吃蛇游戏js写法 js实现贪吃蛇游戏 js贪吃蛇 用js写简单的贪吃蛇
来源：php.cn
上一篇：jquery实现的蓝色二级导航条效果代码_jquery 下一篇：纯javascript判断查询日期是否为有效日期_javascript技巧
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
Array JS 中的 52 个图像 我正在学习IT助理1年，目前我们必须使用JavaScriptHTML和CSS编写纸牌游戏。我的问题是：如何在JS中将52张卡片放入一个数组中，仅提供放置这些卡片的所有图像的文件夹的...
来自于 2024-03-30 21:14:49
0
1
272
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板