|
本文目录
1、html+css+js实现❤️贪吃蛇游戏源码❤️(代码片段)
2、html+css+js实现❤️制作loading动画效果❤️
效果演示：
代码目录：
主要代码实现：
部分代码 :
Document
canvas
border: 1px solid #000000;
//初始化变量
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实现❤️制作loading动画效果❤️
html+css+js实现❤️贪吃蛇游戏你能吃过我？❤️源码送给你一起来玩-建议收藏(代码片段)
html+css+js实现❤️贪吃蛇游戏你能吃过我？❤️源码送给你一起来玩-建议收藏(代码片段)
web前端---html+css+js实现的贪吃蛇游戏(代码片段)
html+css+js实现❤️美女拼图游戏❤️(代码片段)
html5+css+js贪吃蛇demo(代码片段)
html+css+javascript实现打地鼠小游戏闲暇时刻玩一玩轻松丢烦恼~
javascript-简单的贪吃蛇小游戏
html+css+js实现❤️动态散花背景❤️(代码片段)
html+css+js实现❤️3d万花筒图片相册展示特效❤️(代码片段)
html+css+js实现❤️卡通足球人物梅西ui特效❤️(代码片段)
|