H5 canvas實(shí)現(xiàn)貪吃蛇小游戲
發(fā)布時(shí)間：2017-07-28 14:26:47 作者：小pxu 
我要評(píng)論
我要評(píng)論本篇文章主要介紹了H5 canvas實(shí)現(xiàn)貪吃蛇小游戲，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
本文介紹了H5 canvas實(shí)現(xiàn)貪吃蛇小游戲，分享給大家，具體如下：
實(shí)現(xiàn)效果如下
實(shí)現(xiàn)思路：
ps：這個(gè)只是思路，詳細(xì)可看代碼注釋
一、先把蛇畫出來
- 定義一下蛇的結(jié)構(gòu)，用一個(gè)數(shù)組保存一堆矩形，包含蛇頭（紅）和蛇身（灰）。
- 畫蛇（初始狀態(tài)）
二、蛇能動(dòng)（重點(diǎn)）
- 蛇移動(dòng)方式：自始至終都只有蛇頭在動(dòng)
- 畫一個(gè)灰色的方塊，位置與蛇頭重疊
- 將這個(gè)方塊插到數(shù)組中蛇頭后面一個(gè)的位置arrar.splice(0,1,rect)
- 砍去末尾的方塊array.pop()
- 將蛇頭向設(shè)定方向移動(dòng)一格
- 需要一個(gè)保存方向的變量(direction)
- 根據(jù)方向進(jìn)行移動(dòng)，一次移動(dòng)一個(gè)格
- 根據(jù)按鍵改方向
三、隨機(jī)投放食物
- 需要隨機(jī)食物的位置
- 需要判斷食物在不在蛇身上。
四、吃食物
- 判斷食物是否與蛇頭重疊
- 數(shù)組加一個(gè)元素（少刪除一個(gè)元素就是加一個(gè)元素）
- 生成新的食物
五、gameover
- 撞墻判定
- 裝自己判定
<!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');
//構(gòu)造對(duì)象方塊
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();
}
//構(gòu)造對(duì)象蛇
function Snake () {
//定義一個(gè)空數(shù)組存放組成整蛇的方塊對(duì)象
var snakeArray = [];
//畫出4個(gè)方塊，設(shè)置成灰色
for (var i = 0; i < 4; i++) {
var rect = new Rect(i*20,0,20,20,"gray");
//之所以用splice（往前加）而不是用push（往后加），是為了讓蛇頭出現(xiàn)在數(shù)組第一個(gè)位置
snakeArray.splice(0,0,rect);
}
//把數(shù)組第一個(gè)作為蛇頭，蛇頭設(shè)成紅色
var head = snakeArray[0];
head.color = "red";
//此處將兩個(gè)后面常用的東西定為屬性，方便后面調(diào)用
this.head = snakeArray[0]; //蛇頭
this.snakeArray = snakeArray; //整蛇數(shù)組
//給定初始位置向右(同keyCode右箭頭)
this.direction = 39;
}
//畫蛇的方法
Snake.prototype.draw = function () {
for (var i = 0; i < this.snakeArray.length; i++) {
this.snakeArray[i].draw();
}
}
//蛇移動(dòng)的方法
Snake.prototype.move = function () {
//此處是核心部分，蛇的 移動(dòng)方式
//1、畫一個(gè)灰色的方塊，位置與蛇頭重疊
//2、將這個(gè)方塊插到數(shù)組中蛇頭后面一個(gè)的位置
//3、砍去末尾的方塊
//4、將蛇頭向設(shè)定方向移動(dòng)一格
var rect = new Rect(this.head.x,this.head.y,this.head.w,this.head.h,"gray");
this.snakeArray.splice(1,0,rect);
//判斷是否吃到食物，isEat判定函數(shù)寫在最后了
//吃到則食物重新給位置，不砍去最后一節(jié)，即蛇變長(zhǎng)
//沒吃到則末尾砍掉一節(jié)，即蛇長(zhǎng)度不變
if (isEat()){
food = new getRandomFood();
}else{
this.snakeArray.pop();
}
//設(shè)置蛇頭的運(yùn)動(dòng)方向，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);
}
// 撞自己，循環(huán)從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()
//定時(shí)器
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();
}
//隨機(jī)函數(shù)，獲得[min,max]范圍的值
function getNumberInRange (min,max) {
var range = max-min;
var r = Math.random();
return Math.round(r*range+min)
}
//構(gòu)建食物對(duì)象
function getRandomFood () {
//判定食物是否出現(xiàn)在蛇身上，如果是重合，則重新生成一遍
var isOnSnake = true;
//設(shè)置食物出現(xiàn)的隨機(jī)位置
while(isOnSnake){
//執(zhí)行后先將判定條件設(shè)置為false，如果判定不重合，則不會(huì)再執(zhí)行下列語句
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){
//如果判定重合，將其設(shè)置為true，使隨機(jī)數(shù)重給
isOnSnake = true;
break;
}
}
}
//返回rect，使得實(shí)例化對(duì)象food有draw的方法
return rect;
}
//判定吃到食物，即蛇頭坐標(biāo)與食物坐標(biāo)重合
function isEat () {
if (snake.head.x == food.x && snake.head.y == food.y){
return true;
} else {
return false;
}
}
</script>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了基于Html5寫一個(gè)簡(jiǎn)單的俄羅斯方塊小游戲，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-12-03
使用數(shù)據(jù)結(jié)構(gòu)給女朋友寫個(gè)Html5走迷宮游戲
本文給大家分享使用數(shù)據(jù)結(jié)構(gòu)給女朋友寫個(gè)Html5走迷宮游戲功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-11-26html5 canvas-2.用canvas制作一個(gè)猜字母的小游戲
今天我們要用canvas制作一個(gè)猜字母的小游戲,游戲設(shè)計(jì)很簡(jiǎn)單，系統(tǒng)會(huì)隨機(jī)從a-z的26個(gè)字母中選擇一個(gè)保存起來，你鍵盤輸入一個(gè)字母，系統(tǒng)會(huì)提示你正確字符比你當(dāng)前輸入字母小2013-01-07
HTML5+CSS+JavaScript實(shí)現(xiàn)捉蟲小游戲設(shè)計(jì)和實(shí)現(xiàn)
這篇文章主要介紹了HTML5+CSS+JavaScript實(shí)現(xiàn)捉蟲小游戲設(shè)計(jì)和實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參2021-10-12
