本文介紹了H5 canvas實現貪吃蛇小遊戲，分享給大家，具體如下：
實現效果如下實現思路：ps：這個只是思路，詳細可看代碼註釋
一、先把蛇畫出來<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Document</title> <style> #canvas{ box-shadow: 0 5px 40px black; } </style> </head><body> <canvas id=canvas width=800 height=500></canvas></body><script> var canvas = document.getElementById('canvas'); var context = canvas.getContext(' 2d'); //構造對象方塊function Rect (x,y,w,h,color) { this.x = x; this.y = y; this.w = w; this.h = h; this.color = color; } //畫方塊的方法Rect.prototype.draw = function () { context.beginPath(); context.fillStyle = this.color; context.rect(this.x,this.y,this.w, this.h); context.fill(); context.stroke(); } //構造對象蛇function Snake () { //定義一個空數組存放組成整蛇的方塊對象var snakeArray = []; //畫出4個方塊，設置成灰色for (var i = 0; i < 4; i++) { var rect = new Rect(i*20,0,20,20,gray); //之所以用splice（往前加）而不是用push（往後加），是為了讓蛇頭出現在數組第一個位置snakeArray.splice(0,0,rect); } //把數組第一個作為蛇頭，蛇頭設成紅色var head = snakeArray[0]; head.color = red; //此處將兩個後面常用的東西定為屬性，方便後面調用this.head = snakeArray[0]; //蛇頭this.snakeArray = snakeArray; / /整蛇數組//給定初始位置向右(同keyCode右箭頭) this.direction = 39; } //畫蛇的方法Snake.prototype.draw = function () { for (var i = 0; i < this.snakeArray.length; i++) { this.snakeArray[i].draw(); } } //蛇移動的方法Snake.prototype.move = function () { //此處是核心部分，蛇的移動方式//1、畫一個灰色的方塊，位置與蛇頭重疊//2、將這個方塊插到數組中蛇頭後面一個的位置//3、砍去末尾的方塊//4、將蛇頭向設定方向移動一格var rect = new Rect(this.head.x,this.head.y,this.head.w,this.head.h,gray); this.snakeArray.splice(1,0,rect); //判斷是否吃到食物，isEat判定函數寫在最後了//吃到則食物重新給位置，不砍去最後一節，即蛇變長//沒吃到則末尾砍掉一節，即蛇長度不變if (isEat()){ food = new getRandomFood(); }else{ this.snakeArray.pop(); } //設置蛇頭的運動方向，37 左，38 上，39 右，40 下switch (this. direction) { case 37: this.head.x -= this.head.w break; case 38: this.head.y -= this.head.h break; case 39: this.head.x += this.head .w break; case 40: this.head.y += this.head.h break; default: break; } // gameover判定// 撞牆if (this.head.x > canvas.width || this.head. x < 0 || this.head.y > canvas.height || this.head.y < 0){ clearInterval(timer); } // 撞自己，循環從1開始，避開蛇頭與蛇頭比較的情況for (var i = 1; i < this.snakeArray.length; i++) { if (this.snakeArray[i].x == this.head.x && this.snakeArray[i].y == this.head.y ){ clearInterval(timer); } } } //畫出初始的蛇var snake = new Snake() snake.draw(); //畫出初始的食物var food = new getRandomFood() //定時器var timer = setInterval(function () { context.clearRect(0,0,canvas.width,canvas.height); food.draw(); snake.move(); snake.draw(); }, 100) //鍵盤事件，其中的if判定是為了讓蛇不能直接掉頭document.onkeydown = function (e) { var ev = e||window.event; switch(ev.keyCode){ case 37:{ if (snake.direction !== 39){ snake.direction = 37; } break; } case 38:{ if (snake.direction !== 40){ snake.direction = 38; } break; } case 39:{ if (snake.direction !== 37){ snake.direction = 39; } break; } case 40:{ if (snake.direction !== 38){ snake.direction = 40; } break; } } ev.preventDefault(); } //隨機函數，獲得[min,max]範圍的值function getNumberInRange (min,max) { var range = max-min; var r = Math.random(); return Math.round(r*range+min) } //構建食物對象function getRandomFood () { //判定食物是否出現在蛇身上，如果是重合，則重新生成一遍var isOnSnake = true; //設置食物出現的隨機位置while(isOnSnake){ //執行後先將判定條件設置為false，如果判定不重合，則不會再執行下列語句isOnSnake = false; var indexX = getNumberInRange(0,canvas.width/20-1); var indexY = getNumberInRange(0,canvas.height/20-1 ); var rect = new Rect(indexX*20, indexY*20, 20, 20, green); for (var i = 0; i < snake.snakeArray.length; i++) { if(snake.snakeArray[i]. x == rect.x && snake.snakeArray[i].y == rect.y){ //如果判定重合，將其設置為true，使隨機數重給isOnSnake = true; break; } } } //返回rect，使得實例化對象food有draw的方法return rect; } //判定吃到食物，即蛇頭坐標與食物坐標重合function isEat () { if (snake.head.x == food.x && snake. head.y == food.y){ return true; } else { return false; } }</script></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。