js实现贪吃蛇游戏含注释
作者:越学越害怕 发布时间:2024-04-19 10:05:44
标签:js,贪吃蛇
本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下
两个小时完成的,有点简陋。
直接看效果。打开调试面板,在resource面板,新建snippet
粘贴以下代码,右键snippet,run。
clearInterval(timer);
document.body.innerHTML = "";
//每秒移动多少格
let speed = 10;
let speedUpMul = 3;
//是否能穿墙
let isThroughTheWall = true;
//行数
let row = 40;
let headColor = 'red';
let bodyColor = 'green';
let foodColor = 'yellow';
let borderColor = 'grey';
// 游戏全局变量
let hasFood = false;
//游戏状态
let gamestaus = 'start';
let hasAccelerate = false;
let mainContainer = document.createElement("div");
mainContainer.style.width = 20 * row + 1 + "px";
mainContainer.style.height = 20 * row + 1 + "px";
mainContainer.style.margin = "0 auto";
mainContainer.style.position = "relative";
mainContainer.style.border = "1px solid " + borderColor;
document.body.appendChild(mainContainer);
for(let i = 0;i<row;i++){
let marginTop = 20 * i + "px";
for(let j = 0;j<row;j++){
let marginLeft = j * 20 + "px";
let tempDiv = document.createElement('div');
tempDiv.style.width = "19px";
tempDiv.style.height = "19px";
tempDiv.style.marginTop = marginTop;
tempDiv.style.marginLeft = marginLeft;
tempDiv.style.border = "0.5px solid " + borderColor;
tempDiv.style.position = "absolute";
tempDiv.id = j + "div" + i;
mainContainer.appendChild(tempDiv);
}
}
class Cell{
constructor(x, y, color){
if(isThroughTheWall){
if(x < 0) x = row-1;
if(x > row - 1) x = 0;
if(y < 0) y = row - 1;
if(y > row - 1) y = 0;
}else{
if(x < 0 || y < 0|| x > row - 1 || y > row - 1){
clearInterval(timer);
alert('游戏结束');
return;
}
}
this.x = x;
this.y = y;
this.color = color;
let tempDiv = document.getElementById(x + 'div' + y);
if(tempDiv) tempDiv.style.backgroundColor = color;
}
}
snake = {
head : {},
body : [],
dire : 1
}
let headx = Math.floor(Math.random() * 14) + 3;
let heady = Math.floor(Math.random() * 14) + 3;
snake.head = new Cell(headx, heady, headColor);
//上右下左
let direction = [1, 2, 3, 4]
snake.dire = direction[Math.floor(Math.random() * 4)];
if(snake.dire == 1){
snake.body.push(new Cell(snake.head.x, snake.head.y+1, bodyColor));
snake.body.push(new Cell(snake.head.x, snake.head.y+2, bodyColor));
snake.body.push(new Cell(snake.head.x, snake.head.y+3, bodyColor));
}
if(snake.dire == 2){
snake.body.push(new Cell(snake.head.x-1, snake.head.y, bodyColor));
snake.body.push(new Cell(snake.head.x-2, snake.head.y, bodyColor));
snake.body.push(new Cell(snake.head.x-3, snake.head.y, bodyColor));
}
if(snake.dire == 3){
snake.body.push(new Cell(snake.head.x, snake.head.y-1, bodyColor));
snake.body.push(new Cell(snake.head.x, snake.head.y-2, bodyColor));
snake.body.push(new Cell(snake.head.x, snake.head.y-3, bodyColor));
}
if(snake.dire == 4){
snake.body.push(new Cell(snake.head.x+1, snake.head.y, bodyColor));
snake.body.push(new Cell(snake.head.x+2, snake.head.y, bodyColor));
snake.body.push(new Cell(snake.head.x+3, snake.head.y, bodyColor));
}
function game(){
if(gamestaus == 'pause'){
return;
}
if(gamestaus == 'gameover'){
clearInterval(timer);
alert('游戏结束');
return;
}
initFood();
let snakeHeadX = snake.head.x;
let snakeHeadY = snake.head.y;
let color = '';
if(snake.dire == 1){
let tempDiv = document.getElementById(snakeHeadX + 'div' + (snakeHeadY-1));
if(tempDiv) color = tempDiv.style.backgroundColor;
snake.head = new Cell(snakeHeadX, snakeHeadY - 1, headColor);
}
if(snake.dire == 2){
let tempDiv = document.getElementById((snakeHeadX + 1) + 'div' + snakeHeadY);
if(tempDiv) color = tempDiv.style.backgroundColor;
snake.head = new Cell(snakeHeadX + 1, snakeHeadY, headColor);
}
if(snake.dire == 3){
let tempDiv = document.getElementById(snakeHeadX + 'div' + (snakeHeadY+1));
if(tempDiv) color = tempDiv.style.backgroundColor;
snake.head = new Cell(snakeHeadX, snakeHeadY + 1, headColor);
}
if(snake.dire == 4){
let tempDiv = document.getElementById((snakeHeadX - 1) + 'div' + snakeHeadY);
if(tempDiv) color = tempDiv.style.backgroundColor;
snake.head = new Cell(snakeHeadX - 1, snakeHeadY, headColor);
}
snake.body.unshift(new Cell(snakeHeadX, snakeHeadY, bodyColor));
if(color && color == foodColor){
hasFood = false;
initFood();
}else if(color && color == bodyColor){
gamestaus = 'gameover';
}else{
let lastBody = snake.body.pop();
new Cell(lastBody.x, lastBody.y, '');
}
}
var timer = setInterval(game, 10 / speed * 100)
/**
* 初始化食物
*/
function initFood(){
while(!hasFood){
let x = Math.floor(Math.random() * row);
let y = Math.floor(Math.random() * row);
let snakeBody = snake.body;
let enable = true;
if(snake.head.x == x && snake.head.y == y){
enable = false;
}
for(sBody of snakeBody){
if(sBody.x == x && sBody.y == y){
enable = false;
break;
}
}
if(enable){
new Cell(x, y, foodColor);
hasFood = true;
}
}
}
document.onkeydown = function(e){
if(e.keyCode == 38){
//上
if(snake.dire != 3 && snake.dire != 1){
snake.dire = 1;
}else if(snake.dire == 1){
if(!hasAccelerate){
clearInterval(timer);
hasAccelerate = true;
speed = speed * speedUpMul;
timer = setInterval(game, 10 / speed * 100)
}
}
}
if(e.keyCode == 39){
//右
if(snake.dire != 4 && snake.dire != 2){
snake.dire = 2;
}else if(snake.dire == 2){
if(!hasAccelerate){
clearInterval(timer);
hasAccelerate = true;
speed = speed * speedUpMul;
timer = setInterval(game, 10 / speed * 100)
}
}
}
if(e.keyCode == 40){
//下
if(snake.dire != 1 && snake.dire != 3){
snake.dire = 3;
}else if(snake.dire == 3){
if(!hasAccelerate){
clearInterval(timer);
hasAccelerate = true;
speed = speed * speedUpMul;
timer = setInterval(game, 10 / speed * 100)
}
}
}
if(e.keyCode == 37){
//左
if(snake.dire != 2 && snake.dire != 4){
snake.dire = 4;
}else if(snake.dire == 4){
if(!hasAccelerate){
clearInterval(timer);
hasAccelerate = true;
speed = speed * speedUpMul;
timer = setInterval(game, 10 / speed * 100)
}
}
}
//空格键暂停
if(e.keyCode == 32){
if(gamestaus == 'start'){
gamestaus = 'pause';
}else if(gamestaus == 'pause'){
gamestaus = 'start';
}
}
}
document.onkeyup = function(e){
if(e.keyCode == 38){
//上
if(snake.dire == 1 && hasAccelerate){
clearInterval(timer);
hasAccelerate = false;
speed = speed / speedUpMul;
timer = setInterval(game, 10 / speed * 100)
}
}
if(e.keyCode == 39){
//右
if(snake.dire == 2 && hasAccelerate){
clearInterval(timer);
hasAccelerate = false;
speed = speed / speedUpMul;
timer = setInterval(game, 10 / speed * 100)
}
}
if(e.keyCode == 40){
//下
if(snake.dire == 3 && hasAccelerate){
clearInterval(timer);
hasAccelerate = false;
speed = speed / speedUpMul;
timer = setInterval(game, 10 / speed * 100)
}
}
if(e.keyCode == 37){
//左
if(snake.dire == 4 && hasAccelerate){
clearInterval(timer);
hasAccelerate = false;
speed = speed / speedUpMul;
timer = setInterval(game, 10 / speed * 100)
}
}
}
来源:https://blog.csdn.net/weixin_42525191/article/details/114670004
0
投稿
猜你喜欢
- #!/usr/bin/env python3# -*- coding: utf-8 -*-# File Name : gt1.py# Pur
- 一般在Django的视图函数中使用request.POST来获取请求体,request.POST是QueryDict类,通常作为dict来使
- 一、ts文件的由来ts文件,ts即"Transport Stream"的缩写,特点就是要求从视频流的任一片段开始都是可以
- 目录一、装饰器使用场景二、为什么需要装饰器1、先来看一个简单例子:2、增加需求3、又有需求三、基础装饰器入门1、装饰器语法糖2、对带参数的函
- 前言在深度学习训练的过程中,随着网络层数的提升,我们训练的次数,参数都会提高,训练时间相应就会增加,我们今天来了解迁移学习一、经典的卷积神经
- 本文实例讲述了Python tkinter模块弹出窗口及传值回到主窗口操作。分享给大家供大家参考,具体如下:有些时候,我们需要使用弹出窗口,
- 微信应用号(微信公众平台小程序,「应用号」的新称呼)终于来了!开源中国社区的博卡君通宵吐血赶稿写出的微信公众平台应用号开发教程!大家赶紧来学
- 函数input()的工作原理函数input()让程序暂停运行,等待用户输入一些文本。获取用户输入后,Python将其存储在一个变量中,以方便
- 一、pymysql的下载和使用之前我们都是通过MySQL自带的命令行客户端工具mysql来操作数据库,那如何在python程序中操作数据库呢
- 首先我们先引入requests模块import requests一、发送请求r = requests.get('https://ap
- 我就废话不多说了,大家还是直接看代码吧!import cv2# 读取图片并缩放方便显示img = cv2.imread('D:/6.
- // 1.采用计算属性来获取$store中的值computed: { listenstage() {
- python正则模块re中findall和finditer两者相似,但却有很大区别。 两者都可以获取所有的匹配结果,这和searc
- .Net新手通常容易把属性(Property)跟特性(Attribute)搞混,其实这是两种不同的东西属性指的类中封装的数据字段;而特性是对
- 本人曾经用过的备份方式有:mysqldump、mysqlhotcopy、BACKUP TABLE 、SELECT INTO OUTFILE,
- 数据结构树简介一、树简介树(Tree)是一种抽象的数据结构,是一个数据的集合,集合中的数据组成了一个树状结构。例如上图,看起来像一棵倒挂的树
- Anaconda是Python的一个开源发行版本,主要面向科学计算,预装了丰富强大的库。使用Anaconda可以轻松管理多个版本的Pytho
- 本文实例讲述了Python 网络编程之TCP客户端/服务端功能。分享给大家供大家参考,具体如下:demo.py(TCP客户端):import
- 1、说明PyG2Plot 原理其实非常简单,其中借鉴了 pyecharts 的实现,但是因为蚂蚁金服的 G2Plot 完全基于可视分析理论的
- vue-cli使用stimulsoft.reports.js(保姆级教程)第一部分:数据源准备以下是JSON数据的教程json数据结构{&q