canvas貪吃蛇遊戲程式碼例項

admin發表於2017-02-17
Canvas遊戲

分享一段程式碼例項，它利用canvas實現了貪吃蛇遊戲。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
canvas {
  border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
 
function rand(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
var food = {
  x: 0,
  y: 0,
  w: 40,
  h: 40,
  color: "orange"
}
food.draw = function() {
  ctx.beginPath();
  ctx.fillStyle = this.color;
  ctx.fillRect(this.x, this.y, this.w, this.h);
}
 
food.setPosition = function() {
 
  while (true) {
    var x = rand(0, (canvas.width - this.w) / this.w) * this.w;
    var y = rand(0, (canvas.height - this.h) / this.h) * this.h;
    for (var i = 0; i < snake.bodys.length; i++) {
      if (x == snake.bodys[i].x && this.y == snake.bodys[i].y) {
        break;
      }
    }
    //之前的遍歷沒有找到重合點跳出迴圈
    if (i == snake.bodys.length) {
      this.x = x;
      this.y = y;
      break;
    }
 
  }
}
var snake = {
  x: 40,
  y: 40,
  w: 40,
  h: 40,
 
  headColor: "red",
  bodyColor: "yellow",
  top: false,
  bottom: false,
  left: false,
  right: true,
  bodys: [],
  bool: true
}
snake.draw = function() {
  ctx.beginPath();
  ctx.fillStyle = this.headColor;
  ctx.fillRect(this.x, this.y, this.w, this.h);
}
snake.move = function() {
  if (this.left) {
    this.x -= this.w;
  } else if (this.right) {
    this.x += this.w;
  } else if (this.top) {
    this.y -= this.h;
  } else if (this.bottom) {
    this.y += this.h;
  }
  snake.draw();
  snake.drawBody();
  snake.savePosition();
 
}
snake.savePosition = function() {
  this.bodys.push({
    x: this.x,
    y: this.y,
    w: this.w,
    h: this.h
  });
  if (this.bodys.length > 4 && this.bool) {
    //arr.shift（）刪除陣列第一個元素
    this.bodys.shift();
  } else {
    this.bool = true;
  }
}
snake.drawBody = function() {
  for (var i = 0; i < this.bodys.length; i++) {
    ctx.beginPath();
    ctx.fillStyle = this.bodyColor;
    ctx.fillRect(this.bodys[i].x, this.bodys[i].y, this.bodys[i].w, this.bodys[i].h);
  }
 
}
 
food.setPosition();
snake.draw();
 
function checkP(obj1, obj2) {
  if (Math.abs(obj1.x + obj1.w / 2 - (obj2.x + obj2.w / 2)) <
    obj1.w / 2 + obj2.w / 2 && Math.abs(obj1.y + obj1.h / 2 - (obj2.y + obj2.h / 2)) <
    obj1.h / 2 + obj2.h / 2) {
    return true;
  } else {
    return false;
  }
 
}
setInterval(function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  food.draw();
  snake.move();
  if (checkP(food, snake)) {
    food.setPosition();
    food.draw();
    snake.bool = false;
  }
 
}, 200);
document.onkeydown = function(e) {
  var ev = e || window.event;
  switch (ev.keyCode) {
    case 37:
      if (!snake.right) {
        snake.left = true;
        snake.right = false;
        snake.top = false;
        snake.bottom = false;
      }
      break;
 
    case 38:
      if (!snake.bottom) {
        snake.left = false;
        snake.right = false;
        snake.top = true;
        snake.bottom = false;
      }
      break;
    case 39:
      if (!snake.left) {
        snake.left = false;
        snake.right = true;
        snake.top = false;
        snake.bottom = false;
      }
      break;
    case 40:
      if (!snake.top) {
        snake.left = false;
        snake.right = false;
        snake.top = false;
        snake.bottom = true;
      }
      break;
  }
}                        
</script>
</body>
 
</html>

相關文章