效果演示：
代碼目錄：
主要代碼實作：
部分代碼 :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
canvas {
border: 1px solid #000000;
}
</style>
</head>
<body>
<canvas width="980" height="600" id="canvas"></canvas>
<script>
//初始化變數
var foods = new Array(); //存放食物坐標
var gameover = false; //游戲結束
var gridWidth = 10; //正方形長度
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"); //構建畫布
//食物定時器、蛇定時器、場景、蛇物件
var food_interval, snake_interval, Farm, Snake;
//方格物件
function node(x, y, w) {
var self = this;
self.x = x;
self.y = y;
self.w = w;
//食物初始化
self.foodInit = function() {
ctx.fillStyle = "#FF0000";
ctx.fillRect(self.x, self.y, self.w, self.w);
}
//蛇的初始化
self.snakeInit = function() {
ctx.fillStyle = "#000000";
ctx.strokeStyle = "#FFFFFF";
ctx.fillRect(x, y, w, w);
ctx.strokeRect(x, y, w, w);
}
//判斷兩個方塊是否重合
self.equals = function(node) {
if (self.x == node.x && self.y == node.y) {
return true;
} else {
return false;
}
}
//清除格子 讓格子跟背景顏色一樣
self.clear = function() {
ctx.fillStyle = "#E8FFFF";
ctx.strokeStyle = "#E8FFFF";
ctx.fillRect(x, y, w, w);
ctx.strokeRect(x, y, w, w);
}
}
//創建場景物件
function farm() {
//保存作用域
var self = this;
ctx.fillStyle = "#E8FFFF"; //填充的場景顏色
ctx.fillRect(0, 0, canvas.width, canvas.height);
//增加食物的方法
self.addFood = function() {
if (gameover) {
return gameOver(); //游戲結束方法
} else {
//計算隨機位置
var x = parseInt(canvas.width / gridWidth * Math.random()) * gridWidth;
var y = parseInt(canvas.height / gridWidth * Math.random()) * gridWidth;
//實體化一個方格物件
var food = new node(x, y, gridWidth);
//得到物件之后，要把食物畫到界面上面
food.foodInit();
//追加到陣列里面
foods.push(food);
}
}
}
//蛇物件
function snake(x, y, len, speed) {
var self = this;
self.init = function() {
self.len = len; //身體長度
self.nodes = new Array(); //蛇的身體陣列
self.dir = "R"; //方向
self.speed = speed; //速度
//從右往左，逐格把蛇畫出來
var nx = x,
ny = y; //蛇的坐標點
for (var i = 0; i < len; i++) {
//創建一個方格物件
var tmpNode = new node(nx, ny, gridWidth);
//把蛇的身體存放起來
self.nodes[i] = tmpNode;
//存放完了之后，把蛇畫出來
tmpNode.snakeInit();
nx -= gridWidth; //往左邊畫
}
//讓蛇動起來定時器
snake_interval = setInterval(self.move, self.speed);
//給蛇系結方向按鍵
document.onkeydown = function(e) {
//按鍵的值
var code = e.keyCode;
//記錄一下舊的方向
self.odir = self.dir;
switch (code) {
//一組方向鍵 一組字母 WASD
case 65:
self.dir = "L";
break;
case 87:
self.dir = "U";
break;
case 68:
self.dir = "R";
break;
case 83:
self.dir = "D";
break;
case 37:
self.dir = "L";
break;
case 38:
self.dir = "U";
break;
case 39:
self.dir = "R";
break;
case 40:
self.dir = "D";
break;
}
}
}原始碼獲取
查看博主主頁或私信博主獲取
精彩推薦更新中：
HTML5大作業實戰100套
打卡 文章 更新 40 / 100天
大家可以點贊、收藏、關注、評論我啦 、需要完整檔案隨時聯系我或交流喲~！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/298186.html
標籤：其他