HTML+CSS+JS实现 贪吃蛇游戏源码
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 贪吃蛇游戏源码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?效果演示：? 文末獲取源碼
代碼目錄：
主要代碼實現：
部分代碼 :
<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) {//一組方向鍵 一組字母 WASDcase 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天
大家可以點贊、收藏、關注、評論我啦 、需要完整文件隨時或交流查看下方微信獲取喲~！
總結
以上是生活随笔為你收集整理的HTML+CSS+JS实现 贪吃蛇游戏源码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java各个版本的特性_Java各个版本
- 下一篇： 基于javaweb(springboot