用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 ...
随机推荐
- UI_UINavigationController
创建 UINavigationController(导航控制器) 在AppDelegate.m中创建 // 创建一个普通控制器 RootViewController *rootVC = [[RootV ...
- 【cl】测试用例【文本框-电子邮箱】
电子邮箱控件用例: 1.只输入字母,如:abc 2.只输入数字,如:123 3.空白.空格或回车等 4.特殊的字符,如:￥,＄等 5.上述四种的组合 6.不正确的邮箱组合: ①.abc@sohucom ...
- MySQL数据库——索引与视图
索引 MySQL的索引包括普通索引.唯一性索引(unique index).全文索引(fulltext index).单列索引.多列索引和空间索引等. 1.索引的创建 ·创建表的时候创建索引 SQL语 ...
- poj3621 Sightseeing Cows
01分数规划 二分+spfa负环(SLF优化) #include<cstdio> #include<iostream> #include<cstring> #inc ...
- vue插件 vue-seamless-scroll 无缝滚动插件ES6使用总结
最近因为需求需要写一个项目信息无缝向上滚动组件,在网上搜了一下,看到大家的一致好评就果断的使用了vue-seamless-scroll组件.下面就简单的介绍它的使用,具体详细的使用推荐大家去看下开发者 ...
- C#操作Mysql类
using System;using System.Collections.Generic;using System.Text;using System.Data;using System.Text. ...
- Hadoop MapReduce编程 API入门系列之wordcount版本1（五）
这个很简单哈,编程的版本很多种. 代码版本1 package zhouls.bigdata.myMapReduce.wordcount5; import java.io.IOException; im ...
- 第一个Hibernate程序
一 新建一个Java工程(Hibernate) 在src目录下创建一个名为"hibernate.cfg.xml"的文件并配置好各个属性,如下: <?xml version=& ...
- 什么是 HTML5?
HTML5 是下一代的 HTML. 什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web ...
- P1284 三角形牧场
题目描述 和所有人一样,奶牛喜欢变化.它们正在设想新造型的牧场.奶牛建筑师Hei想建造围有漂亮白色栅栏的三角形牧场.她拥有N(3≤N≤40)块木板,每块的长度Li(1≤Li≤40)都是整数,她想用所有 ...