用Js写贪吃蛇
使用Javascript做贪吃蛇小游戏,
1.自定义地图宽高,蛇的初始速度
2.食物随机出现
3.蛇的样式属性
4.贪吃蛇玩法(吃食物,碰到边界,吃食物后加速,计分,)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<input type="text" id="fen" value="0" disabled> <script type="text/javascript">
var kuang = parseInt(prompt("请输入地图宽度"));
var gao = parseInt(prompt("请输入地图高度"));
var sudu = parseInt(prompt("请输入蛇的速度(越大越慢)"));
//创建地图
function Map(){
//属性
this.width = kuang;
this.height = gao;
this.backgroundColor = 'gray';
this.ditu = null;
//方法
if (!Map.prototype.show) {
Map.prototype.show = function(){
//创建div
var div = document.createElement('div');
//设置样式
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.backgroundColor = this.backgroundColor;
//显示在页面
document.body.appendChild(div);
//将地图div 保存到地图对象的属性上
this.ditu = div;
}
}
}
var map = new Map();
map.show();
//创建食物
function Food(map){
//属性
this.width = 20;
this.height = 20;
this.backgroundColor = 'yellow';
this.x = 0;
this.y = 0;
this.position = 'absolute';
this.borderRadius = '50%';
this.shiwu = null;
//方法
if(!Food.prototype.show){
Food.prototype.show = function(){
//判断，显示，刷新
if(!this.shiwu){
//创建div
var div = document.createElement('div');
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.backgroundColor = this.backgroundColor;
div.style.borderRadius = this.borderRadius; div.style.position = this.position;
//显示到界面
map.ditu.appendChild(div);
this.shiwu = div;
}
//位置
//横/纵坐标 = 0~30随机数 * 地图宽/食物宽（食物宽20）
this.x = Math.floor(Math.random() * (map.width / this.width));
this.y = Math.floor(Math.random() * (map.height / this.height));
//根据坐标，显示食物位置
this.shiwu.style.left = this.x * this.width + 'px';
this.shiwu.style.top = this.y * this.height + 'px';
}
}
} //输出
var food = new Food(map);
food.show();
//创建蛇
function Snake(){
//属性
this.width = 20;
this.height = 20;
this.position = 'absolute';
this.direction = 'right';
this.borderRadius = '50%';
//是否可以改变方向
this.canChange = false;
//身体
//[[x, y, 颜色, div]] this.body = [[5, 5, 'red', null], [4, 5, 'blue', null], [3, 5, 'blue', null]];
//方法
//判断，显示，移动
if(!Snake.prototype.show){
Snake.prototype.show = function(){
//创建每节身体div
for (var i = 0; i < this.body.length; i++) {
//每节身体,判断是否创建过
if (!this.body[i][3]) {
//公共样式
var div =document.createElement('div');
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.position = this.position;
//显示
map.ditu.appendChild(div);
this.body[i][3] = div;
}
//不同样式
this.body[i][3].style.backgroundColor = this.body[i][2];
this.body[i][3].style.left = this.body[i][0] * this.width + 'px';
this.body[i][3].style.top = this.body[i][1] * this.height+ 'px';
this.body[i][3].style.borderRadius = '5px';
this.body[0][3].style.borderRadius = this.borderRadius;
}
//显示完成，可以修改方向
this.canChange = true;
}
//移动
//最后一节坐标变成前一节坐标
Snake.prototype.move = function(){
//循环,修改每节坐标
for (var i = this.body.length - 1; i > 0; i--) {
//x = x-1 y = y-1
this.body[i][0] = this.body[i-1][0];
this.body[i][1] = this.body[i-1][1];
}
//蛇头控制方向
if (this.direction == 'right') {
//x + 1
this.body[0][0] += 1;
}else if(this.direction == 'left') {
//x - 1
this.body[0][0] -= 1;
}else if(this.direction == 'up') {
//y - 1
this.body[0][1] -= 1;
}else if(this.direction == 'down') {
//y + 1
this.body[0][1] += 1;
}
//判断边界
if (this.body[0][0] < 0 || this.body[0][0] > (map.width / this.width) - 1 || this.body[0][1] < 0 || this.body[0][1] > (map.height / this.height) - 1) {
//游戏结束
clearInterval(timer);
alert('游戏结束');
return;
}
//判断 蛇头和其他身体坐标重合
for (var i = 1; i < this.body.length; i++) {
if (this.body[0][0] == this.body[i][0] && this.body[0][1] == this.body[i][1]) {
//重合，停止
clearInterval(timer);
alert('游戏结束');
return;
}
}
//重新显示
this.show();
//判断 是否吃到食物 蛇头坐标和食物坐标一样
if (this.body[0][0] == food.x && this.body[0][1] == food.y) {
//分数
var score = document.getElementById('fen');
var sc = parseInt(score.value)+1;
score.value = sc;
//吃到 this.body加长一节
this.body[this.body.length] = [0, 0, 'blue', null];
//食物刷新
food.show();
//吃到食物，加速
if(t>150){
t -= 10;
setTimer();
}
}
} }
}
//输出蛇
var snake = new Snake;
snake.show(); //绑定键盘
window.onkeyup = function(e){
var evt = e || window.event;
if (!snake.canChange) {
return;
}
//左 37 上 38 右 39 下 40
if (e.keyCode == 37 && snake.direction != 'right') {
snake.direction = 'left'
}else if(e.keyCode == 38 && snake.direction != 'down') {
snake.direction = 'up'
}else if(e.keyCode == 39 && snake.direction != 'left') {
snake.direction = 'right'
}else if(e.keyCode == 40 && snake.direction != 'up') {
snake.direction = 'down'
}
snake.canChange =false; }; //定时器 自动移动
var t = sudu;
var timer;
function setTimer(){
//先停止
clearInterval(timer);
//重新设置
timer = setInterval(function(){
snake.move();
}, t);
}
setTimer(); </script>
</body>
</html>
用Js写贪吃蛇的更多相关文章
- 用python+pygame写贪吃蛇小游戏
因为python语法简单好上手,前两天在想能不能用python写个小游戏出来,就上网搜了一下发现了pygame这个写2D游戏的库.了解了两天再参考了一些资料就开始写贪吃蛇这个小游戏. 毕竟最开始的练手 ...
- js版贪吃蛇
之前没有写博客的习惯,这是我的第一个博客,有些的不好的地方,希望大家多多提意见 js版的贪吃蛇相对比较简单,废话不多说直接上代码,有需要注意的地方我会标红,github源码地址https://gith ...
- 前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...
- 用原生Canvas写贪吃蛇及问题解决
为了学习Canvas,写了这个小游戏贪吃蛇供自己和大家学习 Github: https://github.com/zhiyishou/Gsnake Play On: http://zhiyishou. ...
- JS仿贪吃蛇：一串跟着鼠标的Div
贪吃蛇是一款80后.90后比较熟悉的经典游戏,下面通过简单的JS代码来实现低仿版贪吃蛇效果:随着鼠标的移动,在页面中呈现所有Div块跟随鼠标依次移动,效果如下图所示. <!DOCTYPE htm ...
- C语言用面向对象的思想写贪吃蛇
大概一年前这时候,接触C语言一个月,那时候知之甚少,对面向对象只觉”可远观而不可亵玩“,而且会看到很多言论说C语言就是面向过程的语言,C++就是面向对象的语言.不过,不记得什么时候在网上看到过一篇博文 ...
- pygame写贪吃蛇
python小白尝试写游戏.. 学了点pygame不知道那什么练手好,先拿贪吃蛇开刀吧. 一个游戏可以粗略的分为两个部分: 数据(变量) 处理数据(函数,方法) 设计变量 首先预想下,画面的那些部分需 ...
- 原生JS制作贪吃蛇小游戏
感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...
- 一步步教你怎么用python写贪吃蛇游戏
目录 0 引言 1 环境 2 需求分析 3 代码实现 4 后记 0 引言 前几天,星球有人提到贪吃蛇,一下子就勾起了我的兴趣,毕竟在那个Nokia称霸的年代,这款游戏可是经典中的经典啊!而用Pytho ...
随机推荐
- ORM进阶：Hibernate框架搭建及开发
本节将開始.使用hibernate搭建持久层.当然在决定用不用之前,还请斟酌一下是否使用.了解一下Hibernate的优缺点. Hibernate优劣对照 Hibernate是一个持久的ORM框架.首 ...
- Zookeeper体系结构
上面我们已经讨论了zookeeper在应用程序中的一些操作,以下我们须要理解一下服务端的工作的原理.client是怎样通过一个client的类库与服务端进行通信的,然后服务端又是怎样回应client的 ...
- Visio的安装教程
1.下载地址:https://msdn.itellyou.cn/ 2.输入关键字:Visio,选择想要下载的版本,展开详细信息,并复制 3.(我下载的13) ed2k://|file|cn_visio ...
- adb命令--之查看进程及Kill进程
adb shell kill [PID] //杀死进程 adb 命令查看程序进程方便简洁高效 adb shell ps //查看所有进程列表,Process Status ad ...
- 2018亚洲区预选赛北京赛站网络赛 D.80 Days 尺取
题面 题意:你带着K元要去n个城市,这n个城市是环形的,你可以选择任意一个起点,然后顺时针走,对于每个城市,到达时可以获得a元,但是从这里离开又需要花费b元,问你能否找到一个起点(输出花钱最少的那个) ...
- POJ3414 Pots
题目: 给你两个容器,分别能装下A升水和B升水,并且可以进行以下操作 FILL(i) 将第i个容器从水龙头里装满(1 ≤ i ≤ 2); DROP(i) 将第i个容器抽干 ...
- element-ui 分页中的slot的用法(自定义分页显示内容)
官方给的简单的例子以及效果. 最后弄成的效果: 按照文档在layout 添加slot, 这几个参数可以随意调换位置,然后分页显示效果会根据调换的位置显示相应内容.
- Codeforces Round #447
QAQ #include<stdio.h> #include<string.h> #include<stdlib.h> #include<vector> ...
- List 常用方法解析
1.Count属性 (获得List中元素数目) 2.Add( ) 在List中添加一个对象的公有方法 3.AddRange( ) 公有方法,在List尾部添加实现了ICollection接口的多个元素 ...
- PHP入门及服务环境配置（Nginx+PHP）
PHP入门及服务环境配置(Nginx+PHP) PHP入门 PHP维基百科: PHP(全称:PHP:Hypertext Preprocessor,即"PHP:超文本预处理器")是一 ...