Heim > Web-Frontend > js-Tutorial > Verwenden Sie JavaScript, um eine Webversion des Snake-Spiels zu erstellen

Verwenden Sie JavaScript, um eine Webversion des Snake-Spiels zu erstellen

巴扎黑
Freigeben: 2017-08-21 10:20:05
Original
2764 Leute haben es durchsucht


Spezialeffekte des js Snake-Webversionsspiels. Nach dem Testen ist der Bildwechselprozess meiner Meinung nach sehr cool, aber wie wird er umgesetzt? Bei Interesse kommen Sie bitte vorbei und lernen Sie die Betriebsdarstellungen kennen:

Verwenden Sie JavaScript, um eine Webversion des Snake-Spiels zu erstellen

Tipps: Wenn der Browser nicht normal läuft, können Sie versuchen, den Browsermodus zu wechseln. Der mit Ihnen geteilte Spezialeffektcode für das js Snake-Webversionsspiel lautet wie folgt

<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++){
   p = this.addStyle(this.creatEle(),{w:(!+[1,] ? 30 :28),h:(!+[1,] ? 30 :28),f:"left",border:"1px solid #666"});
   p.setAttribute("number", i*30+j)
   this.appendEle(p,bigDiv)
   Star.data.arrayAll[i][j] = p;
  }
  }
  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 p = Star.data.arrayAll[parseInt(number/30)][number%30];
  Star.timeInterval.timeB = setInterval(function(){
  if(p.className == "shanshuo"){
   p.className = ""
   p.style.backgroundColor = "#fff"
  }
  else{
   p.className = "shanshuo";
   p.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? 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 p, 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{
   p = Star.data.arraySelect.pop();
   p.style.background = "#fff";
   self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30-1]);
   }
  }
  },Star.timeInterval.speed)
 },
 upGo:function(){
  var p, 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{
   p = Star.data.arraySelect.pop();
   p.style.background = "#fff";
   self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)-1][number%30]);
   }
  }
  },Star.timeInterval.speed)
 },
 rightGo:function(){
  var p, 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{
   p = Star.data.arraySelect.pop();
   p.style.background = "#fff";
   self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30+1]);
   }
  }
  },Star.timeInterval.speed)
 },
 downGo:function(){
  var p, 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{
   p = Star.data.arraySelect.pop();
   p.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>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonVerwenden Sie JavaScript, um eine Webversion des Snake-Spiels zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Aktuelle Ausgaben
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage