專案地址-> 已上傳github
專案地址-> 碼雲
專案演示地址
技術細節
- 所有的全域性變數
var snake_body // 蛇節陣列，儲存每個蛇節的位置
var direction // 蛇當前移動的方向
var food_position // 食物的位置，每次被蛇吃掉時更新
複製程式碼- 初始化蛇節陣列和蛇開始移動的方向、食物的位置
function init_snake() {
// 陣列中每一個值都是一個物件，裡面存放了x、y軸的座標位置和color顏色資訊，red是蛇頭
snake_body = [{
x: 40,
y: 40,
color: 'black'
}, {
x: 60,
y: 40,
color: 'black'
}, {
x: 80,
y: 40,
color: 'red'
}]
// 蛇開始預設向右邊移動
direction = 'right'
// 食物開始位置
food_position = {
x: 260,
y: 180
}
}
// 呼叫蛇的初始化方法
init_snake()
複製程式碼- 先將遊戲場景畫好，
// init canvas
function init() {
context.strokeStyle = '#EEEEEE'
for(var i = 0; i < 500; i += 20) {
// 畫豎線
context.moveTo(i, 0)
context.lineTo(i, 500)
// 畫橫線
context.moveTo(0, i)
context.lineTo(500, i)
}
context.stroke()
// 因為遊戲場景中預設會有一個食物，這個食物在隨機位置生成
context.fillStyle = 'black'
context.fillRect(food_position.x, food_position.y, 20, 20)
}
複製程式碼- 開始畫蛇
// repaint snake fastival
function draw_snake() {
var new_fastival = []
for(var i = 0; i < snake_body.length; i++) {
context.fillStyle = snake_body[i].color
context.fillRect(snake_body[i].x, snake_body[i].y, 20, 20)
new_fastival.push({
x: snake_body[i].x,
y: snake_body[i].y
})
}
// 判斷是否和食物發生碰撞
eat_food()
// 判斷是否死亡
dead(new_fastival)
}
複製程式碼- 監聽鍵盤點選事件，根據keycode修改direction方向變數
// left 37
// right 39
// top 38
// bottom 40
window.addEventListener('keydown', function(e) {
if(e.keyCode == 37) {
if(direction != 'right') {
direction = 'left'
}
} else if(e.keyCode == 39) {
if(direction != 'left') {
direction = 'right'
}
} else if(e.keyCode == 38) {
if(direction != 'bottom') {
direction = 'top'
}
} else if(e.keyCode == 40) {
if(direction != 'top') {
direction = 'bottom'
}
}
})
複製程式碼- 蛇的移動方法
通過將後一位陣列的值賦值給前一位，最後將snake_body蛇節陣列中最後一個元素的x或y值加上一個蛇節的寬度，如果是left方向，x-=20，right方向x+=20，top方向y-=20，bottom方向y+=20。
function move_snake() {
var x = 0, y = 0
// 對方向作判斷
if(direction == 'right') {
x = 20
} else if(direction == 'left') {
x = -20
} else if(direction == 'top') {
y = -20
} else if(direction == 'bottom') {
y = 20
}
for(var i = 0; i < snake_body.length - 1; i++) {
snake_body[i].x = snake_body[i + 1].x
snake_body[i].y = snake_body[i + 1].y
}
snake_body[snake_body.length - 1].x += x
snake_body[snake_body.length - 1].y += y
}
複製程式碼- 判斷食物是否被吃掉
function eat_food() {
// 如果蛇節陣列中最後一個物件的x、y值等於食物的x、y值，那麼這個食物將會被蛇吃掉
if(snake_body[snake_body.length - 1].x == food_position.x && snake_body[snake_body.length - 1].y == food_position.y) {
// 再次生產食物
random_food()
// 蛇在吃掉食物之後將會新增一個蛇節
add_snake_fastival()
}
}
複製程式碼- 食物在被吃掉之後，位置將隨機生產
// 隨機生產食物位置的方法
function random_food() {
food_position = {
// ~~ 是位運算取整演算法，比Math.floor()這個方法效率高
x: ~~(Math.random() * (500 / 20)) * 20,
y: ~~(Math.random() * (500 / 20)) * 20
}
}
複製程式碼- 為蛇新增一個蛇節
function add_snake_fastival() {
// 新蛇節
new_fastival = {
x: snake_body[0].x - 20,
y: snake_body[0].y - 20,
color: 'black'
}
// 在全域性陣列中的頭部新增
snake_body.unshift(new_fastival)
}
複製程式碼- 判斷蛇是否死掉，蛇在撞牆或者撞自己都會死掉
function dead(new_fastival) {
var last_fastival = snake_body[snake_body.length - 1]
// 判斷是否撞牆
if(last_fastival.x == -20 || last_fastival.x == 500 || last_fastival.y == -20 || last_fastival.y == 500) {
alert("重新開始遊戲")
init_snake()
}
// 判斷是否自殘
for(var i = 0; i < new_fastival.length; i++) {
for(var j = i + 1; j < new_fastival.length; j++) {
if(new_fastival[i].x == new_fastival[j].x && new_fastival[i].y == new_fastival[j].y) {
alert("重新開始遊戲")
init_snake()
}
}
}
}
複製程式碼- 效果圖
在canvas遊戲開發中，我們會遇到像這樣很多節點需要進行碰撞檢測。
而重複寫這些碰撞檢測程式碼會極大的影響我們的開發效率，我根據我以前用過的遊戲引擎的經驗，如unity、cocos creator..。
我自己編寫了一個外掛，專門用於碰撞檢測，只需要傳入x、y、width、height等引數，你就可以很方便的進行遊戲開發了~~
碰撞檢測部落格請另參見 自己模擬遊戲引擎,動手寫個js碰撞檢測外掛，如果有任何問題，歡迎大家來和我交流!