用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 ...
随机推荐
- 关于DM8168中移植算法速度慢、效率低的新发现
有不少的朋友,特别是刚刚接触DSP的朋友.基于DVRRDK编写C代码发现执行速度特别慢,我在上面简单的对每一个像素的UV分量赋值=0x80,这样就成了灰度图像.对1080P图像进行操作,发现处理每帧要 ...
- 去掉文本框前后的空格（JS+JQuery）
表单验证时,需要去除文本框前后的空格才可以正确通过验证.以前看到过一句话:任何设计和代码都要对用户足够宽容. <input type="text" class="p ...
- PHP统计所有字符在字符串中出现的次数
<?php //统计字符串中出现的字符,出现次数 echo '<pre>'; $str = 'aaabbccqqwweedfghhjffffffffggggggggg';//字符串示 ...
- ubuntu下创建第一个rails应用程序
一.创建一个新的应用程序 在控制台输入 > rails new demo create create README.rdoc create Rakefile create config.ru ...
- poj--3624--Charm Bracelet（动态规划 水题）
Home Problem Status Contest Add Contest Statistic LOGOUT playboy307 UPDATE POJ - 3624 Charm Bracelet ...
- winfrom控件——基本工具
窗体事件:属性—事件—load(双击添加) 窗体加载完之后的事件: 删除事件:先将属性事件里挂号的事件名删掉(行为里的load)再删后台代码里的事件. 控件:工具箱里(搜索—双击或点击拖动到窗体界面) ...
- Android之Action Bar
Action Bar在实际应用中,很好地为用户提供了导航,窗口位置标识,操作点击等功能.它出现于Android3.0(API 11)之后的版本中,在2.1之后的版本中也可以使用. 添加与隐藏Actio ...
- 多线程之HttpClient
在程序用调用 Http 接口.请求 http 资源.编写 http 爬虫等的时候都需要在程序集中进行 Http 请求. 很多人习惯的 WebClient.HttpWebRequest 在 TPL 下很 ...
- lua类实现
_Account = {} --创建一张借记卡 function _Account:new( tb ) local _Tb = tb or {} setmetatable(_Tb, self) sel ...
- 全能VIP音乐在线解析
浏览器安装暴力猴扩展即可使用 // ==UserScript== // @name 全能VIP音乐在线解析 // @version 0.0.10 // @homepage https://greasy ...