经典贪吃蛇小游戏html代码,js实现经典贪吃蛇小游戏
本文实例为大家分享了js实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下
class Map{
constructor(){
this.w = 800;
this.h = 400;
this.c = "#ccc";
this.createEle();
}
createEle(){
this.mapEle = document.createElement("div");
this.mapEle.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.c};margin:0 auto;position:relative;border:solid 10px black;`;
document.body.appendChild(this.mapEle);
}
}
class Food{
constructor(){
this.w = 20;
this.h = 20;
this.c = "red";
this.x = 0;
this.y = 0;
this.createEle();
}
createEle(){
this.foodEle = document.createElement("div");
this.foodEle.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.c};
position:absolute;left:${this.x * this.w}px;top:${this.y * this.h}px;`;
m.mapEle.appendChild(this.foodEle);
}
randomPos(){
this.x = random(0,(m.w-this.w) / this.w);
this.y = random(0,(m.h-this.h) / this.h);
this.foodEle.style.left = this.x * this.w + "px";
this.foodEle.style.top = this.y * this.h + "px";
}
}
class Snake{
constructor(){
this.w = 20;
this.h = 20;
this.body = [{
ele:null,
x:4,
y:3,
c:randomColor()
},{
ele:null,
x:3,
y:3,
c:randomColor()
},{
ele:null,
x:2,
y:3,
c:randomColor()
}];
this.d = "right";
this.createEle();
}
createEle(){
for(var i=0;i
if(!this.body[i].ele){
this.body[i].ele = document.createElement("div");
m.mapEle.appendChild(this.body[i].ele);
}
this.body[i].ele.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.body[i].c};
position:absolute;left:${this.body[i].x * this.w}px;top:${this.body[i].y * this.h}px;`;
}
this.body[0].ele.innerHTML = "0";
setTimeout(()=>{
this.move();
},300);
}
move(){
for(var i=this.body.length-1; i>0; i--){
this.body[i].x = this.body[i-1].x;
this.body[i].y = this.body[i-1].y;
}
switch(this.d){
case "left":
this.body[0].x -= 1;
break;
case "right":
this.body[0].x += 1;
break;
case "top":
this.body[0].y -= 1;
break;
case "bottom":
this.body[0].y += 1;
break;
}
if(this.body[0].x < 0 || this.body[0].y < 0 || this.body[0].x > ((m.w-this.w) / this.w) || this.body[0].y > ((m.h-this.h) / this.h)){
alert("撞墙了");
return;
}
if(this.body[0].x === f.x && this.body[0].y === f.y){
this.body.push({
ele:null,
x:this.body[this.body.length-1].x,
y:this.body[this.body.length-1].y,
c:randomColor()
})
f.randomPos();
}
for(var i=1;i
if(this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y){
alert("撞到自己了");
return;
}
}
this.createEle();
}
direct(type){
switch(type){
case 37:
if(this.d === "right") break;
this.d = "left";
break;
case 38:
if(this.d === "bottom") break;
this.d = "top";
break;
case 39:
if(this.d === "left") break;
this.d = "right";
break;
case 40:
if(this.d === "top") break;
this.d = "bottom";
break;
}
}
}
function random(a,b){
return Math.round(Math.random()*(a-b)+b)
}
function randomColor(){
return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`
}
var m = new Map();
var f = new Food();
f.randomPos();
var s = new Snake();
document.onkeydown = function(eve){
var e = eve || window.event;
var code = e.keyCode || e.which;
s.direct(code);
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
经典贪吃蛇小游戏html代码,js实现经典贪吃蛇小游戏相关推荐
- 连连看html游戏全代码js、jquery操作
连连看html游戏全代码js.jquery操作 运行图片 目录路径 连连看水果方块版.html 连连看算法 进行下一个游戏的开发! 注意事项 我会把html文件.css文件提供下载地址,文件夹路径也展 ...
- 飞机大战html游戏全代码js、jquery操作
飞机大战html游戏全代码 博主的话 运行图片 目录路径 飞机大战.html style.css 进行下一个游戏的开发! 注意事项 博主的话 当时博主只会html,css和原生JavaScript,假 ...
- python 贴吧盖楼_ es6 + canvas 开源 盖楼小游戏 完整代码注释 从零教你做游戏(一)...
盖楼游戏 一个基于 Canvas 的盖楼游戏 Demo 预览 手机设备可以扫描下方二维码 github Game Rule 游戏规则 以下为默认游戏规则,也可参照下节自定义游戏参数 每局游戏生命值为3 ...
- html5制作端午节游戏,零代码怎么制作一个端午节H5小游戏页面?
不光端午节,任何小游戏类型都可以轻松搞定! 六月已经过了三分之一,"粽子节"也马上要到了,每当这时候,又到新媒体运营人和设计师头秃的时刻,在传统的节日里,如何把传统的节日使用互联网 ...
- 弹球游戏python代码含记分模式_python编写弹球游戏的实现代码
用Blender制作一个兵乓球小游戏,要编写Python代码需要安装pygame 包没有面对困难的勇气,也就没有享受快乐的权利. python 怎么写双人弹球游戏最难过的事不是别人又得罪你了,而是你自 ...
- 用C语言写钢琴小程序的代码,用C语言编写钢琴小程序
网上搜索键盘钢琴,可以搜索到不少小游戏,最常玩的就是Flash小游戏,26个按键的 后来想用C语言自己实现一个,没有界面--控制台的.. 原理很简单,先在控制台中获取按键事件,在按键事件中,开一个线程 ...
- 弹球游戏python代码含记分模式_python 实现弹球游戏的示例代码
运行效果 实现代码 # -*- coding: utf-8 -*- import tkinter as tkinter import tkinter.messagebox as mb import r ...
- 小程序开发代码_企业为什么要选择小程序定制开发?
随着小程序红利的爆发,越来越多的商家投身小程序的浪潮中,而现在微信小程序的制作方式有两种,一种是模板小程序开发,另一种是定制小程序开发.随着市场竞争激烈程度的升级和商家开发的个性需求,很多商家更多的是 ...
- python写一个游戏多少代码-Python项目实战之猜数字游戏(含实现代码)
猜数字游戏,旨在提高初学者对 Python 变量类型以及循环结构的使用. 此游戏的游戏规则如下:程序随机内置一个位于一定范围内的数字作为猜测的结果,由用户猜测此数字.用户每猜测一次,由系统提示猜测结果 ...
- android游戏1024代码,castlegame 可简单快速开发android游戏。我总结的教程
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 安装 fpcupdeluxe-i386-win32.exe 先安装这个. fpc 选择 304版本 即stable 版本 lazarus 选择184版本 ...
最新文章
- MATLAB知识点总结
- Windows下更改MySQL数据库的存储位置
- 解读main()方法中的String[] args
- SQL 2005新增的几个函数之学习
- xp与Vista双系统 相关问题
- 合肥工业大学网络程序设计实验报告_【院校推荐】2020合肥工业大学计算机考研备考指导及报考分析...
- 【Python金融量化 10- 100 】十、怎样的收益率预测模型才是好的模型?
- 手游引擎Unity和Cocos各有什么优劣?
- 计算机辅助设计工业产品cad竞赛试题,2017计算机辅助设计(工业产品CAD)赛项样题...
- php 检查语法命令,php语法检查的方法有哪些?(代码示例)
- [翻译].NET framework 4.0并行编程:入门
- 20191204每日一句
- 唐宇迪opencv-背景建模
- 集成editormd支持markdown语法(一)之基本使用
- 计算机玩游戏重启,为什么我的电脑玩游戏的时候会不定时的自动重启?
- 半透明导航栏css代码,纯CSS实现的紫罗兰风格导航条效果代码
- Maven 官网查找依赖包
- 页面级优化——icon图标显示方式
- java求循环节长度
- 游戏网站搭建,不止是一个网站那么简单
热门文章
- 修改IDEA默认运行内存
- Mac 显示隐藏文件夹
- Docker Study Note
- android自定义View 中秋节放个烟花吧~
- 计算机网络操作技师论文,关于计算机操作技师论文计算机操作技师论文:计算机网络技术专业技师培养过程思考.doc...
- Springboot毕设项目M11463家居网9m26y(java+VUE+Mybatis+Maven+Mysql)
- 【译】Ignition:V8解释器
- 一劳永逸:服务器专用的软件防火墙
- 解决cherry pick提交报错问题
- 小白都能学会的Python基础 第一讲:Python初了解