用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 ...
随机推荐
- libyuv库的使用
libyuv是Google开源的实现各种YUV与RGB之间相互转换.旋转.缩放的库.它是跨平台的,可在Windows.Linux.Mac.Android等操作系统.x86.x64.arm架构上进行编译 ...
- 当前插入的线段能完整覆盖存在的几条线段 树状数组 HDU 5372 Segment Game
http://acm.hdu.edu.cn/showproblem.php? pid=5372 Segment Game Time Limit: 3000/1500 MS (Java/Others) ...
- android高速上手（二）android开发环境搭建及hello world
基本了解了java语法,下一步.我们一起开启hello world的神奇之旅. (一)android开发环境搭建 之前搭建android开发环境是件很费力的事情,下载Eclipse.安装ADT等,现在 ...
- Codeforces Round #313 (Div. 2)(A,B,C,D)
A题: 题目地址:Currency System in Geraldion 题意:给出n中货币的面值(每种货币有无数张),要求不能表示出的货币的最小值.若全部面值的都能表示,输出-1. 思路:水题,就 ...
- 图像处理中的数学原理具体解释20——主成分变换（PCA）
欢迎关注我的博客专栏"图像处理中的数学原理具体解释" 全文文件夹请见 图像处理中的数学原理具体解释(总纲) http://blog.csdn.net/baimafujinji/ar ...
- java8新特性系列：[1]让你的eclipse支持java8
package com.anhui.jdk8; /** * 针对eclipse是否支持java8小测试 * MainClass * @author zhongzh * */ public class ...
- npm中的 --save-dev
当你为你的模块安装一个依赖模块时,正常情况下你得先安装他们(在模块根目录下npm install module-name),然后连同版本号手动将他们添加到模块配置文件package.json中的依赖里 ...
- My first blog for java
我的第一个java程序: package com.hellojava; /** * @author 沽-名-钓-誉 */ public class HelloJava{ /** * @param 输出 ...
- BZOJ 3910 并查集+线段树合并
思路: 1. 并查集+线段树合并 记得f[LCA]==LCA的时候 f[LCA]=fa[LCA] 2.LCT(并不会写啊...) //By SiriusRen #include <cstdio& ...
- TPL详解、使用
使用时注意点 private async void button5_Click(object sender, EventArgs e) { /* string i1 = await F1Async() ...