検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript を使用して Snake ゲームの Web バージョンを作成する

JavaScript を使用して Snake ゲームの Web バージョンを作成する

巴扎黑
巴扎黑オリジナル
2017-08-21 10:20:052727ブラウズ


js Snake Web バージョンのゲームの特殊効果。この古典的なゲームを誰もがプレイしたことがあるはずですが、操作のレンダリングはどのように実装されているのでしょうか。

JavaScript を使用して Snake ゲームの Web バージョンを作成する

ヒント: ブラウザが正常に実行できない場合は、閲覧モードを切り替えてみてください。あなたに共有されたjs Snake Web版ゲームの特殊効果コードは次のとおりです

<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>

以上がJavaScript を使用して Snake ゲームの Web バージョンを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Ajax チュートリアル ページの部分的なジャンプと結果の戻り次の記事：Ajax チュートリアル ページの部分的なジャンプと結果の戻り

関連記事

続きを見る