用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 ...
随机推荐
- SecureCRT 会话丢失的处理办法
SecureCRT 会话丢失的处理办法 在SecureCRT中已经有了70多个session,密码都记忆了,当然有些失效的也没有删除: 某一天,打开SecureCRT之后,发现session都没有了, ...
- ruby for in 循环中改变i的值无效
ruby for in 循环中改变i的值无效 for j in 1..5 puts "#{j}hehe" j = j + 2 #break end 在循环中,使用j = j + 2 ...
- 最简单的基于FFmpeg的移动端样例：IOS 推流器
===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...
- pagex，screenx，clientx的差别
screenX:參照物为电脑的屏幕左上角,距离电脑屏幕的水平距离 clientX:參照物是内容区域左上角,距离内容区域左上角的水平距离,会随着滚动栏的移动而移动 pageX:參照物也是内容区域的左上角 ...
- C语言学习笔记：15_c语言中的进制操作.c
/* * 15_c语言中的进制操作.c * * Created on: 2015年7月5日 * Author: zhong */ #include <stdio.h> #include & ...
- Hadoop-2.2.0中文文档——Apache Hadoop 下一代 MapReduce (YARN)
MapReduce在hadoop-0.23中已经经历了一次全然彻底地大修.就是如今我们叫的MapReduce 2.0 (MRv2) or YARN. MRv2的基本思想是把JobTracker分成两个 ...
- Java：笔记-1
ylbtech-Java:笔记-1 1.返回顶部 1. /** * 简介请求 * @return */ @RequestMapping("/JJ") public String j ...
- Spring配置之OpenSessionInViewFilter
转自:https://www.cnblogs.com/blogonfly/articles/3991782.html 参考: OpenSessionInViewFilter作用及配置:http://w ...
- kindoreditor上传图片
<!doctype html><html> <head> <meta charset="utf-8" /> <title> ...
- 【BZOJ2806】【CTSC2012】Cheat 广义后缀自动机+二分+Dp
题目 题目在这里 思路&做法 我们先对标准作文库建广义后缀自动机. 然后对于每一篇阿米巴的作文, 我们首先把放到广义后缀自动机跑一遍, 对于每一个位置, 记录公共子串的长度\((\)即代码和下 ...