html与js简单小游戏,JS实现简单贪吃蛇小游戏
本文实例为大家分享了JS实现简单贪吃蛇游戏的具体代码,供大家参考,具体内容如下
1、使用语言 HTML+CSS+JavaScript
2、使用工具 visual studio code
3、GitHub项目地址:贪吃蛇
4、项目运行截图:
5、项目功能分析:主要使用数组来存储蛇的位置,地图和蛇都是一个二维数组,对于有蛇的地方,地图的CSS就会发生改变,同时添加了添加了一个音乐播放按钮,通过CSS动画实现旋转。
6、项目代码:(项目代码有详细的注释)
snake.html
eatSnake
*{
margin:0;
padding:0;
border: 0px;
}
body{
background: #444;
}
table{
border-collapse:collapse;
overflow: hidden;
border:1px solid #ddd;
margin:10px auto 10px auto;
}
td{
display: table-cell;
width:20px;
height:20px;
background: #fff;
border:1px #eeeeee solid;
}
.snake{
background: #3388ee;
}
.notsnake{
background: #fff;
}
.food{
background: #33aa33;
}
.snake_head{
background: #dd4444;
}
.notice{
width:450px;
text-align: center;
margin:50px auto;
color:#fff;
font-size: 14px;
}
提示:空格键控制开始/ 暂停,方向键控制蛇的移动方向,F5刷新
snake.js
/*
* @Author: CSU_XZY
* @Date: 2020-10-17 12:38:26
* @LastEditors: CSU_XZY
* @LastEditTime: 2020-10-18 22:40:24
* @FilePath: \第二天\snake\snake.js
* @Description: just to play
*/
window.onload = function(){
var snake = function(width,height,snakeId,speed){
this.width = width || 10;
this.height = height || 10;
this.snakeId = snakeId || "snake";
this.goX = 0;
this.goY = 0;
this.speed = this.oldSpeed = speed || 10;
this.Grid = []; //存放td的二维数组
this.snakeGrid = []; //存放蛇的数组
this.foodGrid = [];
this.snakeTimer = null;
this.derectkey = 39;
this.stop = true;
this.init();
document.getElementById("myAudio").play();
box.style.animationPlayState = 'running'
}
snake.prototype = {
//创建二维数组
multiArray : function(m , n)
{
var array = new Array(m); //长
for(let i = 0; i < m; i++)
{
array[i] = new Array(n); //宽
}
return array;
},
//函数修正this
bind : function(fn,context)
{
return function(){
return fn.apply(context,arguments);
}
},
//移动的主函数
move:function(){
var _this = this;
if(_this.snakeTimer){clearInterval(_this.snakeTimer);}
_this.snakeTimer = setInterval(_this.bind(_this.main,_this),Math.floor(3000/this.speed));
},
//重来
reset()
{
this.goX = 0;
this.goY = 0;
this.speed = this.oldSpeed;
this.derectkey = 39;
this.stop = true;
this.init();
},
//确定键盘事件
keyDown : function(e)
{
var e = e || window.event;
var keycode = e?e.keyCode:0;
if(keycode == 116 )
window.location.reload();
if(keycode == 32)
{
if(this.stop)
{
this.move();
this.stop = false;
}
else{
if(this.snakeTimer)
clearInterval(this.snakeTimer);
this.stop = true;
}
}
if(keycode>=37 && keycode <= 40)
{
if(!this.stop)
this.derectkey = keycode;
}
return false;
},
//创建地图
creatMap : function()
{
var table = document.createElement("table");
var tbody = document.createElement("tbody");
for(let i = 0; i < this.width; i++)
{
var tr = document.createElement("tr");
for(let j = 0; j < this.height; j++)
{
var td = document.createElement("td");
this.Grid[i][j] = tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
table.id = this.snakeId;
document.body.appendChild(table);
},
//产生随机点
randomPoint : function(initX,initY,endX,endY)
{
var p = []; //用来存放产生的随机点的数组
var initX = initX || 0;
var initY = initY || 0;
var endX = endX || this.width;
var endY = endY || this.height;
p[0] = Math.floor(Math.random()*(endX - initX)) + Math.floor(initX);
p[1] = Math.floor(Math.random()*(endY - initY)) + Math.floor(initY)
return p;
},
//初始化食物的位置
initFood : function()
{
this.foodGrid = this.randomPoint();
if(this.isInSnake(this.foodGrid))
{
this.initFood();
return false;
}
this.Grid[this.foodGrid[0]][this.foodGrid[1]].className = "food";
},
//判断点是否在蛇身上
isInSnake : function(point,pos)
{
var snakeGrid = this.snakeGrid;
if(point instanceof Array)
{
let n = snakeGrid.length;
for(let i = pos || 0; i < n; i++)
{
if(point[0] == snakeGrid[i][0] && point[1] == snakeGrid[i][1])
return true;
}
}
return false;
},
//给蛇涂颜色
paintSnake : function(){
var snakeGrid = this.snakeGrid;
for(let i = 0; i < snakeGrid.length; i++)
{
this.Grid[snakeGrid[i][0]][snakeGrid[i][1]].className = "snake_body";
}
},
//初始化蛇的位置
initSnake : function()
{
this.snakeGrid = [];
this.snakeGrid.push([1,3]);
this.snakeGrid.push([1,2]);
this.snakeGrid.push([1,1]);
this.paintSnake();
this.Grid[this.snakeGrid[0][0]][this.snakeGrid[0][1]].className = "snake_head";
this.Grid[this.snakeGrid[this.snakeGrid.length-1][0]][this.snakeGrid[this.snakeGrid.length-1][1]].className = "snake_tail";
},
//判断蛇是否撞墙
isInWall : function(point){
if(point instanceof Array){
if(point[0] < 0 || point[0] > this.width1 - 1 || point[1] < 0 || point[1] > this.height - 1)
return true;
}
return false;
},
//初始化条件
//控制函数运行的主函数
main : function(){
var snakeGrid = this.snakeGrid;
var temp = snakeGrid[snakeGrid.length-1],
isEnd = false;
headX = snakeGrid[0][0];
headY = snakeGrid[0][1];
msg = "";
switch(this.derectkey)
{
case 37:
if(this.goY!=1){this.goY=-1;this.goX=0} //防止控制蛇往相反反方向走
break;
case 38:
if(this.goX!=1){this.goX=-1;this.goY=0}
break;
case 39:
if(this.goY!=-1){this.goY=1;this.goX=0}
break;
case 40:
if(this.goX!=-1){this.goX=1;this.goY=0}
}
headX += this.goX;
headY += this.goY;
if(headX == this.foodGrid[0] && headY == this.foodGrid[1])
{
this.snakeGrid.unshift(this.foodGrid);
this.initFood();
if(this.snakeGrid.length>4){ //控制蛇加速
if(this.snakeGrid.length==5){
this.speed += 5;
}
else if(this.snakeGrid.length==10){
this.speed += 3;
}
else if(this.snakeGrid.length==20){
this.speed += 3;
}
else if(this.snakeGrid.length==30){
this.speed += 3;
}
this.move();
}
}
else
{
for(var i=this.snakeGrid.length-1;i>0;i--){
this.snakeGrid[i] = this.snakeGrid[i-1] ;
}
this.snakeGrid[0] = [headX,headY];
if(this.isInSnake(this.snakeGrid[0],1)){
isEnd=true;
msg = "哈皮,吃到自己啦!!";
}
//判断是否撞墙
else if(this.isInWall(this.snakeGrid[0])){
isEnd =true;
msg = "撒比伟哥,撞墙了!!";
}
if(isEnd)
{
if(this.snakeTimer)
clearInterval(this.snakeTimer);
var score;
let len = this.snakeGrid.length;
if(len <= 5)
score = len-3;
else if(len>5 && len<=10)
{
score = 2 + 2*(len-5)
}
else if(len>10 && len <= 20)
score = 12 + 3*(len-10);
else
score = 27 + 5*(len - 15);
if(confirm(msg+"你的分数是:"+score+"! 是否重新开始?")){
this.reset();
}
return false;
}
this.Grid[temp[0]][temp[1]].className = "notSnake";
}
this.paintSnake();
this.Grid[headX][headY].className = "snake_head";
this.Grid[this.snakeGrid[this.snakeGrid.length-1][0]][this.snakeGrid[this.snakeGrid.length-1][1]].className = "snake_tail";
},
init : function(){
var _this = this;
snake_id = document.getElementById(_this.snakeId)||0 ;
if(snake_id){
document.body.removeChild(snake_id);
}
_this.Grid = _this.multiArray(_this.width,_this.height);
_this.creatMap();
_this.initSnake();
_this.initFood();
document.onkeydown = _this.bind(_this.keyDown,_this);
}
}
new snake(20,20,"snake",10);
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html与js简单小游戏,JS实现简单贪吃蛇小游戏相关推荐
- 贪吃蛇小游戏代码html,自制贪吃蛇小游戏代码
package game; import java.awt.*; import java.awt.event.*; import javax.swing.*; public class Game_St ...
- html5实现贪吃蛇小游戏,H5 canvas实现贪吃蛇小游戏
本文介绍了h5 canvas实现贪吃蛇小游戏,分享给大家,具体如下: 实现效果如下 实现思路: ps:这个只是思路,详细可看代码注释 一.先把蛇画出来 定义一下蛇的结构,用一个数组保存一堆矩形,包含蛇 ...
- java小游戏代码压缩包_java 贪吃蛇小游戏 源码下载
[实例简介] 使用java程序设计语言制作的一个贪吃蛇小游戏.游戏的控制模块应该做到易懂.易操作,以给玩家一个很好的游戏环境.在这个游戏的设计中,牵涉到图形界面的显示与更新.数据的收集与更新,还要应用 ...
- 基于Stm32f407 的贪吃蛇小游戏【正点原子-探索者开发板】
基于单片机stm32f407的单机小游戏----贪吃蛇小游戏 1.介绍 这是我花一个星期完成的一个简单地单机贪吃蛇小游戏项目,芯片是stm32f407,项目是基于正点原子-探索者开发板完成的,有需要的 ...
- Linux编程 --- 贪吃蛇小游戏
如何使用ncurse #include <curses.h>int main() {initscr();//ncurse 界面的初始化函数printw("This is curs ...
- 用JS实现贪吃蛇小游戏
疫情期间呆在家里无聊,于是深入学习了一下JS.自己也模仿写一个贪吃蛇的小游戏,本人刚接触JS不久如有错误,望评论区指出. 因为一般贪吃蛇游戏中的CSS样式较为简单,所以这里主要讲一下JS的写法. 食物 ...
- Snake贪吃蛇小游戏纯js代码
Snake贪吃蛇小游戏纯js代码 先给个效果图,一样的简单而又纯朴,回归贪吃蛇最原始的状态 还是先分析一下,使用面向对象编程真的降低了编程的难度(只要前期把思路想好,各个类,属性,方法抽象出来),就真 ...
- JS贪吃蛇小游戏(DOM (html+css+js))
游戏截图: html部分: <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
- python编程小游戏-10分钟用Python编写一个贪吃蛇小游戏,简单
贪吃蛇,大家应该都玩过.小编当初第一次接触贪吃蛇的时候 ,还是能砸核桃的诺基亚上,当时玩的不亦乐乎.今天,我们用Python编程一个贪吃蛇游戏,下面我们先看看效果: 好了,先介绍一个思路 所有的游戏最 ...
- 基于C语言Ncurse库和链表的简单贪吃蛇小游戏
参考:基于C语言Ncurse库和链表的简单贪吃蛇小游戏 作者:三速何时sub20 发布时间:2020-09-29 10:23:51 网址:https://blog.csdn.net/weixin_44 ...
最新文章
- mysql 联合索引长度_MySQL 中索引的长度的限制
- uikit框架开发前期配置及定制主题方法。
- 李俊君信电保研面试发言稿及其分析总结
- mysql5.5在windows7下编译的详细步骤_Windows7下编译MySQL5.5的详细步骤
- 炉石android更新日志,炉石传说每逢更新必卡门,安卓用户你们想哭了吗?
- go设置后端启动_Go语言基础(十四)
- VelocityTracker笔记
- myd导入mysql_数据库是.frm,.myd,myi备份如何导入mysql
- 百度地图API详解之公交路线规划
- 运维工程师从月薪 5K 到 50K,中间都经历了什么?
- QT练习samp2_2_test——用按钮编辑文本框特性
- Ubuntu 更换阿里云软件源
- vue 高德地图标记_vue-element-admin 引入高德地图并做海量点标记
- Flink 最佳实践之使用 Canal 同步 MySQL 数据至 TiDB
- 二叉树中已知前序和中序求其后序(图解加技巧让你轻松掌握)
- 虚拟环境中安装requirement安装包出现错误ERROR: Could not open requirements file: [Errno 2] No such file or director
- Java分割字符串(spilt())
- 中台战略-读书笔记5
- 计算机毕业设计ssm企业部门报销管理g9d62系统+程序+源码+lw+远程部署
- 欧姆龙CJ2M 与海利普变频器通讯 协议宏方式 欧姆龙通讯模块协议宏 功能:通过触摸屏进行启停和点动,频率设定,加减速时间,点动频率设定