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) {
//一组标的目的键一组字母 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天
各人能够面赞、珍藏、存眷、批评我啦、需求完整文件随时联系我或交换哟~！

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！

HTML+CSS+JS实现 ❤️贪吃蛇游戏源码❤️

浏览过的版块