澳门皇冠金沙网站-澳门皇冠844网站

热门关键词: 澳门皇冠金沙网站,澳门皇冠844网站

工具猫变态版贪吃蛇,js版俄罗斯方块设计思想及

俄罗斯方块方块是小时候的一个回忆,从最开始的掌上的黑白游戏机,到电视游戏机,到电脑,无不有它的痕迹,今天我们来一起重温它的一种实现方法,也算是整理一下我的思路吧......

 

一直想用HTML5做个小游戏,但总是没有时间,今天抽了几个小时做了个打地鼠的小游戏,体验一下HTML5上的游戏开发。本着OSC的分享精神,特分享出来。没有花时间去找更多的素材,再加上本来就不怎么会做图,出了那个地洞的素材以外其他的全是从网上搜到的。代码也比较混乱,大家就凑合着看看吧,欢迎大家批评指正,也欢迎大家能把这个小游戏做的更完善些。

1.以中心点坐标代替整个方块

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";

废话不说了,大家先看看效果吧:

2.以数学坐标点代表实际坐标

  <html xmlns=";

澳门皇冠844网站 1

3.统一冲突检测方法

  <head>

HTML文件:  

 

  <meta http-equiv="Content-Type" content="text/html;charset=gb2312">

01     <!DOCTYPE html>
02     <html lang="en" >
03         <head>
04             <meta charset="utf-8" />
05             <title>打地鼠</title>
06             <script type="text/javascript" src="js/game.js"></script>
07         </head>
08         <body onload="init()">
09             <div class="container">
10                 <canvas onmouseover="hideCursor(this)" onmouseout="showCursor"
11                         onmousemove="hammerMove(this);"
12                         onmousedown="hammerDown();" onmouseUp="hammerUp();"
13                         id="screen" width="700" height="500" style="border:1px solid #000"></canvas>
14             </div>
15            
16             <div id="info"></div>
17         </body>
18     </html>
 
 
 
JS文件:
 
 
001  var canvas, ctx, info;
002  var bg;
003  var hammer, hamX, hamY;
004  var mouseState, mouseFrmLen = 10, mousePress = false;
005  var sprites = [], holes = [];
006  var score = 0;
007  var Sprite = function(w, h, x, y, state, image){
008      var self = this;
009      this.w = w;
010      this.h = h;
011      this.x = x;
012      this.y = y;
013      this.image = image;
014      this.state = state;
015     
016      this.draw = function(){
017          if(this.state == 'show'){
018              ctx.drawImage(this.image, this.x, this.y, this.w, this.h);
019              setTimeout(function(){
020                  self.state = 'hide';
021              },3000);
022          }
023      }
024  }
025 
026  var HoleSprite = function(w, h, x, y, state, image){
027      var self = this;
028      this.w = w;
029      this.h = h;
030      this.x = x;
031      this.y = y;
032      this.image = image;
033      this.state = state;
034     
035      this.draw = function(){
036          if(this.state == 'show'){
037              ctx.drawImage(this.image, this.x, this.y, this.w, this.h);
038          }
039      }
040  }
041 
042  function HammerSprite(w, h, x, y, image){
043      HammerSprite.prototype.w = w;
044      HammerSprite.prototype.h = h;
045      HammerSprite.prototype.x = x;
046      HammerSprite.prototype.y = y;
047     
048      HammerSprite.prototype.draw = function(isPress){
049          if(isPress){
050              ctx.save();
051             
052              ctx.translate(this.x-10, this.y 34);
053              ctx.rotate(Math.PI/180*330);
054              ctx.drawImage(image, 0, 0, w, h);
055             
056              ctx.restore();
057          }else{
058              ctx.drawImage(image, this.x, this.y, w, h);
059          }
060         
061      }
062  }
063 
064  function clearScreen(){
065      //ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
066      ctx.drawImage(bg, 0, 0, ctx.canvas.width, ctx.canvas.height);
067  }
068 
069  function drawScreen(){
070      clearScreen();
071     
072      //绘制得分
073     
074      ctx.font = "40px serif"
075      ctx.strokeStyle = "#FF00ff";
076      ctx.strokeText ("LION打地鼠", 50,50);
077      ctx.fillStyle = "#000000";
078      ctx.fillText("LION打地鼠",50,50);
079 
080      ctx.fillStyle = "#ff0000";
081      ctx.fillText("你的得分:" score,450,50);
082      for(i=0;i<3;i ){
083          for(j=0; j<3; j ){
084              holes[i][j].draw();
085          }
086      }
087     
088 
089      for(i=0;i<3;i ){
090          for(j=0; j<3; j ){
091              sprites[i][j].draw();
092          }
093      }
094     
095      if(hammer){
096          hammer.draw(mousePress);
097      }
098  }
099 
100  function updateLogic(){
101 
102      for(i=0;i<3;i ){
103          for(j=0; j<3; j ){
104              sprites[i][j].state=='hide'
105          }
106      }
107     
108      var a = Math.round(Math.random()*100)%3;
109      var b = Math.round(Math.random()*100)%3;
110      sprites[a][b].state='show';
111  }
112 
113 
114  function hammerMove(e){
115      if(hammer){
116          hammer.x = event.x-40;
117          hammer.y = event.y-40;
118      }
119  }
120 
121  function hit(x, y){
122     
123      for(i=0;i<3;i ){
124          for(j=0;j<3;j ){
125              var s = sprites[i][j];
126             
127              if(s.state=='show'){
128                  if(x>s.x 30 && y>s.y && x<(s.x s.w 30) && y<(s.y s.h)){
129                      score ;
130                      s.state = 'hide';
131                  }
132              }
133          }
134      }
135  }
136 
137  function init(){
138      info = document.getElementById('info');
139      canvas = document.getElementById('screen');
140      ctx = canvas.getContext('2d');
141     
142      bg = new Image();
143      bg.src = 'bg.jpg';
144      bg.onload = function(){};
145     
146     
147      var hamImg = new Image();
148      hamImg.src = 'hammer.png';
149      hamImg.onload = function(){
150          hammer = new HammerSprite(48, 48, 100, 100, hamImg);
151      }
152     
153      var msImg = new Image();
154      msImg.src = 'mouse.png';
155     
156      msImg.onload = function(){
157          for(i=0;i<3;i ){
158              var arr = [];
159              for(j=0; j<3; j ){
160                  var s = new Sprite(60, 70, 50 240*i, 80 120*j, 'hide', msImg);
161                  arr[j] = s;
162              }
163              sprites[i] = arr;
164          }     
165      }
166     
167      var holeImg = new Image();
168      holeImg.src = 'hole.png';
169      holeImg.onload = function(){
170          for(i=0;i<3;i ){
171              var arr = [];
172              for(j=0; j<3; j ){
173                  var s = new HoleSprite(80, 30, 40 240*i, 140 120*j, 'show', holeImg);
174                  arr[j] = s;
175              }
176              holes[i] = arr;
177          }     
178      }
179     
180      setInterval(drawScreen, 30);
181      setInterval(updateLogic, 3000);
182     
183  };
184 
185  function hammerDown(){
186      mousePress = true;
187  }
188 
189  function hammerUp(){
190 
191      info.innerHTML=event.x ':' event.y;
192      mousePress = false;
193      hit(event.x, event.y);
194  }
195 
196  function hideCursor(obj){
197      obj.style.cursor='none';
198  }
199 
200  function showCursor(obj){
201      obj.style.cursor='';
202  }    

问题分析:

  <title>变态贪食蛇</title>

资源图片:

俄罗斯方块就是一个个方块从上到下的落下,固定,当一行满的时候就消去这一行,就类与对象分析设计思想,我们很容易想到,要创造两个对象,一个就是方块对象,一个这是控制对象,在这里,我们再多加上一个对象,我称它为小部件对象,至此,此游戏一共有三个对象,其描述如下

  <style type="text/css">

 

方块对象(cube):就是出现的整个方块,每一个方块由四个小方块组成,一共有7种方块,每个方块有几种状态,每个方块都有自己一些行为

  .tag{color:#ff0000}

澳门皇冠844网站 2

控制对象(fangkuai):这个对象的名字不好起,暂且叫控制对象,它控制了方块何时的移动、下落、变形,它有自己的状态地图

  .leveltag{color:#0000ff}

澳门皇冠844网站 3澳门皇冠844网站 4澳门皇冠844网站 5

小部件对象(kit):就是一个小对象,它集合了一些公告的属性、方法

  .s{border:0px none #fff;width:35px;height:16px;background:#fff;}

作者 lion_yang

现在,我们以一个6行,6列的俄罗斯方块为例

  </style>

...

我们先建立一个坐标系,以左上角为原点,横方向为x轴,竖方向为y轴,

  <script type="text/javascript" src="./js/snakemap.js"></script>

澳门皇冠844网站 6

  </head>

刚开始,方块从上面点出现,(3,0)点就代表其位置,每隔的一定的时间,在检测可以向下移动之后,则中心坐标的纵坐标加1,为(3,1),这样一直往下移,直到判断无法下移了,方块对象的的中心坐标为(x1,y1),将此坐标交给控制对象,由控制对象将自己的状态矩阵相应的四个点置为1,这时,检测消行,之后,让方块的位置坐标重新为(3,0)就行了

  <body>

统一冲突检测方法:

  <div id="tips" style="width:500px;border:1px solid #000;height:20px;line-height:20px;left:10px;font-size:12px;position:absolute;">工具猫变态版贪吃蛇 by gainover | <span class="tag">♥</span> <input id="life" class="s" value="0" /> | <span id="snaketag">■</span> <input id="bodylen" class="s" value="3" /> | <span class="leveltag">★</span> <input id="level" class="s" value="0" /> | <span class="leveltag">▲</span> <input id="score" class="s" value="0" /></div>

就是不管你是左移,右移,下移,变形等,检测冲突都统一一个方法,就是假如执行了对应操作后,检测方块的坐标对应的矩阵坐标是否有1存在,有则存在冲突,无法执行此操作,特别的,对于下移,存在冲突即是到头了,因此,为了统一越界检查,边界也有坐标,并且为1

  <div id="snakeMap" style="position:absolute;top:40px;left:10px;width:0px;height:0px;border:1px solid #000;">

设计思想如图

 

 

  </div>

方块的与控制对象的交互只是抽象出来的数学坐标的交互,不涉及实际的坐标,这样,使得理解、操作简单,扩展性强

  <div id="snakeTip" style="display:none;background:#fff;position:absolute;top:40px;left:10px;width:0px;height:0px;border:1px solid #000;">

具体设计

 

方块对象:

  </div>

属性:

  <script type="text/javascript">

{种类,四个小块的位置坐标,中心坐标,颜色,状态}

  //用 $ 代替 document.getElementById

行为:

  function $(id){return document.getElementById(id);}

显示:根据种类、状态、颜色属性、中心坐标等在实际位置坐标绘出方块

  function remove(id){$(id).parentNode.removeChild($(id));}

下移:中心坐标的纵坐标(y)加1,执行显示方法

  var config={ //定义一个config对象,来存储游戏设置

左移:中心坐标的横坐标(x)减1,执行显示方法

  "mapw":500, //定义地图宽

右移:中心坐标的横坐标(x)加1,执行显示方法

  "maph":300, //定义地图高

变形:状态属性加1,执行显示方法

  "mapColor":"#fff", //定义地图背景颜色

变色:颜色属性改变

  "cellw":10, //定义游戏里每一格的宽度

变种类:种类属性随机取值

  "cellh":10, //定义游戏里每一格的高度

控制对象:

  "snake":3, //每一关初始的时候蛇的长度为 3格

属性

  "win":20, // 每一关蛇长度达到多少格为过关

{状态矩阵}

  "speed":100, // 每1000毫秒,即1秒移动一格

行为:

  "blockColor":"#000", //砖块的颜色

绘图:根据状态坐标,绘了实际的图形

  "snakeColor":"#33ff66", //蛇的颜色

检测消行:判断状态矩阵是否有某列全为1的情况,如果出现,则消去本列,分数加1,后列向前移动

  "fruitColor":"#ff0000", //果实的颜色

判断左移:让方块中心坐标横坐标-1之后,检测状态矩阵,方块的四个坐标对应的矩阵坐标是否有1存在,有无法左移,否则,可以

  "fruitNum":2, //最初出现的fruit数目

判断右移:让方块中心坐标横坐标 1之后,检测状态矩阵,方块的四个坐标对应的矩阵坐标是否有1存在,有无法右移,否则,可以

  "map":[],

判断下移:让方块中心坐标纵坐标 1之后,检测状态矩阵,方块的四个坐标对应的矩阵坐标是否有1存在,有无法下移,否则,可以

  "fruit":[]

判断变形:让方块状态属性 1之后,检测状态矩阵,方块的四个坐标对应的矩阵坐标是否有1存在,有无法变形,否则,可以

  };

控制左移:执行判断方法,若可以,则执行方块的左移方法

  function getCoord(x,y){

控制右移:执行判断方法,若可以,则执行方块的右移方法

  //这个函数用来获得第y行,第x列那个格子的左上角坐标

控制下移:执行判断方法,若可以,则执行方块的下移方法,否则,就是到头了,将方块的坐标对应的状态矩阵坐标置1,执行绘图方法,检测消行,再执行绘图方法,接着,执行方块的变种类方法,变色方法,然后改变方块的中心坐标,从最上边重新开始出现

  return {

控制变形:执行判断方法,若可以,则执行方块的变形方法

  "x":config.cellw*x,

注册事件:按up执行 控制变形,按left控制左移 ,按right 控制右移,按down控制下移

  "y":config.cellh*y

设定定时器:不同level,不同时间,每隔此时间执行一次 控制下移 方法

  }

 

  }

小部件对象:

  function drawBlock(x,y,type){

方法:

  //这个函数用来在地图上绘制一个方块

数学坐标转实际坐标:

  var coord=getCoord(x,y); //获得第x行,第y列这个格子的坐标

中心坐标得到四个坐标:

  var s=document.createElement("div"); //创建一个 <div> </div>

数学坐标点显示的实际块:比如(3,0),此方法会在网页中显示一个实际的块

  s.id="b" getId();

等等

  s.style.position="absolute"; //设置该DIV为绝对定位

优点:

  s.style.width=(config.cellw-2) "px"; //设置这个 div 的宽

1. 只有三个对象,不会因为方块不断的产生出现很多对象,浪费空间,方块对象只有一个,重复使用

  s.style.height=(config.cellh-2) "px"; //设置这个 div 的高

  1. 扩展性强,思路清晰,无论多少行,多少列,代码不用修改

  2. 实现的代码还算是少的吧

  s.style.top=coord.y "px"; //设置这个 div 的纵坐标

缺点:

  s.style.left=coord.x "px"; //设置这个 div 的横坐标

矩阵不转置就好了,这样消行的时候不是消去的矩阵的列了,而是消行,比较简单

  s.style.border="1px solid #000";

具体实现代码:

  var bgcolor=config.blockColor;

确保有jquery.js引入

  switch(type){

[js]  

  case 1: //蛇身体

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";  

  bgcolor=config.snakeColor;

<html lang="en">  

  break;

<head>  

  case 2: //果实

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  

  bgcolor=config.fruitColor;

    <title>俄罗斯方块By王斌_code</title>  

  break;

  <script language='javascript' src=';  

  }

  <script language='javascript'>  

  s.style.background=bgcolor;

/* 

  $("snakeMap").appendChild(s);

**@author:王斌 

  return s.id;

**欢迎交流web技术 

  //上面代码里的减2,是减去边框的厚度,保证格子占的面积是 10×10

** 

  }

**/  

  function drawMap(mapArr){

$(document).ready(function(){  

  config.map=mapArr;

var WIDTH = 500;  

  //开始绘制地图

var HEIGHT = 500;  

  //首先设置地图总大小

var ROWS;  

  $("snakeMap").innerHTML="";

var COLS;  

  $("snakeMap").style.width=config.mapw "px";

var level;//级别  

  $("snakeMap").style.height=config.maph "px";

var h;//计时器  

  $("snakeTip").style.width=config.mapw "px";

var everyTime;//级别对应的时间  

  $("snakeTip").style.height=config.maph "px";

var state = 0;  

  $("snakeMap").style.background=config.mapColor;

var colors = ["d0d85d","37bcaf","fac0eb","faecd0","8eeae1","f981a3","83f8a2"];  

  // i 从第一行到最后一行

var everyH;//每块的高度  

  for(var i=0;i<mapArr.length;i ){

var everyW;//每块宽度  

  // j 从第一列到最后一列

var kit = {};//小部件函数对象  

  for(var j=0;j<mapArr[i].length;j ){

var cube = {};//方块对象  

  if(mapArr[i][j]==1){

cube.color = "";//当前颜色  

  //如果mapArr[i][j]==1,说明这里需要画一个方块

kit.realX = 0;//实际坐标x  

  drawBlock(j,i); // 绘制第 i 行,第j 列的方块

kit.realY = 0;//实际坐标y  

  }

kit.dotToReal = function(x,y){//实现坐标转换,将数学坐标转换为实际的坐标  

  if(mapArr[i][j]==2){

  this.realX = x * everyW;  

  if(!config.fruit[i]){config.fruit[i]=[]}

  this.realY = y * everyH;  

  config.fruit[i][j]={

}  

  "id":drawBlock(j,i,2),

kit.show = function(x,y,i,is_next){//is_next标识是否是预测块显示  

  "x":j,

  this.dotToReal(x,y);  

  "y":i

  if(i == 0){  

  };

    if(is_next == 1) $(".next").remove();  

  }

    else $(".wrapper .curr").remove();  

  }

  }  

  }

  if(is_next == 1) $(".wrapper").append("<div class='next' style='width:" everyW "px;height:" everyH "px;position:absolute;top:" this.realY "px;left:" this.realX "px;'></div>");  

  }

  else $(".wrapper").append("<div class='curr' style='background:" cube.color ";width:" everyW "px;height:" everyH "px;position:absolute;top:" this.realY "px;left:" this.realX "px;'></div>");  

  function getId(){

}  

  if(!this.blockNum){this.blockNum=1}

cube.nowDot = [];//方块的当前坐标数组,二维数组  

  else{this.blockNum }

cube.state = 0;//方块的初始状态,依此变换方块  

  return this.blockNum;

cube.type = 0;//方块的种类  

  }

cube.nextType = Math.round(Math.random() * 6);//下一个方块种类  

  function keyControl(e,obj){

cube.nowCenter = [];//方块的中心坐标,可以由此代表方块整体坐标  

  e=e||window.event;

cube.getNowDot = function(){//由中心坐标得到当前的四个坐标  

  var odirection=obj.direction;

  var x = this.nowCenter[0];  

  switch(e.keyCode){

  var y = this.nowCenter[1];  

  case 37:

  var t = this.state % 4;  

  if(obj.direction=="UP"||obj.direction=="DOWN"){

  this.nowDot = this.getDot(x,y,cube.type,t);  

  obj.direction="LEFT";

}  

  }

cube.getDot = function(x,y,type,t){//此函数是依照当前方块的种类,由中心坐标得到给出返回四个坐标的数组  

  break;

  var nowDot;  

  case 38:

  switch(type){  

  if(obj.direction=="LEFT"||obj.direction=="RIGHT"){

    case 0:  

  obj.direction="UP";

      if(t == 0) nowDot = [[x-1,y],[x,y],[x 1,y],[x,y 1]];  

  }

      else if(t == 1) nowDot = [[x-1,y],[x,y-1],[x,y],[x,y 1]];  

  break;

      else if(t == 2) nowDot = [[x-1,y],[x,y-1],[x,y],[x 1,y]];  

  case 39:

      else if(t == 3) nowDot = [[x,y-1],[x,y],[x,y 1],[x 1,y]];  

  if(obj.direction=="UP"||obj.direction=="DOWN"){

      break  

  obj.direction="RIGHT";

    case 1:  

  }

      if(t == 0 || t == 2) nowDot = [[x-1,y],[x,y],[x 1,y],[x 2,y]];  

  break;

      else if(t == 1 || t ==3) nowDot = [[x,y-1],[x,y],[x,y 1],[x,y 2]];  

  case 40:

      break;  

  if(obj.direction=="LEFT"||obj.direction=="RIGHT"){

    case 2:  

  obj.direction="DOWN";

      if(t == 0) nowDot = [[x-1,y],[x,y],[x,y 1],[x,y 2]];  

  }

      if(t == 1) nowDot = [[x-2,y],[x-1,y],[x,y],[x,y-1]];  

  break;

      if(t == 2) nowDot = [[x,y-1],[x,y],[x,y 1],[x 1,y 1]];  

  case 65:

      if(t == 3) nowDot = [[x,y 1],[x,y],[x 1,y],[x 2,y]];  

  config.speed-=10;

      break;  

  break;

    case 3:  

  case 83:

      if(t == 0) nowDot = [[x 1,y],[x,y],[x,y 1],[x,y 2]];  

  config.speed =10;

      if(t == 1) nowDot = [[x-2,y],[x-1,y],[x,y],[x,y 1]];  

  break;

      if(t == 2) nowDot = [[x,y-1]澳门皇冠844网站,,[x,y],[x,y 1],[x-1,y 1]];  

  case 80:

      if(t == 3) nowDot = [[x,y-1],[x,y],[x 1,y],[x 2,y]];  

  obj.stoped=!obj.stoped;

      break;  

  break;

    case 4:  

  }

      nowDot = [[x,y],[x 1,y],[x,y 1],[x 1,y 1]];  

  if(odirection!=obj.direction){

      break;  

  //如果方向被改变了,则立即移动

    case 5:  

  obj.move();

      if(t == 0 || t == 2) nowDot = [[x-1,y],[x,y],[x,y 1],[x 1,y 1]];  

  }

本文由澳门皇冠金沙网站发布于前端开发,转载请注明出处:工具猫变态版贪吃蛇,js版俄罗斯方块设计思想及