（幻彩）贪吃蛇游戏设计源码

html+css部分

<!DOCTYPE html>
<html lang="en"><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>body {background: #000;}#board {margin: 0 auto;width: 300px;text-align: center;}#container {width: 1000px;height: 540px;border: 1px solid #777;margin: 0 auto;background: lightblue;position: relative}.snake {position: absolute;width: 20px;height: 20px;background: greenyellow;}.egg {position: absolute;width: 20px;height: 20px;background: rgba(224, 29, 29, 0.726);}h3 {color: #ccc}</style>
</head><body onload="gameRun()"><div id="board"><h3 id="score">SCRAT: 0</h3></div><div id="container"></div>
</body></html>
<script src="index.js"></script>

js部分

var isAlive = true;
var snakes = [];
var egg = null;
var isFirst = true;
var panel = document.getElementById('container')
var scoreBoard = document.getElementById('score')
var score = 0;
var timer = 0;var DIR = {L: 1,R: 2,U: 3,D: 4
}function snake(top, left, dir) {this.top = top;this.left = left;this.dir = dir
}function newEgg(top, left) {this.top = top;this.left = left;
}function gameRun() {if (isFirst) {snakes.push(new snake(40, 40, DIR.D))createEgg();isFirst = false}sankeRun()display()
}function createEgg() {egg = new newEgg(Math.floor(Math.random() * 27) * 20,Math.floor(Math.random() * 45) * 20)
}document.onkeydown = function(e) {var header = snakes[snakes.length - 1];switch (e.keyCode) {case 37:if (header.dir != DIR.R) {header.dir = DIR.L}break;case 38:if (header.dir != DIR.D) {header.dir = DIR.U}break;case 39:if (header.dir != DIR.L) {header.dir = DIR.R}break;case 40:if (header.dir != DIR.U) {header.dir = DIR.D}break;default:break;}
}function sankeRun() {var header = snakes[snakes.length - 1];var newHeader = null;switch (header.dir) {case DIR.L:newHeader = new snake(header.top, header.left - 20, header.dir)break;case DIR.R:newHeader = new snake(header.top, header.left + 20, header.dir)break;case DIR.U:newHeader = new snake(header.top - 20, header.left, header.dir)break;case DIR.D:newHeader = new snake(header.top + 20, header.left, header.dir)break;}deathCheck(newHeader)if (isAlive) {snakes.push(newHeader);if (newHeader.top == egg.top && newHeader.left == egg.left) {createEgg();} else {snakes.shift()}} else {clearInterval(timer)}
}function deathCheck(header) {// var header = snakes[snakes.length - 1];if (header.top < -10 || header.top > 535 || header.left < -10 || header.top > 990) {isAlive = false;return;}for (let i = 0; i < snakes.length; i++) {if (header.top == snakes[i].top && header.left == snakes[i].left) {isAlive = false;return;}}
}function display() {var arrColors = ["red", "yellow", "blue", 'blueviolet', 'chartreuse','chocolate', 'crimson', 'darkgoldenrod', 'darkslateblue']var numColors = parseInt(Math.random() * arrColors.length)if (isAlive) {if (score != snakes.length) {score += 1score = snakes.length + 1;scoreBoard.innerHTML = 'Score: ' + score;}} else {scoreBoard.style.color = "red";scoreBoard.innerHTML = "游戏结束, 你太弱了，才 : " + score;}var fragment = document.createDocumentFragment();for (let i = 0; i < snakes.length; i++) {var div = document.createElement('div')div.className = 'snake';div.style.top = snakes[i].top + 'px'div.style.left = snakes[i].left + 'px'div.style.backgroundColor = arrColors[numColors]fragment.appendChild(div)}var ediv = document.createElement('div')ediv.className = 'egg'ediv.style.backgroundColor = arrColors[numColors]ediv.style.top = egg.top + 'px';ediv.style.left = egg.left + 'px'fragment.appendChild(ediv)panel.innerHTML = ''panel.appendChild(fragment)
}// gameRun()
timer = setInterval(gameRun, 100)

（幻彩）贪吃蛇游戏设计源码相关推荐

c语言贪吃蛇游戏编程视频教程,C语言贪吃蛇游戏精典源码 - 视频教程 - VC中文网-VC-MFC编程论坛 - Powered by Discuz!...
19f700059b660539d5dc (38.08 KB, 下载次数: 0) 2017-11-14 16:28 上传 C语言贪吃蛇游戏精典源码 19f500058fe8fcaf675a (2.98 ...
涂格子游戏html,网页版方格贪吃蛇游戏html源码分享
html源码,要做网页的话复制源码新建一个文本文档粘贴进去,然后文本文档改名snake.html即可. 体验地址:点击进入玩法:用键盘的上下左右控制. 贪吃蛇-陌涛博客www.imotao.com ...
JAVA课程设计（小游戏贪吃蛇）完整源码附素材（二）
目录 JAVA课程设计(小游戏贪吃蛇)完整源码附素材(一) JAVA课程设计(小游戏贪吃蛇)完整源码附素材(二) JAVA课程设计(小游戏贪吃蛇)完整源码附素材(三) 前言 1. 任务描述 1.1 ...
java毕业设计——基于java+J2ME的贪吃蛇游戏设计与实现（毕业论文+程序源码）——贪吃蛇游戏
基于java+J2ME的贪吃蛇游戏设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+J2ME的贪吃蛇游戏设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦.需要下载开题报告P ...
python贪吃蛇源码_Python：游戏：贪吃蛇（附源码）
Python:游戏:贪吃蛇(附源码) 发布时间:2018-09-05 09:59, 浏览次数:1295 , 标签: Python 贪吃蛇是个非常简单的游戏,适合练手. 首先分析一下这个游戏 1.蛇怎么 ...
基于verilog贪吃蛇游戏设计
概述基于verilog贪吃蛇游戏设计.使用verilog语言小游戏主要分为以下几个模块:顶层模块.VGA显示模块.蛇身控制模块.苹果控制模块. 系统主要分为顶层模块.VGA显示模块.蛇身控制模块. ...
【STM32单片机】贪吃蛇游戏设计
文章目录一.主要功能二.硬件资源 1.硬件准备 2.硬件连接四.软件设计 1.软件结构 2.主要代码五.实验现象联系作者一.主要功能系统运行后,TFTLCD触摸屏显示游戏界面,通过按键任 ...
字符版本贪吃蛇游戏设计及算法
字符版本贪吃蛇游戏设计及算法贪吃蛇,是一款经典的益智游戏.我们可以通过算法捕捉和传递智能,设计出能自动跑着吃食物的智能蛇. 有不少人对此研究,设计出了很棒的算法,如图: 归纳一些比较高级的算法为三类 ...
Qt小游戏教程之贪吃蛇（带源码）
#1.内容介绍 Qt小游戏开发系列将为大家带来几个用Qt设计可发的几款简单小游戏(贪吃蛇.俄罗斯方块.黑白棋.扫雷).今天将为大家带来的是贪吃蛇游戏的设计思路详解以及代码实现,本博客适用于有一定Qt基 ...

（幻彩）贪吃蛇游戏设计源码

（幻彩）贪吃蛇游戏设计源码相关推荐

最新文章

热门文章