js贪吃蛇-简单版
分享个用原生js写的贪吃蛇,最近在学java,按照当年写的 js的思路,转换成java,换汤不换药
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>title</title>
<style type="text/css">
table{
border: 1px solid gray;
border-collapse:collapse;
}
td{
width:2px;
height:2px;
}
.red{
background-color:black;
}
.black{
background-color: red;
}
</style> <script type="text/javascript" >
(function(window){ function bind( fn, context ) {
if ( typeof context === "string" ) {
var tmp = fn[ context ];
context = fn;
fn = tmp;
} var slice = Array.prototype.slice; // Simulated bind
var args = slice.call( arguments, 2 ),
proxy = function() {
return fn.apply( context, args.concat( slice.call( arguments ) ) );
}; return proxy;
} function extend(o1, o2) {
for (var i in o2) o1[i] = o2[i];
return o1;
} function clog(d){
try{
console.log(d);
}catch(e){};
} function each(obj, callback, args) {
var name,i = 0,
len = obj.length,
isObj = len == undefined;
if(args){
if(isObj){
for(name in obj){
if(callback.apply(obj[name], args) === false ) break;
}
}else{
for(;i < len;){
if(callback.apply(obj[i++], args) === false ) break;
}
}
}else{
if(isObj){
for(name in obj){
if(callback.call(obj[name], name, obj[name]) === false ) break;
}
}else{
for(;i < len;){
if(callback.call(obj[i], i, obj[i++]) === false ) break;
}
}
}
}
function range(m, n) {
var arr = [];
for(;m <= n; m++){
arr[m] = m;
}
return arr;
}
var css = {
hasClass: function(a, b) {
return RegExp("\\b" + b + "\\b").test(a.className)
},
addClass: function(a, b) {
if (!this.hasClass(a, b)) a.className = a.className + " " + b
},
removeClass: function(a, b) {
a.className = a.className.replace(RegExp("\\b" + b + "\\b"), "")
}
};
function Snake(conf) {
var conf = extend({
x: 0,
y: 4,
keycode: 39,
move_arr: [[0,0,0],[0,1,1],[0,2,2],[0,3,3]],
food_arr: [],
step: 0,
t_size: 40,
speed: 100
}, conf);
extend(this, conf);
this.init();
};
Snake.prototype.init = function() {
var self = this, timer,
auto = function() {
if(self.x >= 0 && self.x < self.t_size && self.y >= 0 && self.y < self.t_size && self.is_moved()){
self.direct_opt();
timer = setTimeout(auto, self.speed);
}
};
this.last_keycode = this.keycode;
this.allow_arr = range(0, this.t_size * this.t_size - 1);
this.drawTable();
//按下按键
document.onkeydown = function (e){
var _code = (window.event||e).keyCode;
if(self.last_keycode != _code && Math.abs(_code-self.last_keycode) != 2){
self.last_keycode = self.keycode = _code;
}
clearTimeout(timer);
auto();
} var func = bind(this.random_food, this);
each(range(0,8), func);
this.random_food();
auto();
}
Snake.prototype.two2one = function(num, scale) {
scale = scale || this.t_size;
if(typeof num == 'number'){
return [Math.floor(num/scale), num%scale];
}else{
return num[0] * scale + num[1];
}
}
Snake.prototype.is_moved = function() {
var td = this.table.rows[this.x].cells[this.y]
return !css.hasClass(td, 'red');
}
Snake.prototype.random_food = function() {
var self = this,
rand = function(m, n) {
return Math.floor(Math.random() * ( n - m + 1) + m);
},
in_array = function(val, arr) {
var flag = false;
for(var i = 0; i < arr.length; i++){
if(arr[i] == val){
flag = true;
}
}
return flag;
},
get_no_moved_arr = function() {
var tmp_arr = [],moved_arr = self.move_arr,
arr = [], f_arr, move_num, moved_str;
if(self.food_arr.length > 0) {
moved_arr = moved_arr.concat(self.food_arr);
}
for(var i = 0; i < self.move_arr.length; i++) {
tmp_arr.push(self.move_arr[i][2]);
}
moved_str = ',' + tmp_arr.join(',') + ',';
for(var i = 0; i < self.allow_arr.length; i++) {
if(moved_str.indexOf(',' + self.allow_arr[i] + ',') === -1) {
arr.push(self.allow_arr[i]);
}
}
move_num = arr[rand(0, arr.length - 1)];
f_arr = self.two2one(move_num)
self.food_arr.push(f_arr.concat(move_num));
return f_arr;
},
no_moded_arr = get_no_moved_arr();
var rand_handler = this.table.rows[no_moded_arr[0]].cells[no_moded_arr[1]];
css.addClass(rand_handler, 'black');
}
Snake.prototype.drowSnake = function() {
for(var i = 0; i < this.move_arr.length; i++){
var cur = this.move_arr[i],
cur_handler = this.table.rows[cur[0]].cells[cur[1]];
if(!css.hasClass(cur_handler, 'red')){
css.addClass(cur_handler, 'red');
}
}
}
Snake.prototype.drawTable = function() {
document.body.innerHTML = 'total score: <span id="score">0</span>';
var table = document.createElement('table');
this.table = table;
for(var i = 0; i < this.t_size; i++){
var row = table.insertRow(0);
for(var j = 0; j < this.t_size; j++){
row.insertCell(0);
}
}
this.score = document.getElementById('score');
document.body.appendChild(table); this.drowSnake();
}
Snake.prototype.direct_opt = function() {
this.move_arr.push([this.x, this.y, this.two2one([this.x, this.y], this.t_size - 1)]);
this.drowSnake();
var next_pos = this.table.rows[this.x].cells[this.y];
if(this.step++ && !css.hasClass(next_pos, 'black')){
var last_pos = this.move_arr.shift();
css.removeClass(this.table.rows[last_pos[0]].cells[last_pos[1]], 'red');
}
if(css.hasClass(next_pos, 'black')){
css.removeClass(next_pos, 'black');
this.score.innerHTML = parseInt(this.score.innerHTML) + 10;
this.food_arr.shift();
this.random_food(); if(this.speed >80 && (this.move_arr.length - 4) % 10 == 0) {
this.speed *= 0.9;
}
}
switch(+this.keycode){
case 37:
this.y--;
break;
case 38:
this.x--;
break;
case 39:
this.y++;
break;
default:
this.x++;
}
}
Snake.prototype.drawTable1 = function() {
var str = '',
tr = [];
for(var i = 0; i < this.t_size; i++){
var td = [];
for(var j = 0; j < this.t_size; j++){
td.push('<td></td>');
}
tr.push('<tr>' + td.join('') + '</tr>');
}
str = '<table>' + tr.join('') + '</table>';
document.body.innerHTML = str;
}
window.Snake = Snake;
})(window);
window.onload = function() {
new Snake();
}
</script>
</head>
<body >
</body>
</html>
效果
js贪吃蛇-简单版的更多相关文章
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- 原生Js贪吃蛇游戏实战开发笔记
前言 本课程是通过JavaScript结合WebAPI DOM实现的一版网页游戏---贪吃蛇的开发全过程,采用面向以象的思想设计开发.通过这个小游戏的开发, 不仅可以掌握JS的语法的应用,还可以学会D ...
- JS贪吃蛇游戏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- c/c++ 贪吃蛇控制台版
贪吃蛇控制台版(操作系统win7 64位:编译环境gcc, vs2017通过,其它环境未测试 不保证一定通过) 运行效果: #include <iomanip> #include < ...
- JS贪吃蛇小游戏
效果图展示: 具体实现代码如下: (1)html部分 !DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- js贪吃蛇（构造函数）
给大家分享一下这几天我研究的一个贪吃蛇,挺简单的,但是实现起来其实有点绕的,我给大家附上完整代码,一起分析学习一下,主要用的是构造函数. 思想: .设计蛇:属性有宽.高.方向.状态(有多少节),方法: ...
- HTML5+CSS+JS 贪吃蛇demo
我写博客的主要目的就是温习所学的知识,自己以前写的游戏当然不能放过! 这款网页版贪吃蛇是大一下册学习网页前端时老师教我们写的,由于那个时候初学网页前端,所以这款游戏是纯原生Java Script写的, ...
- Java经典小游戏——贪吃蛇简单实现（附源码）
一.使用知识 Jframe GUI 双向链表 线程 二.使用工具 IntelliJ IDEA jdk 1.8 三.开发过程 3.1素材准备 首先在开发之前应该准备一些素材,已备用,我主要找了一个图片以 ...
- js贪吃蛇源码
1.注意,自己引入jquery,这个demo基于jquery的,我的jquery是写的本地的 2.没有写注释,看不懂的再问我吧, <!DOCTYPE html><html> & ...
随机推荐
- Python多线程练习（threading）
这几天学习python多线程的时候,试了几次thread模块和threading模块,发现thread模块非常的不好用.强烈不建议大家使用thread,建议使用threading模块,此模块对thre ...
- JavaWeb（三）JSP概述
一.JSP概述 1.1.JSP简介 一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%>结束.JSP是一种Java servlet,主要用于实现 ...
- （Java后端 Java web）面试时如何展示自己非技术方面的能力（其实就是综合能力）
这篇文章的适用范围其实不仅限于Java后端或Java Web,不过其中有些是拿这方面举例的,在其它方面,大家可以举一反三,应该也能得到些启示. 我们在面试时,会发现有些候选人技术不错,比如在Java ...
- Quartz入门案例与介绍（与spring整合）
Quartz概述 Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简单或 ...
- try catch finally 中包含return的几种情况，及返回结果
当当当,兴致勃勃的第二篇博客,散花~ 下面是正题(敲黑板) 第一种情况:在try和catch中有return,finally中没有return,且finally中没有对try或catch中要 retu ...
- MyBatis Generator配置示例
(一).MBG介绍 MyBatis Generator(MBG)是一个Mybatis的代码生成器,它可以用来生成可以访问(多个)表的基础对象.MBG解决了对数据库操作有最大影响的一些简单的CRUD(插 ...
- 使用hive客户端java api读写hive集群上的信息
上文介绍了hdfs集群信息的读取方式,本文说hive 1.先解决依赖 <properties> <hive.version>1.2.1</hive.version> ...
- 一起来学linux：网络命令
首先介绍最基本也是经常用到的命令ifconfig,对应windows中的ipconfig.执行ifconfig会将所有的端口信息都显示出来,包括IP地址,MTU 接收和发送的报文还有HWaddr也就是 ...
- vue.js实例对象+组件树
vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件 ...
- win10 uwp 切换主题
本文主要说如何在UWP切换主题,并且如何制作主题. 一般我们的应用都要有多种颜色,一种是正常的白天颜色,一种是晚上的黑夜颜色,还需要一种辅助的高对比颜色.这是微软建议的,一般应用都要包含的颜色. 我们 ...