(幻彩)贪吃蛇游戏设计源码

news/2024/4/19 7:46:59/

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)

http://www.ppmy.cn/news/233870.html

相关文章

开启python之旅——幻彩螺旋

幻彩螺旋 import turtle as t t.reset() t.screensize(800,800,‘black’) t.pensize(2) t.speed(‘fastest’) colors[‘yellow’,‘red’,‘green’,‘purple’] for x in range(200): t.fd(2*x) t.color(colors[x%4]) t.lt(89) t.hideturtle() t.done() 进阶版 import turt…

幻彩灯 html5,WS2811幻彩灯程序

/**************************************************************************************** * WS2811 彩灯驱动函数 * * 调用方法: * 修改宏定义: #define nWs 1 // 有多少颗WS2811级联 * WS_Init(); // IO初始化 * WsDat[0] = 0x808…

蔡徐坤团队获得”微博年度最佳团体“!vivo X23幻彩版却实力抢眼

如今似乎每一款旗舰手机都会有一个代言人&#xff0c;毕竟代言人的巨大流量能够为对应的旗舰手机带来很多热点。而说到手机的代言人&#xff0c;我想蔡徐坤或许大家都知道吧&#xff0c;作为vivo x23的代言人&#xff0c;蔡徐坤着实为这款手机带来了极大的流量&#xff0c;昨天…

windows系统管理手机拍摄的大量照片

Picasa Picasa只要掌握四个功能&#xff0c;就已经能数量级提升管理照片的效率了。 1、相册&#xff08;都是虚拟的&#xff0c;不改变原始文件位置&#xff0c;随便按需创建、删除吧&#xff09;。2、人物&#xff08;识别率超高&#xff0c;轻松管理几千张照片&#xff09;。…

人脸识别终端一体机(Android)人脸识别一体机

人脸识别终端一体机&#xff08;Android&#xff09;人脸识别一体机 安卓&#xff08;Android&#xff09;人脸识别终端一体机是定位为一款功能丰富&#xff0c;扩展性强&#xff0c;稳定性高&#xff0c;简单维护的人脸识别一体机。人脸识别一体机它集于人脸比对算法及人脸识…

ocr识别技术-车牌识别一体机的核心关键

关键核心 车牌识别一体机、车牌识别相机、ocr车牌识别 车牌识别相机的应用背景 随着智慧城市的建设&#xff0c;智慧停车场概念进入了大家的视野。传统的停车场管理主要通过给进入停车场的车辆分发IC卡&#xff0c;容易被复制盗用&#xff0c;容易丢失&#xff0c;缺乏智能、造…

当全能明星“邂逅”惠普激光一体机

篮球和惠普激光一体机也有交集?如果在十年前或许很少见&#xff0c;但在跨界合作此起彼伏的今天也就见怪不怪了&#xff0c;不过此次活动的确让人耳目一新。笔者在上周六(7月2日)就刚刚参加了一场惠普智能打印机和全明星篮球赛的跨界活动&#xff0c;该活动有三大特色&#xf…

一体机(广告投放机)开发

序言 当今社会广告随处可见&#xff0c;广告展现在大家面前也各尽不同&#xff0c;如电视、报纸、网络、车站、公车等等应有尽有&#xff0c;广告是无处不在&#xff0c;如不想见到广告那就不要出门、不要打开电脑手机、这样或许能暂时看不到广告。从这可见广告在人们生活中起到…

4G图传数传一体机GSLINK实测20180930

4G图传数传一体机GSLINK实测20180930 时间&#xff1a;2018年9月30日 地点&#xff1a;江苏南京 测试平台&#xff1a;pixhawk F450 4G图传数传&#xff1a;GSLINK-A1 HDMI&#xff1a;GOPRO 地面软件&#xff1a;MP1.3.56 遥控器&#xff1a;游戏手柄 备注&#xff1a;无人…

自助访客登记与访客身份核验立式一体机

访客系统基本功能&#xff1a; 1.智能预约&#xff1a;可通过现场登记、网页提交信息、微信公众号预约等多种方式进行访客登记&#xff0c;可与企业OA系统对接&#xff0c;系统化管理&#xff0c;操作便捷。 2.证件人脸身份验证&#xff1a;访客身份证、RFID访客卡、访客凭条、…

海康威视人脸、指纹一体机SDK封装 for PowerBuilder 说明

海康威视人脸、指纹一体机SDK封装 for PowerBuilder 说明 概述 ACS 封装&#xff0c;用C实现DLL开发&#xff0c;由PowerBuilder(9.0以上版本) 调用&#xff0c;基于海康威视 SDK&#xff0c;《设备网络SDK使用手册.chm》、《设备网络SDK编程指南&#xff08;门禁&人证&…

抓包测试:车牌识别抓拍一体机数据平台读取不到的问题

海康的出入口一体机&#xff0c;后台手动抓拍可以&#xff0c;但是平台上却收不到设备发出的图片数据&#xff0c;设备是海康的&#xff0c;使用1400协议&#xff0c;同事领导也暂时找不出问题&#xff0c;所以就找了厂家的测试人员&#xff0c;用一些测试根据找出问题。 一开始…

电脑相机,万能相机电脑版

万能相机电脑版是一款专业的手机相机拍照软件&#xff0c;万能相机电脑版是美图秀秀最新开发的集拼图、特效、自拍于一体的拍照神器&#xff0c;万能相机电脑版能够让用户轻松掌控拍照技巧。它聚合了拼图相机、特效相机、自拍相机三大拍摄模式。软件拥有60多款高格调的特效。它…

android 照片备份,照片备份云相册

应用介绍 照片备份云相册这是一款类似于保险柜还要安全的手机相册备份软件&#xff0c;通过云端服务&#xff0c;可以保存大量照片内容&#xff0c;用户能够自行设定照片查看功能&#xff0c;加密保存啊&#xff0c;安全可靠&#xff0c;软件还支持多人链接&#xff0c;让多人能…

ABC一体机plus版横空出世,此时的你看得懂“浪潮牌”AI吗?

过去的一年多以来&#xff0c;我们发现&#xff0c;浪潮在百度的场子上频频亮相…… 去年9月&#xff0c;在帝都上演的百度云智峰会上&#xff0c;浪潮与百度共同发布了ABC 一体机&#xff0c;双方还就一体机在金融、电信、气象等行业的普及应用方面“交换了眼神儿”&#xff…

android pad 人脸检测,彻底解决各类照片欺骗的人脸识别一体机平板型

原标题&#xff1a;彻底解决各类照片欺骗的人脸识别一体机平板型 宽动态双摄活体防伪&#xff0c;彻底解决各类照片在各种载体上的欺骗&#xff1b; 夜间红外、RGB双补光&#xff1b; 支持串口、韦根26、34输入/出&#xff0c;输出内容支持配置&#xff1b; 采用深圳多奥基于AI…

Unity 小米VR一体机开发(一)

本文原创&#xff0c;转载请注明出处&#xff1a;https://blog.csdn.net/qq_36503704/article/details/82349474 小编第一次写这种东西&#xff0c;有什么问题&#xff0c;大家可以指出后一起讨论。下面进入正题。 一、开发环境 Unity版本&#xff1a;Unity 2018.1.6f1 (64-…

人脸识别测温一体机校园部署应用和方案流程介绍

人脸识别测温一体机在实现刷脸应用的同时&#xff0c;根据场景需求提供更多功能的应用。终端设备部署在相同场景不同的位置&#xff0c;可实现不同的应用。那在校园场景&#xff0c;人脸识别测温一体机可以部署在哪些场景位置&#xff1f;方案流程要如何操作&#xff1f; 校园…

双目活体检测:人证核验一体机

一、人证核验一体机产品简介 人证核验一体机是我公司自主研发的一款集人脸识别、二代证读卡采集的多功能一体机。人证核验一体机可读取居民身证芯片中的身份信息&#xff0c;现场自动抓拍采集人脸照片,快速验证人证是否一致&#xff0c;全程自动化&#xff0c;操作过程无需人工…

如何打造一台树莓派一体机

这是一个基于树莓派的一体机项目。项目的目标是以最少的线缆建造一个基于树莓派的计算机系统。我想我已经成功了。注意到有一根电源线从框架伸向左边&#xff0c;它是这个系统唯一一根吊在外面的线缆。 这个项目受到了最近两件事的启发。一个是我的办公室换了新地毯。所有的东西…